自作WordPressテーマ：今更ながらIEの描画チェックしてみた

2012年2月22日2013年11月26日

WordPress のテーマを半ば強引に自作して数日経ちましたが、一向に完成した感がありません。ひとまず、改修しながら更新を続けようと思っていたのですが、どうもテーマを変更する前と比べると「直帰率」が鰻登りなんですよね(；´Д｀)

これは何か決定的な理由があるのかとレイアウトを気にしたり、関連リンクを追加したり、なるべく別の記事へ誘導できるように工夫していたのですが、直帰率の上昇は一向に止まりません。

そこでふと「あんまり意味なくCSS3のbox-shadow（影）やborder-radius（角丸）使ってるし、IEにも対応しとこうかな…」と思ったその瞬間。思い出した。

IEテストしてない(　ﾟдﾟ)

やっぱり登場IETester

という訳で描画チェックにお馴染みのIETesterをMAC上にインストールしといたWindows XP にインストール。（ややこしい）

恐る恐るいざチェック！

うわああああああああぁあっぁぁぁぁぁぁぁぁっぁヽ（｀Д´）ノ

と、声が上がるほどの崩れたレイアウト。だけならまだマシだったのですが(?)、なんとエラーを吐いて強制終了させられている。

これでは確かに直帰してしまうのも無理ありません。閲覧しようがないのですから。
というわけでIEユーザーの方々、ご訪問頂いたにもかかわらずさんざんな事になってしまいまして申し訳ありませんでした。これを書いている現在はコンテンツの内容を閲覧するには問題ない程度には修正が完了しております。

まずは強制終了の原因から

一番に疑ったのはプラグイン。
一旦全部停止して、１つずつ有効化していってエラーが出るプラグインがないか探す。
現在はけっこうな数のプラグインを使用しているので少々面倒でしたが、当ブログの問題のプラグインは social bookmarking light というSNSボタンを表示するプラグイン。

このプラグインのはてなブックマークの設定をstandardにするとどうやらエラーが出るらしい。他にも色々追加していたけど最小限の構成にしたらエラーが出ることはなくなりました。

今後SNSボタンはプラグインを利用せずに個別に導入したほうがよさそうです。

IE６〜８でもCSS3効果を

CSS3で対応した要素のドロップシャドウ、や角丸はIE６〜８では対応してない為に描画できません。
ところがこの２点と要素のグラデーション程度の描画であれば外部スクリプトを読み込む事で表示が可能になります。

PIE.htcというスクリプトなのですが、cssにちょっと記述してやるだけでこれらの描画を可能にしてくれます。

https://css3pie.com/ からファイルをダウンロードし、解凍して出てきたファイルの中からPIE.htcというファイルをサーバーへアップロードします。今回はstyle.cssと同じディレクトリに配置すると仮定します。

次にcssの記述を以下のように行います。

#contents {
     	border-radius:5px;
	behavior: url("/wp-content/themes/テーマ名/PIE.htc");
}

上記はstyle.cssとPIE.htcを同一ディレクトリにおいた場合の絶対パスで指定しています。
このように behavior として PIE.htc を読み込む宣言をするだけです。

これはセレクタごとに記述する必要があるので、スタイルにcss3の機能を利用したセレクタごとに毎回この記述を与える必要があります。

コンテンツの両側にシャドウを入れる

ついでなので記述してみようと思います。
あまり優等生な方法ではないかもしれませんが、divを二重にしています。

<div id="wrap_right">
<div id="wrap_left">
      <!-- コンテンツ -->
</div>
</div>

このようなhtmlに次のようにcssを記述します。

#wrap_right {
	width:960px;
	background-color:#fff;
	-webkit-box-shadow: 3px 3px 5px 0px #777; /* Safari, Chrome用 */
	-moz-box-shadow: 3px 3px 5px 0px #777; /* Firefox用 */
	box-shadow: 3px 3px 5px 0px #777; /* CSS3 */
	behavior: url("/wp-content/themes/el-dorado/PIE.htc");
}
#wrap_left {
	width:960px;
	background-color:#fff;
	-webkit-box-shadow: -3px -3px 5px 0px #777; /* Safari, Chrome用 */
	-moz-box-shadow: -3px -3px 5px 0px #777; /* Firefox用 */
	box-shadow: -3px -3px 5px 0px #777; /* CSS3 */
	behavior: url("/wp-content/themes/el-dorado/PIE.htc");
}

要素の幅や色はどうでもいいですが、このようにそれぞれのdivに対してbox-shadowを与えています。
このように手抜き作業でシャドウを与えたかったのでPIE.htcを導入したというくだりです。