カラーミーショプ用のテンプレート「SEO+ Basic」を2.1.1にマイナーアップデートしました。

アップデート内容は、これまで新規にCSSを追加して設定してレイアウトしていた部分をほぼ全てカラーミーショップが提供しているグリッドレイアウトに変更した点です。

これにより、html側の操作だけでレイアウト編集可能になったので、オリジナルにカスタマイズする際など以前よりも楽になると期待されます。

カラーミー独自のグリッドレイアウトについて

カラーミーのグリッドレイアウトは、対象箇所を「class=”row”」で囲み、col-xs( ,-sm ,-md, -lg )-n(1〜12)」でサイズを決めるもので、Bootstrapと手順は同じです(bootstrapバージョン2相当です)。

違うのはブレイクポイントで、カラーミーグリッドシステムのブレイクポイントは下表の通りです。

想定デバイス対応クラスモニターサイズ
デスクトップcol-lg-980px以上
タブレット/PCcol-md-768px以上 980px未満
スマホ/タブレットcol-sm-481px以上 768px未満
スマホcol-xs-480px未満
カラーミーキットのグリッドレイアウト

また、カラーミーグリッドレイアウトはfloatによる横並びとなっていますが、SEO+ではflex利用に変更しています。

SEO+におけるグリッドレイアウト対象箇所

1・商品の一覧がリスト表示される箇所

  • トップページの「おすすめ」「売れ筋」商品。
  • 「お気に入り商品」のリスト。
  • 「カテゴリー」など商品一覧のリスト。
  • 「検索結果」の一覧。
  • 「閲覧履歴」の一覧。

上記に加えて、フッタ−のプライバシーポリシー、特商法リンクなどが並ぶ部分。

これらは全て< ul class=”row” >の形としています。
< li >に「col-」形式でクラス名をつけることでレイアウトを決定します。

2・商品詳細ページのレイアウト

ページ上部の、商品画像と商品情報が併記されるform部分。

ページ下部の詳細説明文とサイドバーが並ぶ部分(PC表示のみ)。この2箇所が対象です。

< ul >ではない class=”row”部分 には justify-content:space-aroundが指定されているので、col- の値が12未満の場合は等間隔でスペースが入ります。

カラーミーのグリッドレイアウトについては「カラーミーキットのグリッドレイアウト」の記事で詳しく説明していますのでご参照ください。

カラーミーショップのカスタマイズも承っています。

テンプレートの購入ではなく、個別のカスタマイズ案件も承っております。

商品が登録済みでありテンプレートのみの編集となりますが、ご興味がございましたらお問合わせよりご連絡ください。

カテゴリー: カラーミーSEO+

ミフネWEB@神戸

ホームページやネットショップの新規制作、古いページのリニューアル(サイト改修)から、テンプレートカスタマイズまで承っています。 神戸を中心に活動していますが、オンライン(Tel、メール、チャットサービスなど)を通じての打ち合わせで問題なければ地域を問わず承ります。