レスポンシブ対応しないサイトの制作
PC版のみのサイト制作をする場合は少しテンプレの変更が必要です。
CSS・メディアクエリの変更
grid_system.css
「@media」で囲われた記述をごっそり消します。
page_style.css
「@media」で囲われた記述をごっそり消します。
common.css
「table風 レスポンシブリスト」の@media (min-width: 768px) ｛・・・｝の中身は残して、メディアクエリ記述だけを消します。
そのほかの「@media」で囲われた記述をごっそり消します。
そのほかの「@media」で囲われた記述をごっそり消します。
新lightbox（magnific-popup）は使えないのでcolorboxを使う
magnific-popupを使うとスマートフォンで見た時に表示がおかしくなってしまいます。
lightboxコンテンツを作りたい場合、過去のテンプレートで使っていたcolorboxを使います。
・colorboxのソース
lightboxコンテンツを作りたい場合、過去のテンプレートで使っていたcolorboxを使います。
・colorboxのソース
スマートフォンの文字サイズ自動調整を無効にする
common.cssのbodyに-webkit-text-size-adjust: 100%;を記述します。
※文字サイズの自動調整を無効にすることは、スマートフォンでアクセスしたユーザーにとって文字が小さすぎると判定されるのでSEOにはよくない可能性があります。
※文字サイズの自動調整を無効にすることは、スマートフォンでアクセスしたユーザーにとって文字が小さすぎると判定されるのでSEOにはよくない可能性があります。
グリッドシステムを使う場合はすべてcol-xs-●●で
col-xs-●●で指定すれば全てのウィンドウサイズに適用されるのでグリッドシステムを使うことも可能です。
※ms,md,lgは上記「CSS・メディアクエリの変更」でCSSから消去しているので書いても効果がありません。
※ms,md,lgは上記「CSS・メディアクエリの変更」でCSSから消去しているので書いても効果がありません。
テンプレートの固定コンテンツ（新着情報やカートなど）はclass名を書き換えないといけないので注意