読者です 読者をやめる 読者になる 読者になる

すけこむブログ

カメラが好きな都内在住31歳男性の写真ブログ。ニコンD810を愛用。2歳児の子育てにも奮闘中。

はてなブログの見出しをオリジナル画像でカスタマイズしてみる

ブログカスタマイズ

はてなブログの見出しをオリジナル画像でカスタマイズしてみる すけこむブログ

ちまちまとはてなブログのカスタマイズを進めています。

今回ははてなブログの見出しを味気のあるデザインにしようと思い、オリジナルの画像を作成し、h3とh4のCSSをいじってみました。簡単に手順をまとめておきます。

見出し用の画像にカメラのイラストを描いてみる

はてなブログの見出しをオリジナル画像でカスタマイズしてみる すけこむブログ

我が愛機、D600を見ながら、イラストレーターでそれっぽいシルエットになるようイラストを描いてみました。シャッターボタンだったり、モードダイヤルだったり、それなりに雰囲気は出せたかなー・・・と思っておりますがいかがでしょうか。

Nikonのエンブレムなどを入れることも考えたのですが、見出しに使うサイズに縮小すると、ほぼ見えなくなるのでやめておきました。

完成した見出し用の画像がこちら

フォントの大きさとのバランスを考えて、ここまで縮小させました。やっぱりNikonのエンブレムはなくてよかったですね。

はてなブログの見出しをオリジナル画像でカスタマイズしてみる すけこむブログ

力作のシャッターボタンやモードダイヤルも、小さすぎてほとんど見えませんね。。でもよしとしましょう。

CSSを調整して完成

見出し用の画像をはてなのフォトライフにアップロードしたら、デザインCSSに以下のCSSを書き込んで完成です。

.entry-content h3 {
background:url(********.gif) no-repeat left center;
padding: 10px 0px 5px 47px;
font-weight: bold;
border-bottom: 1px solid #dddddd; }

.entry-content h4 {
font-size: 125%;
font-weight: bold;
border-left: 10px solid #ff3399;
border-bottom: 0px;
padding: 3px 0px 1px 10px; }

h4には画像を使用していませんが、デザインを整えるために、もともとのCSSから少しデザインを変更してみました。

画像のURLは***としていますが、フォトライフにアップロードした際のURLを入力すれば完成です。

デザインのカスタマイズに終わりはない・・・

ちょこちょこ進めているブログデザインのカスタマイズですが、まだまだやりたいことが沢山あります。今回のカスタマイズはこちらの記事を参考にさせていただきました。

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania
はてなブログに実施した、4つのデザインカスタマイズ - Banguardサイトはてなブログに実施した、4つのデザインカスタマイズ - Banguardサイト

私はコーディング専門ではないので、すてきなデザインのブログを拝見しながら、時間のある時にちまちまと進めていこうと思います。