TweetPocketEC-CUBEに実装されているColorboxをカスタマイズする方法を紹介します。ColorboxはjQueryプラグインで画像をクリックすると拡大画像が表示されるもの。EC-CUBEのデフォルトでは単純に拡大画像の表示のみですが、Colorboxでは他にも様々なスタイルが用意されています。このページでは、Colorboxに用意された様々なスタイルをEC-CUBEに実装してみる方法を紹介します。EC-CUBE2.13のColorboxをカスタマイズしてみる現在、最新版ではEC-CUBE3が公開されていますが、ここでは安定板の2.13を使ってColorboxを追加してみます。ColorboxのリソースまとめColorboxのカスタマイズについては、開発者さんのページが参考になります。ビギナーズガイドでコードの書き方のチェックや、デモページで実際の動作を確認できるので参考にしてみて下さい。デモページはダウンロードファイル内にもあるのでここからチェックすることもできます。日本語ページEC-CUBEのColorboxバージョンをチェックEC-CUBE2.13で使用されているColorboxのバージョンはv1.4.27となっています。1.6.3(2015/07/27)。基本的にはデフォルトのバージョンで問題ないと思うのですが、バグ修正されている最新版を使いたい場合は以下のリンクからダウンロード可能です。GithubページColorboxのファイルは、html->js->jquery.colorboxフォルダにあるのでダウンンロードしたjsファイルはここにいれればOK。デフォルトのColorboxの設定を確認するEC-CUBEのColorboxはeccube.jsで設定されています。場所は、html->jsフォルダ。このファイルの一番下を見ると以下のようにすごくシンプルに設定されているのが分かります。$(&#039;a.expansion&#039;).colorbox();}設定はこのファイルに書いてもいいんですが、どうしてもファイルをいじりたくない場合はテンプレートのpackage内にjsファイルを作ってください。この場合、テンプレートファイルのheadタグ内に追加したjsファイルを読み込む必要があるのでご注意を。class名が被ると正しく動作しない可能性があるので、デフォルトのclass名(.expansion)以外を使うことをおすすめします。テンプレート側もclass名変えておきましょう。Colorboxの設定を変えてみるダウンロードファイルのexample1~5のindex.htmlをブラウザで開くとデモページを見ることができます。表示方法はElastic、Fade、Slideshowなど様々なスタイルが用意されてます。headタグ内のjavascriptを見れば分かるように、コードは非常にシンプル。トランジションをフェードに変えたいなら、eccube.jsの設定を以下のように変更するだけでOKです。transition:&quot;fade&quot;});}上記のようにcolorbox()の部分をデモページのコードに置き換えるだけで変更可能。見た目を変えたい場合は、exampleフォルダの、colorbox.cssをEC-CUBE側のものと置き換えるだけです。CSSファイルを置き換えるとこんな感じで簡単にスタイルを変更できるのが便利ですね。ファイル置き換えだけだと正しく表示できない場合があるので、そこは各自でスタイルを修正してください。今回はEC-CUBEのColorboxをカスタマイズしてみました。こちらのショップではEC-CUBE向けのテンプレートを販売中です。SugimoriBootstrapやCMSを使ったテンプレートの作成やカスタマイズ、既存サイトのレスポンシブ化など、多くの案件でフロントエンドを担当。現在はテンプレートエンジニアとしてTetraThemesでテンプレートを開発中。最近ブログの記事はMarkdownで書いているのですが、ふと思ったのが、Markdownで書いたブログ記事ってSEO的に大丈夫なの?ってことです。前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。一度間違ってないか確認しておきましょう。simple2はEC-CUBE2.13系に対応したレスポンシブテンプレートです。画像スライダーにはFlexSliderを採用、Bootstrap3に対応しているため高品質なECサイトを低コストで制作可能です。MinimalCubeはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。minimal1はEC-CUBE2.13系に対応したレスポンシブテンプレートです。画像スライダーにはFlexSliderを採用、Bootstrap3に対応しているため高品質なECサイトを低コストで制作可能です。COLORMARTはカラーミーショップに対応したレスポンシブテンプレート。Bootstrapを導入しカスタマイズしやすいコードとモダンなデザインを実現。2カラム、3カラム両対応でレイアウトも自由に行えます。WhiteCubeはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。TetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。お知らせ【お知らせ】サイトを移行しました。{td_theme_css.after(splited_css);}}});}})();。