EC-CUBE3.0で自作したスタイルシートでオリジナルデザインを適用する方法サーバー、WordPress、EC-CUBEなどWEB全般の疑問を解決するブログ。トップページWordPressWEBデザインWEBプログラミングサイト運営・活用トップページWordPressWEBデザインWEBプログラミングサイト運営・活用ホームEC-CUBEEC-CUBE3.0で自作したスタイルシートでオリジナルデザインを適用する方法シェアTweetGoogle+FeedlyEC-CUBEEC-CUBE3.0で自作したスタイルシートでオリジナルデザインを適用する方法2017年4月12日EC-CUBEは、無料で公開されているネットショップ構築専用のCMSです。その中でも、EC-CUBE3.0は、2015年7月にリリースされた新しいバージョンで、今までよりさらにパワーアップしたデザイン性、機能性を兼ね備えています。リリースされたばかりなので、現在はまだカスタマイズに関する記事が少なく、自分でプログラムを読める方出ないとカスタマイズが難しいという点があります。ここでは、EC-CUBE3.0でオリジナルデザインをスタイルシートに適用させる方法について見ていきましょう。キャッシュクリアEC-CUBE3.0でオリジナルデザインを適用させる方法EC-CUBE3.0でオリジナルデザインをスタイルシートに適用させる場合、既存のスタイルシートを編集することができません。やってオリジナルデザインを適用させるかと言うと、「新しいスタイルシートを登録する」ことでデザインを適用させることができます。新しいスタイルシートを登録するための詳しい手順は以下の通りです。FTPでサーバーにアクセスするまずは、FTPクライアントソフト等を使って、EC-CUBE3.0で適用されるスタイルシート群があるディレクトリにアクセスします。「FTPクライアントって何?」という方は以下のページを参考にしてください。「FileZilla」を使ってサーバーに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.twigdefault_frame.twigTwigのキャッシュをクリアにするEC-CUBE3.0では、Twigファイルを編集した際にはTwigのキャッシュクリアが必要になります。これを行わないうちは、情報が反映されませんのでご注意ください。EC-CUBEの管理画面にアクセスし、「コンテンツ管理」→「キャッシュ管理」のページを表示します。「twig」のチェックボックスにチェックが入っていることを確認し、「キャッシュクリア」ボタンをクリックしましょう。ちなみに、FTPからキャッシュクリアを行うことも可能です。その場合、以下のディレクトリにアクセスし、内部のキャッシュファイルを全て削除してください。以上の手順で、新しく作ったオリジナルスタイルシートの適用が完了しています。サイトを表示して、スタイルシートに記述した内容が反映されているかどうかを確認しましょう。【応用編】PC用スタイルシートとタブレット端末用スタイルシートを分けて作る方法モバイルフレンドリーはWEBサイト構築において必須と言える重要な項目となっています。制作側としては1つのスタイルシートに長々とPC用、タブレット用のスタイルシートが記載されていると、非常にややこしいという悩みがあります。慣れないうちは、PC版のデザインタグを修正したつもりがデザインが反映されない!・・・と思ったらタブレット用記述のデザインタグの方を修正してしまっていた!ということもあります。PC用スタイルシートとタブレット端末用のスタイルシートは分けてしまうことで、その煩わしさから解放されます。分けることで、製作者は単純にPC版のデザイン修正がしたい時はPC版のスタイルシートを、タブレット端末用の編集時にはタブレット端末用のスタイルシートを参照すれば良いので非常にシンプルでわかりやすくなりますPC用スタイルシートとタブレット端末用スタイルシートを分ける手順スタイルシートを分けることは、とても簡単です。以下の方法で快適な制作環境を整えましょう。スタイルシートを2つ作るまずは、PC用とタブレット端末用のスタイルシートを作ります。ファイル名は何でも良いですが、ここではPC用を「originalstyle.css」、タブレット端末用を「originalresponsivestyle.css」とします。スタイルシートの内容は以下の通りです。CSSEC-CUBEに2つのシートを読み込ませる「default_frame.twig」に2つのファイルを読み込ませる記述を行います。以下の内容を記述してください。default_frame.twigキャッシュクリアキャッシュクリアして、動作確認を行ってください。EC-CUBEの関連記事EC-CUBE3.0で自作したスタイルシートでオリジナルデザインを適用する方法2017年4月12日DreamweaverでTwigファイルを編集可能にするための全手順2017年4月11日DreamweaverでTwigファイルを編集可能にするための全手順WordPressテーマファイルで子テーマを作る方法おすすめの記事WordPress機能カスタマイズカスタムタクソノミーのターム一覧を自動取得する方法WordPressでカスタムタクソノミーを作成した場合、ターム一覧を表示したいことがあります。いうことがあげられます。feedを使った取得が便利です。RSSでの取得の場合、表示でき...cssSafariでソースコードや開発用ツールを表示する方法MacOSやiPhoneをお使いの方は、標準ブラウザとしてSafariを使うことが多いでしょう。Safariを使って自分のサイトをカスタ...EC-CUBEDreamweaverでTwigファイルを編集可能にするための全手順Twigとは、機能性と処理の速さを兼ね備えたPHPのテンプレートエンジンです。EC-CUBEでは、従来テンプレートエンジンとしてSma...javascript・jQuery「LightBox2」で画像をポップアップ表示するための3ステップ上のキャプチャのように、画像をエフェクト付きのポップアップで表示したい時、「」という既存のjQueryプラグインを活用するのが最適です。カスタム投稿タイプやカスタムタクソノミーを簡単に作ることができます。いった処理の振り分けをしたいことがあります。ここでは、を見ていきましょう。