SEO+テンプレートはシンプルな構成です。

上から順番に

  • Header
  • Nav
  • Article
  • (Section:レビュー)
  • (Aside:関連商品)
  • Aside:閲覧履歴
  • Footer

と並んでいるだけです。(カッコ内は商品詳細ページのみ)

各要素の中はflexで配置しているので、ウィンドウサイズに合わせて 自動で伸縮、または段組みします。

商品詳細ページのみサイドバー(Aside)が表示されるようになっています(*PC表示のみ)が、 不要なら削除しても良いかと思います。

レイアウトはカラーミーGrid + flexbox

ページレイアウトや、商品一覧のようなリスト表示は全てカラーミー独自のGridシステムを流用し、flexで再定義しているので、クラス名「col-」を書き換えることでレイアウトを変更することができます。

カラーミーGridシステムの詳細や変更法については「カラーミーキットのグリッドレイアウト」をご参照ください。 少しだけ違いますがBootstrap v2のレイアウトとほとんど同じです。

ブレイクポイントについて

SEO+テンプレートは、ブラウザのウィンドウサイズによって表示を変えるレスポンシブデザインです。
 

【SEO+の基本ブレイクポイント】

PC     ・・981px以上

タブレット ・・601px以上 980px以下

スマホ   ・・600px以下

先述のGridシステムについては、カラーミー共通のCSSに従うことになるため以下のような分け方となります。

xs(x-small :480px以下:スマホ端末)
sm(small :768px以下:スマホ~タブレット)
md(medium :980px以下:タブレット~デスクトップ)
lg(large :全てのデバイスサイズに適用)

初期状態のSEO+テンプレートでは、col-md- は使用していないので、 -xs- -sm- -lg- のみでレイアウト決めしています。

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

ミフネWEB@神戸

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

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA