DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

テンプレートを書き変えてみた

個人的に尊敬するWebデザイナー 一望 様 のブログ
Google「モバイル フレンドリー アップデート」を開始
を拝見していて、
モバイルフレンドリーテスト
https://www.google.com/webmasters/tools/mobile-friendly/

なるものを知りました。

ちょっとこのブログも見てみるよ。
↓モバイルフレンドリーではありません
やっぱり(^^;)
fc2はモバイル版テンプレがあるから、何にも考慮せずに
書いたからさぁー。←と、言い訳してみる。

・・・・・そんなわけで、ちょっとテンプレートを書き変えてみました。
やる気ないレイアウトになりましたけど、試し書きということで(^^;)
とりあえずは×印がなくなって、よかったです。

f2のテンプレートは、1枚ものなので(CSSを複数読み込むとかはできない。
HTMLにじかに書いてしまえば良いんだけど、それすると管理画面から修正できないので)
↓管理画面のCSSには、以下のように書いてみました。
@media screen and (min-width: 769px) {
/*  画面の幅 769px以上 に適応   */
/*  PC用のCSSをこの中に書く  */
}

@media screen and (max-width: 768px) {
/*  画面の幅 768pxまで に適応  */
/*  タブレット用のCSSをこの中に書く  */
}

@media screen and (max-width: 620px) {
/*  画面の幅 620pxまで に適応  */
/*  スマホ用のCSSをこの中に書く  */
}
関連記事

コメント

非公開コメント

※宣伝目的のようなコメントが時々あることから、コメントを承認方式に変更しました。
アダルトサイト・販売目的のサイトに誘導するもの、宣伝目的のもの、
わいせつもしくは公序良俗に反するもの、
また誤解を招くようなコメントは、削除させていただきます。

トラックバック

レスポンシブデザインの可能性と限界

やはり、というか・・これも必然?Google先生が先月行った「モバイル フレンドリー アップデート」の波及効果もあって、デザインの改変・改修を実施してるWebサイトが増えつつあるよな気配です。本体のページごとすべてレスポンシブデザインで設計し直してリニューアルしてしまうサイトもあれば、旧来の方法で、PC用はそのままで、モバイル用に別に設計したページを用意して、UA(User Agent)を判...

2015年05月06日 22:51from [Bad Tongue Q]

http://memo352.blog119.fc2.com/tb.php/680-5cf5942d