笑門来福*HANA日和

日々のつれづれ

はてなブログの見出しカスタマイズ

今使っているはてなブログのテーマ「soboku」。大好きなんですが見出しがちょっと味気ないんですよね〜。これは好きなようにカスタマイズ出来るように敢えて素っ気なくしているのかな?

ブログテーマを決めるときに「soboku」にするか「薄グレーなテンプレ」にするか迷いに迷いました。よりシンプルな「soboku」にしたのだけど見出しは「薄グレー」が好み。なのでちょこっとカスタマイズしてみました。

 

「soboku」のデフォルトの見出しはこんな感じ。

f:id:linomahina:20180420020806p:plain

 

それをこんな風に変えました!

f:id:linomahina:20180420020856p:plain

 

カスタマイズのやり方

はてなブログ カスタマイズ 見出し」とググるとたくさんヒットするので、その中から好みのものを探し、CSSをコピペするだけです。

今回参考にさせて頂いたのがこちらのブログです。

www.decoboco-life.com

saruwakakun.com

分かりやすくてど素人のわたしでも簡単にカスタマイズ出来ました!どうもありがとうございます:)

見出しは3種類

はてなブログには見出しが

と3種類あり、それぞれのタグは

となっています。好みの見出しCSSをコピペするときに、どの見出しに使うか決めてタグを変更する必要があります。

見出しの文字を太字にする

sobokuのデフォルトの見出しは中見出しが太字で、大見出しと小見出しは通常の太さです。わたしは見出し全てを太字にしたかったので、太字指定を加えました。

font-weight:bold; /*太字に*/

見出しの文字の大きさを変える

文字の大きさも微妙に変えたかったので大きさも指定しました。

  • 大見出し

font-size: 23px; /*文字の大きさ*/

  • 中見出し

font-size: 20px; /*文字の大きさ*/

font-size: 18px; /*文字の大きさ*/

 見出しの色を変える

CSSの#から始まる英数字は色を表しているので、好みの色記号に変えました。

色見本はこちらのサイトを使いました。

www.color-sample.com

今回作った見出しCSS

/* 見出しカスタマイズ */ 
.entry-content h3 {
background: #f0f0f0;/*背景の色*/
padding: 0.5em;
border-radius:0.5em;/*角を丸く*/
font-size: 23px; /*文字の大きさ*/
font-weight:bold; /*太字に*/
}
 
.entry-content h4{
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #5c5c5c;/*上線*/
border-bottom: solid 3px #5c5c5c;/*下線*/
font-size: 20px; /*文字の大きさ*/
font-weight:bold; /*太字に*/
}
 
.entry-content h5 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 5px #4e525a;/*左線*/
font-size: 18px; /*文字の大きさ*/
font-weight:bold; /*太字に*/
}
  

 

って言っても見出しの出番は少ないかもしれません。笑  ダラダラ書き連ねる日記ブログなので。

でも自分好みにカスタマイズしているとストレスフリーで楽しく書けそうです。

 

これから見出しカスタマイズを考えいている方の参考になれば幸いです:D