AX
カスタマイズの備忘録
IE8以下もレスポンシブWebデザインを適用させる方法 FC2ブログテンプレートの場合
⇒目次[5]

レスポンシブ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をie8以下に対応させました。
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が効かなくて困った時のまとめ_とあるコーダーの備忘録



特殊な条件が揃うと無効になることがある。
1.@mediaの記述だけを別ファイルにする
2.@media記述より前に@charset記述を書く
3.@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)

次ページ は
⇒ 目次 [5] から

申し訳ありません<(_ _)>
一旦[目次]へ戻らないと
ペーシ移動できません

2013/09/24 

[6] コメントを書く
[7] コメントを読む (3)
[8] トラックバック (0)
menu
ログイン
友達に教える