画像入りの見出しにしたかったので少しカスタマイズしてみた

 見出に画像を入れたい


見出しはH4タグを使用しています。
H4タグを使っている理由は、ホワイトプレスの場合、

H1~H3は同じでアンダーラインが2px
H4はアンダーラインが1pxとCSSで設定されています。
それをそのまま利用したというだけです(汗

ホワイトプレスを何もカスタマイズしない場合は下のように表示されます。
(頭に1文字分スペースを入れています)

midashi_1

まず、見出しにしたい画像をアップロードします。
アップロードした画像のURLをコピーします。

midashi_4

画像をアップロードした直後にURLをコピーすると
http://livedoor.blogcms.jp/blog/hasagraphy/file/image/
となることがありますので、その時は画像/ファイルのページを
更新してください。

H1~H4のCSSです。
midashi_2

H4のCSSところに下の2行を追加します。

    background-image: url(“画像のURL”); /* 画像の指定 */
    background-repeat: no-repeat; /* 画像の並び */

midashi_3

これで画像付きの見出しの設定が完了です。
画像のサイズはは30×30px~32×32pxがちょうど良いと思います。
midashi_5

スラスラわかるHTML & CSSのきほん / 狩野祐東 【単行本】
スラスラわかるHTML & CSSのきほん / 狩野祐東 【単行本】

スポンサーリンク

シェアする

フォローする

スポンサーリンク