レスポンシブWEBデザイン導入顛末記
別ブログから申請中の画像用テンプレートにレスポンシブWebデザインを導入してみました。
画像テンプレにかかりっきりで、すっかり御無沙汰してしまったこちらのブログの保守(広告削除)兼、備忘録として、導入までのアレコレをこちらに記します。
レスポンシブWEBデザインとは、CSS3のメディアクエリを使用して見た目を変更するWeb ページの構築手法です。
それだけじゃわからな～いという方は
レスポンシブWEBデザイン導入前 と 導入後 のテンプレートのサンプル をご覧あれ
レスポンシブWEBデザイン導入前
サンプルレスポンシブWEBデザイン導入後
サンプル解析度(画面サイズ)1024px以上の場合は、どちらも同じように見えます。
しかし、画面横幅を1024px以下に狭めていくと、レスポンシブWebデザイン導入後のサンプルは、画面サイズによってサムネイル画像のグリッドサイズも変動し、レイアウトも変わっていきます。
このように、パソコンやタブレット、スマホなど、閲覧端末の画面サイズに合わせて、サイトデザインレイアウトが変わるのがレスポンシブWebデザインです。
ワンソース、マルチデバイス対応可能。つまりスタイルシートをパソコン用やタブレット用、スマホ用と端末別に作成しておけば、HTMLは同じものが使えるという、WEBサイトを構築する上では、かなりエコで便利な代物。
しかし、拙作テンプレの場合、元々リキッドレイアウトだし、投稿画像に関しても、閲覧サイズに合わせて可変するように指定してあるし、何より、FC2ブログの場合、パソコンからの閲覧はパソコン用テンプレート、スマホからの閲覧はスマホ用テンプレートに振り分けられて表示されるので、あまり関係ない…と思っていたのですが、そうも言っていられなくなりました。
現状では、閲覧端末を判別して、アクセス先が自動的に振り分けられるのは、アクセス先のアドレスに、?pc &pc ?sp &sp ?m &m などのクエリのついていない場合に限られます。
しかし、検索エンジンの検索結果によっては、url末尾に &pc ?pc がついたパソコン用アドレスや?sp &sp がついたスマホ用アドレスでヒットすることがあります。
それらをクリックすると、閲覧端末に関係なく、パソコン用アドレスはパソコン版テンプレート、スマホ用アドレスはスマホ版テンプレートで表示されてしまうのです。
また、タブレットからアクセスした場合、アクセス先に端末別のクエリがついていなければ最初はパソコン版テンプレートで表示されますが、端末別のアドレスと一致していないと認識されるのか、画面上にスマホ版テンプレートへのリンクボタンがどーんと表示されます。
昨今のタブレットの普及率は著しく、私の周囲でも、インターネットはパソコンは止めて、タブレットにしたという人間が徐々に増えていますので、これもちょっと考えなきゃいけなそうです。
というわけで、ものは試しと、画像テンプレの方に、レスポンシブWebデザインを導入してみました。
これがうまくいったら、徐々に、小説用テンプレにも導入していく予定です。
では、ここからが本題です。
FC2ブログテンプレートにIE8以下でもレスポンシブWEBデザインを適用させる
単純にレスポンシブWEBデザインを適用させるだけなら、メディアクエリの指定を追加するだけですので、さほど難しくありません。
fc2ブログの場合スタイルシート編集部分に以下のようにメディアクエリの指定を記述すればOKです。
/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
画面の横幅が768pxまでの場合のスタイル記入
}
/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
画面の横幅が320pxまでの場合のスタイル記入
}
IE9以上および、モダンブラウザはこれだけでOKです。
但し、IE8以下は、ダメです。
CSS3未対応のIE8以下に、どうやってレスポンシブWebデザインを実装させるか、管理人にとっては、これがとんでもない難問でした。
以下は、参照させていただいたサイト様の記事
IE用にcss3-mediaqueries.jsを実装させる【レスポンシブOK】私はこれでhtml5とcss3をie８以下に対応させました。IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法レスポンシブWebデザインをIEに対応させる方法【CSS3】メディアクエリをIE7、IE8でも使えるようにするレスポンシブwebデザインに関する自分用メモMedia QueriesがIE8で効かない場合の対処法css3-mediaqueries.jsが効かなくて困った時のまとめIE8以下にレスポンシブWebデザインを実装させるには、IE8以下にcss3(メディアクエリ)を適用させるためのスクリプトが不可欠なようで、以下の二つのうち、いずれかを装着する必用があるようです。
Respond.js
css3-mediaqueries.js
両方試したが、動かない。
調べてみると、Respond.js は属性セレクタが無効になる事が判明。
■respond.js
Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。
非常に軽量でサクサク動き、にわかに本命的な扱いをされてる気がするものですが、
2012年6月時点で「属性セレクタの記述をすると無効になる」という痛いバグがあります。
css3-mediaqueries.jsが効かなくて困った時のまとめ＿とあるコーダーの備忘録
となると、属性セレクタがあふれまくっている拙作では使えないため、css3-mediaqueries.js 一本に絞って再トライ。
以下をhead内に追加
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
<![endif]-->
まだ、動かない。
css3-mediaqueries.js は、中々取扱が難しいスクリプトな様で、様々な条件化で無効になるらしい。
メディアクエリの指定方法は、通常のメディア属性の指定と同様に
・link要素のmedia属性で指定
・@import規則で指定
・@media規則で指定
のいずれでも指定可能なのですが、
css3-mediaqueries.jsを使う場合は@media規則で指定しないと効きません。
css3-mediaqueries.jsが効かなくて困った時のまとめ＿とあるコーダーの備忘録
特殊な条件が揃うと無効になることがある。
１．@mediaの記述だけを別ファイルにする
２．@media記述より前に@charset記述を書く
３．@mediaの記述以外の通常のCSSルールは書かない
上記全てが揃うと、100%無効になります。
普通のCSSの中にメディアクエリの記述を混ぜる場合には全く問題ないのですが、
管理しやすくしようとメディアクエリの記述のみを単独で別ファイルにした場合にハマる危険があります。
css3-mediaqueries.jsが効かなくて困った時のまとめ＿とあるコーダーの備忘録
色々試してみた結果、拙作テンプレの場合は、
外部ファイルである【スタイルシート編集】内の
『普通のCSSの中にメディアクエリの記述を混ぜる場合』でもダメだったため、
head内で 直接スタイル指定したところようやく動いた！
外部ファイルではなく、head要素内にstyle要素を配置して、その中にメディアクエリの設定内容を記述
<style type="text/css"><!--
/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
画面の横幅が768pxまでの場合のスタイル記入
}
/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
画面の横幅が320pxまでの場合のスタイル記入
}
--></style>
まとめ
属性セレクタをつかっている(拙作テンプレの)場合 Respond.js ではなく css3-mediaqueries.js を装着する。
FC2ブログテンプレートの場合、メディアクエリの指定は、外部CSS(スタイルシート編集部分)ではなく、全て(HTML編集部分)head要素内にstyle要素を配置して記述する。
ドキュメント宣言をいつまでたっても理解できない管理人は、当初、参照サイト等で上のスクリプトと共に紹介されていた html5shiv もホイホイDLして装着していましたが、これもNGの一因でした…(^^ゞ
2013.09.24 （Tue）
- 関連記事
-
▼ Comment List(3)
カスタマイズの難易度２
カスタマイズの難易度５
がついた列の
どうもありがとうございました。
新しいテンプレートも、多少は重いのですが、以前のようにフリーズすることはなくなりました。とてもうれしいです。
以下は、カスタマイズをした感想です。
全記事一覧のカスタマイズは、前回（一年前に）終えていますので、そのテンプレートを使ってカスタマイズしてみました。そういうわけで、必ずしも記事内の説明通りのカスタマイズとは言えなかったわけですが・・・。
旧テンプレートで目次があらかじめ完成している場合は、サブテンプレートに目次のソースを貼り付ける時点で、メインテンプレート（というか、旧テンプレート）のｈｔｍｌをメモ帳にコピペしておくべきだったとあとで気がつきました。
とにかく、メインテンプレートは重たいので、そこから目次部分を取り出してコピーするだけで時間がかかりすぎます。最終的にメインテンプレートで目次のソースが必要ないのだから、メモ帳からその部分を切り取ってしまった方が一石二鳥だったようです。（途中で気づかないでよ・・・ですが。）
あと、カウンターを貼り付ける場所がよくわからなかったのですが（説明がなかったので）、あの位置でよかったでしょうか？
お忙しいところ、「目次を別テンプレートにしてください」という贅沢な注文にこたえていただき、本当にありがとうございました。