たまには、真面目な話を書きます。
えっと、web屋さん的な話題なので、興味のない方はスルーの方向でお願いします。
CSSは、すでにWEBのスタンダードな技術になりました。新しいバージョン（CSS3.0）なども登場してきています。
そんなCSSですが、色々なテクニックも開発されています。今回紹介するCSS SPRITEもその一つです。
CSS SPRITEとは、
WEBページを作成する時に、画像要素をCSSのbackgroundプロパティを使用する場合、複数の画像を一つにまとめて、通信量を抑えるテクニックです。
以前は、画像の数よりもひとつの画像のサイズを小さくした方がいいという考え方が主流だったと思います。（僕が勉強した頃は）
実際には、極端に大きい画像は別として、通常のページで使う範囲であれば、複数の画像を読み込むよりは、それらをまとめてしまった方が結果的に軽量化につながります。
サンプルを作りましたので、見てみましょう。
下図のようなページをコーディングするとします。
■sample01
画像を複数にスライスして、ロールオーバーはjavascriptsで対応。
◆サンプルを見る
リクエスト数：17
総サイズ：87ｋ
通信時間：668ms
■sample02
CSS SPRITEで対応。
◆サンプルを見る
◆使用した画像
リクエスト数：5
総サイズ：77ｋ
通信時間：414ms
結果をみると一目瞭然ですね。
これだけシンプルなページでも差がでます（わずかな差ですが・・・）、大きなページになるとその差も無視できなくなります。
もちろん、CSS SPRITEが必ずしもベストな方法とは限りませんし、今回のサンプルで使った「text-alignプロパティ」でテキストを消す方法などは、あまり好ましい技術ではないと思います。
ただ、「HTTPのリクエスト回数を減らすことが、パフォーマンスの改善にもっとも効果的である」という意見もありますので、今後取り入れていきたい技術ですね。（手間が増えますが・・・）
※個人的な読書のメモです。
伝える力 (PHPビジネス新書) (新書)
池上 彰 (著)
元ＮＨＫ職員池上彰氏のコラム。
著書の経験から導き出された「伝える」ためのテクニックが紹介されている。
【話す】
つかみの重要性＝うまくつかめれば、相手が「聞く気」を持ってくれる。
自分の事ばかり話さず、まわりも巻き込んで会話する。
型を崩すのは、きちんとした型があってからこそできる。相手への愛情をもって話す。
ほめ方、叱り方＝相手の感情に十分配慮して。
【書く】
素材は、自分で体験したものでないと、陳腐になってしまう。
うまくなるには、まず、真似る事。
書きあがったら、間をおいて読み返す。（もう一人の自分に見てもらう）
接続詞「そして/それからなど」には要注意。多用しないこと。
【伝える】
取捨選択の重要性。詰め込み過ぎない。
自分は何も知らない事を自覚する。教えてもらう姿勢が大切。
難しくし過ぎない（カタカナ語、慣用句など）。中学生に伝えるつもりで。
改めて常用的に使っている言葉の意味も考えてみる。
前回に引き続き・・・
サーバーからデータをダウンロードしたら、後はテンプレートを作りこんでいくだけです。
基本的には、HTML＋CSSで対応できます。
ただし、ページの表示を定義しているのは、htmlファイルではなく、.tplファイルになります。
ちなみに、ダウンロードしたデータはとても膨大で、
どこに何があるかとても分かりにくいです。。
デザイン面での修正に限って言うと、大きく分けて２ケ所を見ていけば大丈夫です。
◆CSSファイル、画像ファイル、一部のテンプレートファイル
/user_data/packages/テンプレート名 直下
detail.tpl,list.tpl,top.tplがここにあるのがミソです。
ちなみに、これらのファイルは、
・detail.tpl・・・商品詳細ページ
・list.tpl・・・商品インデックスページ
・top.tpl・・・トップページ
を定義しています。
◆その他のテンプレートファイル
/data/Smarty/templates/テンプレート名 直下
detail.tpl,list.tpl,top.tpl以外のテンプレートに関しては、上記の場所から変更できます。
主なテンプレートファイル
・footer.tpl:フッター
・header.tpl:ヘッター
・site_frame.tpl:<head>内の変更
・site_main.tpl:ページの枠組み基本、レイアウトの変更
その他個別に修正する場合は、修正したいページのＵＲＬから該当ファイルを判別できます。
例えば、/cart/index.php?product_id～ というページだったら
/data/Smarty/templates/テンプレート名/cart/index.tpl
というファイルを変更すればよい事になります。
ダウンロードしたファイルを修正して、FTPツールでサーバーにアップします。
ボクの場合、基本的には、サーバーサイドでのみデザイン修正をしますので、EC-CUBE管理者画面の「デザイン管理」は、レイアウト変更（サイドバーのブロック等）以外は使用しません。
ここまで理解できれば、あとは気合いと根性でコツコツ修正していくだけです。（かなり根気が必要ですよ。。）
ここからは、ボクが実際に組み込んでみての感想です。
EC-CUBEはとても優れたwebショッピングアプリケーションです。これだけのシステムを無料で提供してもらえる事は、開発者にとってとても有益な事です。
（顧客管理、商品管理、モバイルページ、メルマガなどとても多機能です！）
また、管理画面のＵＩは、もとても直観的でクライアントサイドでも扱いやすい仕上がりになっています。
ただ、それなりのページに仕上げるためには、相当な根気が必要です。（ボクは経験値２サイトなのでしょうがないですが、某サイトの立ち上げに約１週間程かかりました。）
商品の登録も、CSVファイルに部分的に対応できていますが、まだまだ完ぺきとは言えません。（画像の扱いが上手でなかったり・・・）大量の商品を登録する際には、かなり根気が必要です。
オープンソース＝無料という安易な発想でEC-CUBEに飛びつくと痛い目をあう可能性がありますので、十分に精査してから、作成に取り掛かるべきでしょう。
と、悪いことも書きましたが、使い方によってはとても有益なツールになると思います。ロックオンさんの姿勢が徐々に・・・な気もしますが、これだけのツールを提供してもらえる事に素直に感謝すべきかな？とも思います。
・・・という訳で、少しでも家計を助けるために先日作ったプランターを活かすために、家庭菜園を始めることになりました。
マツアズでも、何かを育てるのが流行っているようですし。
ボクの実家は農家でしたが、その辺のことはとんとど素人なので（＾＾；
今回は、初心者向けのホウレンソウを植えてみました。
果たして、ちゃんと生えてるか？
乞うご期待！
※あくまで、塩原流のカスタマイズ方法です。
１．デフォルトテンプレートのコピー
バックアップの意味も込めて、デフォルトをコピーしてから、カスタマイズを始めます。
（ある程度カスタマイズしたテンプレートがあれば、それをコピーしても構いません。）
[管理画面] デザイン管理＞テンプレート設定 よりデフォルトテンプレートをダウンロードして、
[管理画面] デザイン管理＞テンプレート追加 にテンプレートをアップロードします。
テンプレートコード,テンプレート名は任意で構いません。
その後、アップロードしたテンプレートを適応させます。
２．基本レイアウトの設定
[管理画面] デザイン管理＞レイアウト設定 より各ページの基本レイアウトを設定します。
※この設定は、テンプレートを変更するとリセットされますので注意してください。
３．ページ詳細修正の準備
[管理画面] デザイン管理＞ページ詳細設定
デフォルトですと、TOPページ／商品一覧ページ／商品詳細ページ／MYページの４つの項目があります。
TOPページ／商品一覧ページ／商品詳細ページの３つについて、タイトルをクリックして、内容を表示し、保存してください。
この処理「内容を表示し、保存する」という処理がキモになります。この処理をすることで
[サーバー] /httpdocs/user_data/packages/test[テンプレート名] 直下に detail.tpl、list.tpl、top.tpl
というファイルが作成されます。
ちなみに、この３つのファイルは
■detail.tpl：詳細ページのカスタマイズ用ファイル
■list.tpl：一覧ページのカスタマイズ用ファイル
■top.tpl：トップページのカスタマイズ用ファイル
で、初期状態ではサーバにないファイルです。
ここまで行った上で、サーバからデータをダウンロードしてください。
このブログでは、僕の感じた事をつらつらと書き綴って参ります。
マツアズの使い方分からなかったら、どのエントリーでも良いので、にコメントしてくださいね★
shiohara41.s2@gmail.com
※ちょっとした実験用のメールアカウントです。
こちらにメールしても返信が無い場合があります。
ご注意ください。