パソコン日記

気づいたこと まとめてみる

はてなブログの見出しを少しだけかっこよくする

はてなブログのデザイン

はてなブログのデフォルトで使えるデザインはキレイに作られていて、誰でも簡単にかっこいいブログを書くことができます。私も現在のブログのデザインはほぼ、デフォルトのものを使用しています!

デフォルトの見出し

デフォルトのブログのデザインはよく作られているのですが、自分的には見出しと、本文の区切りが見づらいかなっと感じました。そこで、はてなブログCSSを少し編集することで、より見やすくすることを試みました。

見出しをかっこよくする方法

今回編集した見出しは大見出しです。

f:id:lxxv:20170719233821p:plain

大見出しのhtmlのタグを確認したところ<h3>タグでした。

 

まず、はてなブログ

デザイン」-> 「カスタマイズ

から

{}デザインCSS

を開きます。

f:id:lxxv:20170719235656p:plain

上の画像ではコメントとして「/* custom */」がすでに書いてあります。(自分で書きました)このコメントは特に必要ないです。

そこに、下の画像のように<h3>タグに関するCSSを書き込みます。

f:id:lxxv:20170719235854p:plain

見出しの左側と下側に線を引く引くようなCSSは以下のようになります。

h3 {
    font-size: 18px;
    line-height: 1.4;
    border-style: solid;
    border-width: 0 0 1px 3px;
    border-color: #00aa8c;
    padding: 0px 10px;
}

自分のブログに合わせて、適切に書き換えましょう。

 

これを書き込んだ状態で、欄外のどこかをクリックすると更新されたデザインが見られます。変更を保存をクリックすれば変更が保存されます

やってみたらかなり簡単に編集することができました!これを応用すれば他のデザインも編集することができると思います!