EC-CUBEは、無料で公開されているネットショップ構築専用のCMSです。
その中でも、EC-CUBE3.0は、2015年7月にリリースされた新しいバージョンで、今までよりさらにパワーアップしたデザイン性、機能性を兼ね備えています。
しかし、リリースされたばかりなので、現在はまだカスタマイズに関する記事が少なく、自分でプログラムを読める方出ないとカスタマイズが難しいという点があります。
ここでは、EC-CUBE3.0でオリジナルデザインをスタイルシートに適用させる方法について見ていきましょう。
目次
EC-CUBE3.0でオリジナルデザインを適用させる方法
EC-CUBE3.0でオリジナルデザインをスタイルシートに適用させる場合、既存のスタイルシートを編集することができません。
では、どうやってオリジナルデザインを適用させるかと言うと、「新しいスタイルシートを登録する」ことでデザインを適用させることができます。
新しいスタイルシートを登録するための詳しい手順は以下の通りです。
FTPでサーバーにアクセスする
まずは、FTPクライアントソフト等を使って、EC-CUBE3.0で適用されるスタイルシート群があるディレクトリにアクセスします。
「FTPクライアントって何？」という方は以下のページを参考にしてください。
FTPクライアントを起動し、サーバーに接続後、以下のディレクトリを参照しましょう。
【EC-CUBE3.0インストールディレクトリ】/html/template/default/css
新しくオリジナルのスタイルシートを作る
サーバー上で、新しいファイルを作ります。
右クリック→「新しいファイルを作成(T)」でファイルを作成できますので、ファイル名を入力してOKボタンをクリックしましょう。
ファイル名は何でも良いですが、ここでは「originalstyle.css」とすることにします。
EC-CUBEにスタイルシートを登録する
EC-CUBEで今回作った新しいスタイルシート読み込む設定をする必要があります。
以下のディレクトリにある「default_frame.twig」と言うファイルを編集して、以下の記述を行いましょう。
Twigファイルをどうやって開けば良いのかわからない、という方は以下のページを参考にしてください。
編集するファイルが存在しているディレクトリ
【EC-CUBE3.0インストールディレクトリ】/app/template/default/default_frame.twig
default_frame.twig
Twigのキャッシュをクリアにする
EC-CUBE3.0では、Twigファイルを編集した際にはTwigのキャッシュクリアが必要になります。
これを行わないうちは、情報が反映されませんのでご注意ください。
EC-CUBEの管理画面にアクセスし、「コンテンツ管理」→「キャッシュ管理」のページを表示します。
「twig」のチェックボックスにチェックが入っていることを確認し、「キャッシュクリア」ボタンをクリックしましょう。
ちなみに、FTPからキャッシュクリアを行うことも可能です。
その場合、以下のディレクトリにアクセスし、内部のキャッシュファイルを全て削除してください。
キャッシュファイルが存在しているディレクトリ
【EC-CUBE3.0インストールディレクトリ】/app/cache/twig/production/default
表示確認
以上の手順で、新しく作ったオリジナルスタイルシートの適用が完了しています。
サイトを表示して、スタイルシートに記述した内容が反映されているかどうかを確認しましょう。
【応用編】PC用スタイルシートとタブレット端末用スタイルシートを分けて作る方法
モバイルフレンドリーはWEBサイト構築において必須と言える重要な項目となっています。
ただ、制作側としては１つのスタイルシートに長々とPC用、タブレット用のスタイルシートが記載されていると、非常にややこしいという悩みがあります。
慣れないうちは、
・・・と思ったらタブレット用記述のデザインタグの方を修正してしまっていた！
ということもあります。
PC用スタイルシートとタブレット端末用のスタイルシートは分けてしまうことで、その煩わしさから解放されます。
分けることで、製作者は単純にPC版のデザイン修正がしたい時はPC版のスタイルシートを、タブレット端末用の編集時にはタブレット端末用のスタイルシートを参照すれば良いので非常にシンプルでわかりやすくなります
PC用スタイルシートとタブレット端末用スタイルシートを分ける手順
スタイルシートを分けることは、とても簡単です。
以下の方法で快適な制作環境を整えましょう。
スタイルシートを２つ作る
まずは、PC用とタブレット端末用のスタイルシートを作ります。
ファイル名は何でも良いですが、ここではPC用を「originalstyle.css」、タブレット端末用を「originalresponsivestyle.css」とします。
スタイルシートの内容は以下の通りです。
CSS
EC-CUBEに２つのシートを読み込ませる
「default_frame.twig」に２つのファイルを読み込ませる記述を行います。
以下の内容を記述してください。
default_frame.twig
キャッシュクリア
キャッシュクリアして、動作確認を行ってください。
