雲の向こうはいつも青空

好きな物とか琴線に触れた物とか

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

スポンサードリンク

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

これです。

f:id:shhiai:20151127173104p:plain

実際のCSSコードです。

f:id:shhiai:20151127200941p:plain


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

やり方

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

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

f:id:shhiai:20151127173412p:plain

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



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

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

f:id:shhiai:20151127184513j:plain


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

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

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

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

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

normal; →標準
bold; →太字

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

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

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

f:id:shhiai:20151127200941p:plain

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

画像の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

そらのまとめ

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

今日のテーマ

食べ過ぎに注意

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


・2015年10月30日よりブログ開始
連続更新日目です。

・2015年10月25日より1日1食を開始
1日1食を開始してから日目です。

広告を非表示にする