はてなブログで見出しの先頭にイラストを付ける方法

このブログでは小見出し（h5）の先頭におサルのイラストを付けています。

これです。

実際のCSSコードです。

このイラストを６０×６０ピクセルに小さくした物を利用してます。

やり方

使用したいイラストを写真加工ソフトなどで３０☓３０ピクセルにします。

大きさはご自身のブログのデザインに合わせて調整して下さい。

このイラストを、はてなフォトライフにアップロードします。

アップロード出来たら画像の上でマウスを右クリックして画像のURLをコピーします。

僕はMacなのでWindowsでも同じ画面が出るか分かりません (^_^;)

コピーしたURLをbackground:urlのところにコピーします。

赤字部分が画像のURLです。

.entry-content で見出しの種類を指定します。

小見出し→h5
中見出し→h4
大見出し→h3

font-weight: は見出し文字の種類を指定します。

normal; →標準
bold; →太字

border-bottom: は線の種類やカラーを指定します。

solid→1本線
double→2本線
dashed→破線
dotted→点線

#dddddd を変更すると他の色を指定出来ます。

このコードをコピペして使います。

画像のURLのところに実際に使う画像のURLを指定して下さい。

.entry-content h5 {
background:url(画像のURL) no-repeat left center;
padding: 10px 0px 5px 47px;
font-weight: bold;
border-bottom: 1px solid #dddddd; }

コピー先はダッシュボード>デザイン>カスタマイズ>デザインCSSです。

レスポンシブデザインを使ってる場合はこれだけでいいですが使ってない場合はスマホのデザインにもコピーします。

ダッシュボード>デザイン>スマホ画面>ヘッダ>タイトル下です。

参考にしたサイト

yukihyさんのブログ記事ではコピペ一発で見出しデザインを変更する方法が分かりやすく説明してあります。

www.yukihy.com

そらのまとめ

イラスト付きの見出しはちょっとしたアクセントになります。イラストが大きすぎたり多用すると読み込みに時間がかかってしまうので要注意です。

今日のテーマ

食べ過ぎに注意

最近、間食と夕食の食べ過ぎで胃がもたれてるので気をつけなければ。

---

・２０１５年１０月３０日よりブログ開始
連続更新日目です。

・２０１５年１０月２５日より１日１食を開始
１日１食を開始してから日目です。