カラーミーテンプレートSEO+マイナーアップデートしました

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

 

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

 

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

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

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

 

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

想定デバイス 対応クラス モニターサイズ
デスクトップ col-lg- 980px以上
タブレット/PC col-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未満の場合は等間隔でスペースが入ります。

 

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

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

かなり以前にココナラに登録したっきり放置していたのですが、せっかくなので活用しようと「カラーミーショップのカスタマイズ」を出品しました。

とりあえず初回サービスで3万円です(5件まで)。

 

ココナラで「見積もりのお問い合わせ」も出せるようなので、ご興味ありましたらお尋ねください。

カラーミー テンプレート「SEO+」

SEOテンプレート

5,390円(税込)50%オフ:4月末まで

  • SEO基本設定済み
  • サイト回遊性の改善
  • 表示速度の改善
  • トップページにスライド配置
  • 商品画像はスライド切替
  • 商品ブックマーク機能
  • リッチスニペット対応
  • ご注文後は何度でも最新版が無償

SEO+はカラーミーショップ専用のテンプレートです

カスタマイズマニュアル「カラーミーSEO+カスタマイズ

カラーミーショップの集客強化カスタマイズを承ります。| SEOの強化・表示速度改善・レスポンシブ化など

2020年2月20日カラーミーbootstrap, seo対策, テンプレート

Posted by abetaka