EC厨房プログラマーブログ EC-CUBEやWordPressをわかりやすく紹介

商品画像のポップアップをお洒落に！「FancyBox」

EC-CUBEでは、任意で拡大サイズの商品画像をアップロードすることが出来ます。
アップされた画像は商品詳細ページから、ポップアップで見ることができます。
このポップアップをオシャレでクールなものに変えることで、ユーザーに与える印象も良くなることも間違いない！？

まずはjQueryの最新版をダウンロード

EC-CUBEもjQueryを使っていますが、バージョンが古いようです。
最新版をダウンロードしましょう。

jQuery 1.3.1 - Google Code

もとからあるjQueryファイルを上書きします。
※私が上書きして確認した限りでは問題は起きませんでした。不安な方は別名で保存して使用してください。

標準だと以下のパスにあります。
/html/user_data/packages/default/js/jquery.js
これを上書きします。

FacyBoxのダウンロード

次にfancyboxのダウンロードを行います。

http://fancy.klade.lv/
※右上のZIPをダウンロードしてください。

解凍したらfancyboxのディレクトリごと、default以下の場所にコピーしてください。
/html/user_data/packages/default/fancybox/

Smatyテンプレートの書き換え

jQueryは他の場所でも使えるので、テンプレート側に加えてしまいましょう。
下記のテンプレートファイルを開きます。
/data/Smarty/templates/default/site_frame.tpl

<script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"><!-- これを追加 -->
<title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title>

商品詳細ページを書き換え（FancyBoxの追加）

商品詳細ページは管理画面のデザイン管理から書き換えます。
「デザイン管理」->「商品詳細ページ」->「メイン編集」

下記コードを頭の方に加える。

<link rel="stylesheet" href="<!--{$TPL_DIR}-->fancybox/fancy.css" type="text/css" media="screen">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.fancybox-1.0.0.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.pngFix.js">

<!–★画像★–>の下あたり。

<!--★画像★-->
<a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
    <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>
<p>
    <!--★拡大する★-->
   <a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
      <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
   </a>
</p>

<!–拡大写真がある場合ここから–>のしたあたり。

<!--{if $arrFile[$lkey].filepath != ""}-->
<a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
<!--{/if}-->
<!--サブ画像-->
  <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
<p>
  <a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
    <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
  </a>
</p>
<!--{/if}-->

画像を挟む<A>タグを既存のものから、
<a href=”<!–{$arrFile[$lkey].filepath}–>”>
に書き換えるだけです。

これでファンシーでクールな商品画像ポップアップに変わりますよ。
ぜひお試しください。

バランスの良い配色のサンプルを取得できる - 『Adobe Kuler』

デザインの要はなんと言っても配色。
どれほど優れたアイコンやレイアウトを駆使しても、色合いを間違えたら醜くなるものです。

そこでAdobe公式のカラーチャート集を利用しましょう。
Adobe Kuler（アドビ クーラー）

ASCII.jpにも詳細な記事が掲載されています。
もう配色には困らない！「Adobe Kuler」

どうやって使うのか？

• カラーチャートのRGB値をコピペで使う
• カラーテーマをダウンロードしてPhotoShopに取り込む
• 写真から自動でカラーチャートを作成させる

などの機能があります。

自分でサービスを作れるけれど、デザインがしょぼくて使ってくれない！
なんて経験のあるエンジニアの方には重宝することは間違いありません。
以下のような安全策でオリジナルテンプレートを崩壊させない方法がオススメです。

• 以前紹介したフリーのテンプレート集サイトからテンプレートをダウンロード
• それらのパーツの色合いを変更してオリジナルのテンプレートにする

使用するフリーテンプレートも、色数の少ないものがいいでしょう（参考）。

デザインを助けるWEBサービスが充実してきたのは、自分みたいなプログラマーにはうれしいです。
人間見た目が肝心なので、少しでもマシになるのであれば、どしどし活用していましょう。

WordPressを携帯対応にするプラグイン「ktai_style」

携帯電話でWordPressを見ると、CSSが外れた状態のページが表示されると思います。
大きな画像などを使っていなければ、これでも問題ないのですが、もしヘッダーにサイズの大きい画像があったりすると、メモリ不足で全てが表示されなかったりします。

そこで携帯からのアクセスに対して、携帯用のスタイルで表示するプラグイン「ktai_style(携帯対応プラグイン)」です。

ダウンロード 安定版 ver1.47: ktai_style147.tar.bz2 (248.3 KB)

概要

サイトによると以下のようなことが可能になります。

• 携帯電話で閲覧すると軽量化したサイト表示を行います。(フロントページのみならず、アーカイブページ、個別エントリーの URI も対象)
• ページ容量が大きい場合、端末に応じてページ分割を行います (5KB〜50KB ごと)。
• 要所要所で、携帯電話に応じた絵文字を使用しています (数字・矢印・時計・顔など)。
• コメントや投稿本文に絵文字が使えます (設定変更が必要)。携帯電話での閲覧時は各社に応じた絵文字に変換し、PC やスマートフォンでの閲覧時はテキストに置換して表示します。

導入方法

1. プラグインをダウンロードしたら、解凍します。
2. 携帯からブログ管理をしないのであれば、admin フォルダを削除します（推奨）。
   理由： adminフォルダがあるとフッターに「ログイン」リンクが表示されてしまいます。あまりよろしくありません。
3. /wp-content/plugins/ に ktai_style のフォルダごとアップロードしてください。
4. PCから管理画面にログインし、プラグインを有効にします。

サイトをに携帯からアクセスしてください。携帯用のテーマで表示されているはずです。

注意点

PHP5対応です。PHP4のサーバでは使えません。

カスタマイズ

テーマはデフォルトで４つほどあります。全ては /wp-content/ktai_style/themes/ の中にあるので、自由にカスタマイズ、及び追加することが出来ます。

携帯によるインターネット利用者はPCからの利用者数とほぼ同じといわれています。携帯からの集客が多いECサイトならば、「ktai_style」を導入したブログを使うことで、より多くの集客機会を得ることが出来るのではないでしょうか。