あとから、おまけ的に、IE7・IE8対応する方法

※趣味でやってる人はという内容です。

HTML5、CSS3対応にする

HTML5

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.min.js"></script>
<![endif]-->

上記をheadタグ内のどこでもいいのでコピペすれば、HTML5対応になるみたいです。
自サイトに置きたい人は、「html5shiv」をダウンロードして配置してください。

Wordpressの最近のテンプレートの場合は、初めから組み込んであるはずです。

CSS3

▼Respond.jsを使う方法

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

</head>の上あたりに配置するとよいみたいです。
レスポンシブで「@media」を使っている場合は、これを導入すると、IE7/IE8でも有効になります。

自サイトに配置したい人は、「Respond.js」をダウンロードして配置してください。

・Respond.jsプラグイン
WordPress › Respond.js « WordPress Plugins

Wordpressの場合は上記プラグインド導入すると簡単に配置できます。ただし、IE8/IE7だけ読み込むという処理でなくて、どのブラウザでも読み込むようになっている点は注意してください。

▼css3-mediaqueries-jsを使う方法

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Respond.jsでうまくいかない場合などは、こちらを代わりに使ってもよいかも。
Bloggerのレスポンシブデザインのテンプレートの場合は、こちらが組み込まれていることが多い気がします。

「css3-mediaqueries-js」からDLできます。

IE7,IE8の時だけ、CSSを追加する

<!--[if IE 7 ]>
<style>
/* IE7の時に適応するCSS */


</style>
<![endif]-->

<!--[if IE 8 ]>
<style>
/* IE8の時に適応するCSS */


</style>
<![endif]-->

HTMLファイルのheadタグあたりに直に書いてください。
該当のブラウザだけに適用したいCSSを追記することで、表示が変になっている個所を暫定的に修正するのに向いてるかと思います。

Wordpressのテンプレートファイルの場合は、header.phpあたりです。

IE7のdata:image（data スキーム URI）対応

data スキーム URIは、IE8以降でしかサポートされていないので、IE7の場合はどうするかですね。

■backgroundのURLで指定している場合
上記の方法で、IE7の時だけCSSを追加する形で、data:imageでない指定を追加して対応するのが簡単かと思います。

■imgのURLで指定している場合

<!--[if IE 7 ]>
<script type='text/javascript'>
$(function(){
$("img#neko_img01").attr("src","https://2.bp.blogspot.com/-gUr-Be0_fKA/Vd4Y_w9iLPI/AAAAAAAAYEc/UWeoRoy3u9o/s1600/neko5_20130409_min.png");
});
</script>
<![endif]-->

jQueryを使用して、上記のように、imgのsrc属性を書き換えてしまうのも一つの対応方法かと思います。

表示確認の仕方

■IE Testerを使う方法
・IETesterで表示確認をしてみる 【IE5.5,IE6,IE7,IE8,IE9】

■IEの開発モード（F12）を使う方法
・IE9やIE10環境でIE6/IE7/IE8/IE9表示する方法(共存）
・IE11で、IE7/IE8/IE9/IE10をエミュレーションで表示確認するときの注意事項

IE9/IE10がパソコンに入っているんなら、それで確認するのが一番簡単で再現性も良いと思います。