素材と言ってもケースに合わせた素材が必要なわけですが
最近では、ネット上でも無料で素材を提供してくれているサイトが多々あります。]]> そのひとつに最近公開になった自分つのフリー写真素材を提供している
モデルピースさん
著作権表示の義務もなく、商用利用も可能です。
有料素材をストックしていてもなんだかいまいちはまらない時に、撮影の予算までは・・・って悩みがあるときに役立ちそうです。
いつか使ってみたいですね。
今後、どんな展開になるのか非常に楽しみなサイトです。
]]>著作権表示の義務もなく、商用利用も可能です。
有料素材をストックしていてもなんだかいまいちはまらない時に、撮影の予算までは・・・って悩みがあるときに役立ちそうです。
いつか使ってみたいですね。
今後、どんな展開になるのか非常に楽しみなサイトです。
]]>
ムーバブルタイプで全エントリーの投稿数を表示するタグ。
最近物覚えが悪くなったのに、以前覚えていたのにいざ必要になるとわざわざ調べないといけません・・・。よって覚書します。
<$MTBlogEntryCount$>
ムーバブルタイプのテンプレート内に下記を記述します。
現在<$MTBlogEntryCount$>件のブログ記事があります。
現在15件のブログ記事があります。
このように表示されます。
ブログの投稿数に合わせて件数の表示が変わります。
ムーバブルタイプで何件の記事投稿数があるのか表示したい時に使ってください。
B!とブックマーク数を表示する横型のスタンダードなはてなブックマーク登録ボタンです。
設置方法は以下の通り。 表示したい場所に以下のソースをはりつけてください。
<a href="http://b.hatena.ne.jp/entry/<$MTBlogURL$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTCategoryArchiveLink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTBlogURL$><$MTFolderPath$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
B!とブックマーク数を大きめのサイズで表示してくれるのがバーティカルタイプです。
<a href="http://b.hatena.ne.jp/entry/<$MTBlogURL$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTCategoryArchiveLink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTBlogURL$><$MTFolderPath$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
B!のみの表示でブックマーク数は表示されないタイプがシンプルタイプです。
<a href="http://b.hatena.ne.jp/entry/<$MTBlogURL$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTBlogURL$><$MTFolderPath$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
今までのはてなブックマーク登録よりこっちの方が設置しやすいので今まで敬遠してた方でも簡単に取り入れてもらえると思います。
]]>
deconceptさんで紹介されているXHTMLにswfファイルを簡単に埋め込む事が出来るswfobject.jsのご紹介です。
]]> swfobject.jsの設定方法まずはじめにdeconceptさんからswfobject.jsをダウンロードしてきます。
ダウンロード後はFTPなどを使って適当な場所へアップロードします。
<head>～</head>にswfobject.jsへのパスを記述します。
<script type="text/javascript" src="js/swfobject.js"></script>
swfファイルを埋め込む場所に下記コードを記述します。
<div id="flashcontent">
swfの名前を記入.swf
</div>
<script type="text/javascript">
var so = new SWFObject("swfファイル名", "movie", "700", "120", "8", "#fff");
so.write("flashcontent");
</script>
以上でswfファイルの埋め込みが完了です！
結構簡単なのでふとした時に役立ちます。
<div id="flashcontent">～</div>
<div id="flashcontent">～</div>にはswfファイルの名前を記述してください。
imgで言うところのaltみたいなものです。
Flashが表示されないブラウザやパソコンにはFlashの代わりに代替えテキストとして<div id="flashcontent">～</div>に記述した内容が表示されます。 SEO的にも良いですね。
<script type="text/javascript">
var so = new SWFObject("swfファイル名.swf", "movie", "700", "120", "8", "#fff");
so.write("flashcontent");
</script>
表示したいswfファイルまでのパスを記述します。
embedタグのIDとなります。
swfファイルのwidth(横幅)の指定します。
ｓｗｆファイルのheight(高さ)の指定します。
Adobe Flash Playerの必須バージョンを入力します。
背景色（background-color）を指定する事ができます。
Flashコンテンツを表示させるスクリプトを出力するように命令します。
文章で説明にしちゃうとなんだか長々となってしまいましたね・・・。
とりあえず以上がswfobject.jsの説明になります。
ほんと、EC-CUBEを使うと毎回思う事なんですが、最低限必要である受注後のメールも基本的には役に立たないものばっかり・・・。
気が利いていないと言いますか。どうせここまで良いものをオープンソースとして提供しているんだから、ほんの少し気を利かせるだけでぐっと利用者も増えると思うんですけどね。 もうすでにいっぱい利用者がいるから気にもならないんですかね。
今回は「注文受付メール」「注文キャンセル受付メール」「取り寄せ確認メール」の他に自身のサイトに必要なメールテンプレートの追加方法を覚書です。今回は配送完了メールの追加を例にしていますので、参考にする際はご自分の状態にあった物を作っていただければと思います。
今回のEC-CUBEのバージョンは 2.4.3
]]> システム設定＞マスタデータ管理＞mtb_mail_tpl_path
EC-CUBE管理画面のシステム設定＞マスタデータ管理＞mtb_mail_tpl_pathを開くと上記のような画面が表示されます。
これにまずは追加のデータ部分に必要内容を記入し追加します。
ID 4
値 mail_templates/delivery_mail.tpl
と今回は入力しました。
※ IDと値は他と同じ内容は使用できないのでお気を付けください。
次に同じく管理画面のシステム設定＞マスタデータ管理＞mtb_mail_templateに必要内容を追加します。
追加のデータに
ID4 （先程（mtb_mail_tpl_path）使用したIDと同じものを入力します。）
値 発送完了メール
このように入力し登録します。
FTPなどでdata/Smarty/templates/default/mail_templates/を開き「order_mail.tpl」を一度自身のパソコン上にダウンロードします。
その後、order_mail.tplをmtb_mail_tpl_pathで設定した値と同じ名前に変更します。
今回の場合はdelivery_mail.tplとなります。
名前の変更が終わればdata/Smarty/templates/default/mail_templates/にアップロードします。
以上の作業で管理画面でメールの設定が出来るようになりました。
基本情報管理>メール設定>発送完了メールを追加します。
メールタイトルは発送完了メール
あとはヘッダー、フッターはサイトにあった内容を記述してください。
これで登録すると、受注後メールを送信する際に「注文受付メール」「注文キャンセル受付メール」「取り寄せ確認メール」に合わせて「発送完了メール」を選択し送信する事が可能になります。
同じ方法でIDと値を変えて追加していくことで他のメールも追加出来ます。
今回は発送完了メールを例に追加しましたがこれ以外にも入金確認メールや、配送後のフォローメールなど追加することでより業務時間を短縮してEC-CUBEでネットショップを運営出来るんで便利というより不可欠な設定ですね。
]]>
EC-CUBEの営業日カレンダーは初期設定ではふた月分が表示されています。
この2つの表示をひと月に変更する方法。
EC-CUBE管理画面のブロックを変更する必要があります。
デザイン管理>ブロック編集＞カレンダーを編集します。
最初の状態では下記のように記述されています。
この記述を変更するだけで簡単にカレンダー表示を変更できます。
カスタマイズ前
<!--{section name=num loop=$arrCalendar}-->
カスタマイズ後
<!--{section name=num loop=1}-->
以上の変更でEC-CUBEの営業日カレンダー表示を変更できます。
要は$arrCalendarを1に変更するだけです。
多分、営業日カレンダーが２つ表示されても大きな問題はありませんが、今回手掛けたサイトの場合カテゴリーの関係でサイドバーがやたらと縦長になってしまうのでカレンダー表示をひと月分のみの表示に変更しました。
普通にEC-CUBEでサイト制作する際はそんなに気にならない部分なのかもしれないですね。
]]>
EC-CUBEでちょっと便利の悪い部分はページタイトル。
管理画面で、編集できるようになればかなり便利なんですけどね。
でも、出来ないものはしかたないので今回はEC－CUBEのページタイトル（<title>～</title>）、キーワード（keywords）、ディスクリプション（description）の変更方法を僕的に一番手っ取り早い方法でご説明します。
間違っちゃうと、色々面倒なんで、最初の状態をバックアップしてからカスタマイズをはじめた方がいいと思います。
今回のEC-CUBEバージョンは2.4.3です。
]]> data/Smarty/templates/site_frame.tplの変更data/Smarty/templates/site_frame.tpl を変更します。間違えるといけないんで慎重にやってください！
data/Smarty/templates/site_frame.tplのカスタマイズ前に記載されている下記のタグを削除します。
<title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title>
<meta name="description" content="<!--{$arrPageLayout.description|escape}-->" />
<meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" />
カスタマイズ前のタグを削除したら、今度は下記のコードを記入します。
記入後、保存してdata/Smarty/templates/site_frame.tplに上書き保存。
<!--{assign var=top value="`$smarty.const.URL_DIR`index.php"}-->
<!--{assign var=list value="`$smarty.const.URL_DIR`products/list.php"}-->
<!--{assign var=detail value="`$smarty.const.URL_DIR`products/detail.php"}-->
<!--トップページ用-->
<!--{if $smarty.server.PHP_SELF==$top}-->
<title><!--{$arrSiteInfo.shop_name}--></title>
<meta name="description" content="<!--{$arrPageLayout.description|escape}-->" />
<meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" />
<!--商品一覧用-->
<!--{elseif $smarty.server.PHP_SELF==$list}-->
<!--{if $tpl_subtitle != "全商品"}-->
<title><!--{$tpl_subtitle}--> | <!--{$arrSiteInfo.shop_name}--></title>
<!--{else}-->
<title><!--{$arrPageLayout.description|escape}--> | <!--{$arrSiteInfo.shop_name}--></title>
<!--{/if}-->
<meta name="description" content="<!--{$arrPageLayout.description|escape}-->" />
<meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" />
<!--商品詳細用-->
<!--{elseif $smarty.server.PHP_SELF==$detail}-->
<title><!--{$tpl_title|escape}--> | <!--{$arrSiteInfo.shop_name}--></title>
<meta name="description" content="<!--{$arrProduct.main_list_comment|escape|regex_replace:"/[\r\t\n]/":""}-->" />
<meta name="keywords" content="<!--{if $arrProduct.comment3}--><!--{$arrProduct.comment3|escape|regex_replace:"/[\r\t\n]/":""|regex_replace:"/、/":","}--><!--{/if}-->" />
<!--その他-->
<!--{else}-->
<title><!--{$tpl_title|escape}--> | <!--{$arrSiteInfo.shop_name}--></title>
<meta name="description" content="<!--{$arrPageLayout.description|escape}-->" />
<meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" />
<!--{/if}-->
ただこれだけでは商品詳細のページタイトルに商品詳細が表示されたままになります。 これがある意味一番うっとうしいです 苦笑 何のために最初から入ってるかわかりません。
/data/class/pages/product/LC_Page_Products_Detail.phpの編集が必要になってきます。
253行目の変更
$this->tpl_title = "商品詳細". $this->arrProduct["name"];
商品詳細という文字を消します。
$this->tpl_title = "". $this->arrProduct["name"];
458行目の変更
$this->tpl_title = "商品詳細 ". $this->arrProduct["name"];
同じく、商品詳細という文字を消します。
$this->tpl_title = "". $this->arrProduct["name"];要は、253行目と458行目の商品詳細を消せばいいって事です。
以上の作業で完了です、次は各ページのページタイトル設定に移ります。
基本情報設定>SEO管理でトップページ（index.php）、商品一覧（products/list.php）、商品詳細（products/detail.php）、MYページ（mypage/index.php）のページタイトル、キーワード、ディスクリプションの設定が可能です。
ただし、ここでは商品詳細の記入は必要ありません。商品詳細に関しては商品管理ページ> 商品登録に表示される検索ワード、一覧 - メインコメントに記入してもらうことでページに反映されます。
SEO的にもEC-CUBE初期設定より効果があるし、あまり難しく考えないならこの方法で十分だと思います。何か気になる事、気付いた事があれば追記、または修正します。
]]>
EC-CUBEで商品一覧数を変更する方法。
すごい簡単なんですが、知ってないと何気につまずく。
自分も初めてEC-CUBEを触った時はそうでした。
今回のEC-CUBEバージョンは2.4.3です。
]]> 通常は15件表示となっていますが、今回の変更は18件に変更するとします。
画像クリックで拡大画像をご覧いただけます
PRODUCTS_LIST_MAXを15から18へ変更します。
自分は、恥ずかしながら最初はココだけを変更すれば済むと思ってました。
画像クリックで拡大画像をご覧いただけます
システム設定>マスタデータ管理>mtb_product_list_maxを編集します。
3つの項目が出てきますが、現状EC-CUBEのシステムで使用しているのは一番上の「ID15」「値15件」のみの小表示件数を選択だけです。まずは、ここに表示したい件数を入力します。
18件表示する場合は、「ID」を18、「値」 18件に変更します。
以上の変更でEC-CUBE 商品一覧の表示件数を変更する事が出来ます。
]]>
そろそろいつでも使えるくらいにしておかないといけないかななんて思っているHTML5。
CSS3ももちろんですが、今回はHTML5について丁寧に説明されているサイトを見つけたのでご紹介します。
閲覧するのにGoogle ChromeかSafariのどちらかのブラウザじゃないと見れないんでご注意を！
近々、本屋に行って、HTML5やCSS3の本を何冊か購入して目を通して、サンプルサイトなんかも始めようかなと思います。色々、最初は大変そうだけどなんだか楽しそうでワクワクしています。
]]>
ムーバブルタイプで絶対に使用するMTEntriesタグですが、それと合わせて使うことがあるタグをまとめました。しょっちゅう使用するものは覚えていますが、たまに使用するとなるといちいち調べるのが面倒なので覚書。
新しいタグや現在掲載されていないタグは暇を見て追加しようと思います。
]]>limit=""
含むinclude_subcategories="1"
含まない
include_subcategories="0"
一度だけ
unique="1"
何度も
unique=" 0"
一つの場合
exclude_blogs=""
複数の場合
exclude_blogs="1,2,3"
間違い、記述ミスなどがあればすみません。
ご指摘頂けると助かります。
twitterでフォローしたりされたり、フォロワーの人数が増えれば増えるほど管理が難しくなります。
そんな悩みを解決するtwitterの管理ツールが合ったんでメモ。
ちょっと使ってみましたがなかなか便利です。
自身のtwitter IDを入力するだけで使えるので手軽さもいいですよね。
「一方的にフォローしている」「相互フォロー」「一方的にフォローされている」が一目でわかります。
こんな感じで、一目でわかりますよ！
twitterでフォロワーが増えてきた方は使ってみてください。
すでにもう使ってます？
ちょっと乗り遅れましたが、これから僕も活用していこうと思います。
]]>
最近ECサイトの制作依頼が圧倒的に多いのですがEC-CUBEやZENCART、OSCommerceなど面白いオープンソースがたくさん存在します。 とりあえず最近気になるECサイト構築が可能なオープンソースのまとめ
]]> LIVE Commerce ライブコマース
自分たち目線の使いやすいと、お客さんが管理するにあたって使いやすいは全然違ってくるんで自分たちで試してみないと何とも言えないけど、ここで紹介したのはそこそこいけそうな気がするECサイトオープンソース。 もちろん皆さんが知ってるEC-CUBEやらZENCART、OSコマースなんかは僕がコメントするまでもないですよね。
紹介した中には、すでに使用してECサイト構築させてもらったオープンソースも多々ありますがまだ使った事のないオープンソースを近いうちに試してみたいと思っています。
]]>
EC-CUBEの商品登録に配送日目安を選択する所がありますが、商品追加時に選択しただけではページ上では配送日目安が表示されません。
そこで、配送日目安を表示させる為には、商品一覧ページ、商品詳細ページにコードを追加する必要が出てきます。配送日目安は簡単に言うと納期の事です。EC-CUBE上では配送日目安となっているのでそのままの言葉で説明します。
※今回のEC-CUBEバージョンは2.4.3
]]> 商品詳細ページ
納期：<!--{$arrDELIVERYDATE[$arrProduct.deliv_date_id]}-->
これを、デザイン管理 > ページ詳細設定 > 商品詳細ページの表示させたい場所へ記入します。
納期：<!--{assign var=deliv_date_id value=$arrProducts[cnt].deliv_date_id}-->
<!--{$arrDELIVERYDATE[$deliv_date_id]}-->
これをデザイン管理 > ページ詳細設定 > 商品一覧ページの<!--{section name=cnt loop=$arrProducts}--> ~ <!--{/section}-->の間に記入します。
以上のカスタマイズで、商品一覧、商品詳細ページ上で配送日目安を表示する事が出来ます。配送日目安？ 納期？ どっちの表現がいいのか微妙な所ですね・・・。
]]>
EC-CUBEの商品登録にメーカーURLを記入する所がありますよね。
でも、デフォルトの状態ではURLを入力してもネットショップ上では表示されません。
そこで、URLを表示させる為には、商品一覧ページ、商品詳細ページにURLを表示させる為のコードを追加しなくてはいけません。
※今回のEC-CUBEバージョンは2.4.3
]]> 商品詳細ページ
<!--{if $arrProduct.comment1|escape}-->
メーカーURL：<a href="<!--{$arrProduct.comment1|escape}-->" target="_blank"><!--{$arrProduct.comment1|escape}--></a>
<!--{/if}-->
これを、デザイン管理 > ページ詳細設定 > 商品詳細ページの表示させたい場所へ記入します。
<!--{if $arrProducts[cnt].comment1|escape}-->
メーカーURL：<a href="<!--{$arrProducts[cnt].comment1|escape}-->" target="_blank"><!--{$arrProducts[cnt].comment1|escape}--></a>
<!--{/if}-->
これをデザイン管理 > ページ詳細設定 > 商品一覧ページの<!--{section name=cnt loop=$arrProducts}--> ~ <!--{/section}-->の間に記入します。
以上のカスタマイズで、商品一覧、商品詳細ページ上でメーカーURLが表示されます。
家電販売サイトとかではすごく便利ですよね。
PILOTのサイトで提供されているサービスがすごく面白い。
自分で書いたフォントを手書きにして、スキャンすると自分の手書きフォントが使えるっていう優れモノ。これはぜひ一度体験してほしいです。
面白い事するなぁと感心します。
ちなみに、僕の汚い字だとこういう感じです。
後でスキャンしたフォントは加工もできます。
YOU TUBEみてもらえれば使い方はすぐにわかると思います。