カラーミーショップにてサイト制作中(その7)ショップブログプラスのカスタマイズ

カラーミーショップにてサイト制作中(その7)ショップブログプラスのカスタマイズ

ネットショップ運営サービスの「カラーミーショップ」にて、ECサイトを制作中でしたが、ようやく納品完了となりました (^^*)

制作中に気づいた点・感じたことなどを書きます。
今回はその7回目(たぶん最終回)。

カラーミーのオプションである「ショップブログプラス」についてです。

カラーミーショップ

~ 目次 ~

  • ショップブログプラスとは?
  • ショップブログプラスはレスポンシブ非対応
  • ショップブログプラスの独自タグ
  • ショップブログプラスのテンプレート
  • スマホ版テンプレートのコード確認

ショップブログプラスとは?

カラーミーには「ショップブログプラス」というブログ機能があります。
有料オプションで月額300円(税別)。

以前は「ショップブログ」という無料のサービスが付属していたのですが、一年前に終了してしまったようです。

ショップブログ(無料版)の提供終了のお知らせ

実はこの「ショップブログプラス」は、同じGMO系列「JUGEMブログ」の有料版と同じシステムです。
名称が違うだけで中身は変わりません。

つまりショップブログプラスのカスタマイズは、JUGEMブログのカスタマイズ手法をそのまま使えば良いです。

JUGEMブログのカスタマイズに関しては以下のブログが詳しいです。

JUGEMスマホテンプレート徹底カスタマイズ講座まとめ

ショップブログプラスはレスポンシブ非対応

ショップブログプラスは、基本的にレスポンシブデザインに対応していません。

PC・スマホ・ガラケーの3つの端末用に、それぞれ別個のテンプレートを作って、それを各端末のアクセスごとに切り替える方式をとっています。

なので、端末ごとのテンプレートをカスタマイズする必要があります。
(*ガラケー版はカスタマイズ不可です)

無理矢理にレスポンシブ対応させる方法もあるようですが、

ブログ(JUGEM)のデザインをレスポンシブHTMLにしてみた。

Google先生に怒られそうなので私は使ってません (^_^;)

ショップブログプラスの独自タグ

ショップブログプラスを深くカスタマイズしようとすると、HTMLやCSS以外に独自タグを記述する必要があります。

JUGEM独自タグ一覧

実際にこれらのタグを使ってカスタマイズしてみましたが、カラーミー本体のタグに比べるとはるかに分かりやすいです。

これはカラーミー本体やWordPressなどのタグにある「ループ」や「条件分岐」という概念が無いためです。

そのため逆にカスタマイズの自由度も低くなっています。

ショップブログプラスのテンプレート

JUGEMブログは公式テンプレートが古いものばかりで、どれもこれも古くさくダサいです。

テンプレートのデザインをそのまま使うならば、格好良いユーザー作成のテンプレートを使った方が良いでしょう。

デザイン豊富なユーザー作成ブログテンプレート「utf」

私の場合は、公式の「custom04ex」というテンプレートを使って、ほぼ原型をとどめぬレベルでごっそりカスタマイズしました。

JUGEM:PC版テンプレート

「custom04ex」はJUGEMブログの最新の独自タグが盛り込まれています。

スマホ版テンプレートのコード確認

ショップブログプラスをカスタマイズする際に、非常に面倒だったことは、スマホ版テンプレートのHTMLのコードが見れないことです。

PC版の場合は、PCでブラウザを右クリックして「ソースを表示」で確認できますが、スマホだとそうはいきません。

これの解決はこちらのブログ記事を参考にされてください。

スマホサイト(スマートフォンサイト)のソース(HTML)を見る方法

 

関連記事

カラーミーショップにてサイト制作中(その6)Bootstrapの実装方法

2016.12.02

カラーミーショップにてサイト制作中(その5)ショップ運営には販促用カレンダーが便利

2016.11.28

カラーミーショップにてサイト制作中(その4)カラーミーキットとは?

2016.11.20

カラーミーショップにてサイト制作中(その3)トップと枝ページのレイアウトを変える

2016.11.14

カラーミーショップにてサイト制作中(その2)オリジナルデザインとスライドショー

2016.11.11

カラーミーショップにてサイト制作中(その1)HTMLとjQueryのバージョンに注意

2016.11.08