タイトルの見出しに画像を設定できるようになりました
私は普段、Google chrome を標準のブラウザとして利用しています。
今回はこのことが仇となり、ブログのタイトル見出しに画像とテキストを
思い通りの位置で配置できませんでした。
このブログのタイトル見出しには、テキストの前後に雪の結晶の画像を挿入しています。
画像の真ん中にテキストが配置されるように、CSSで
/* h3の画像 */
div.POST_HEAD h3:before,
div.POST_HEAD h3:after{
content:url("http://pds.exblog.jp/pds/1/201312/12/35/kesshou.gif");
vertical-align:middle;
padding:0px 5px;
}
など、色々試したのですが配置は全く変わりませんでした。
(画像に続くテキストが、下揃えのまま変わらないのです)
そこで、IE10で全く同じ設定を試みたところ、何の問題もなくできました。
ただ、 middle の部分を、フォントサイズの関係などから、以下の通り変更しました。
vertical-align:-5px;
chrome や、ほかのブラウザでも確認しましたが、今のところ問題ないようです。
めでたし、めでたし。
2013/12/23 追記
IE8以前のバージョンでは、雪の結晶の画像を見ることができません。
今回はこのことが仇となり、ブログのタイトル見出しに画像とテキストを
思い通りの位置で配置できませんでした。
このブログのタイトル見出しには、テキストの前後に雪の結晶の画像を挿入しています。
画像の真ん中にテキストが配置されるように、CSSで
/* h3の画像 */
div.POST_HEAD h3:before,
div.POST_HEAD h3:after{
content:url("http://pds.exblog.jp/pds/1/201312/12/35/kesshou.gif");
vertical-align:middle;
padding:0px 5px;
}
など、色々試したのですが配置は全く変わりませんでした。
(画像に続くテキストが、下揃えのまま変わらないのです)
そこで、IE10で全く同じ設定を試みたところ、何の問題もなくできました。
ただ、 middle の部分を、フォントサイズの関係などから、以下の通り変更しました。
vertical-align:-5px;
chrome や、ほかのブラウザでも確認しましたが、今のところ問題ないようです。
めでたし、めでたし。
2013/12/23 追記
IE8以前のバージョンでは、雪の結晶の画像を見ることができません。
by rk2490
| 2013-12-18 21:00
| パソコン