世帯年収500万円、子ども2人、40歳夫の考え事

子供の成長、金銭事情、考え事を中心に様々な内容をテーマに書いてます。日々の生活を書き綴った日記ブログです。

『記事の見出し』をカスタマイズ。(無料版はてなブログ)

このブログの

『記事の見出し(題)』と『記事』の境目が、

分かりづらく、フォントサイズも似ていて、

区別がつきにくかった為、

カスタマイズした。

 

ネットで検索をかけて、

いろんな方のブログや記事を参考に、

無事カスタマイズできたが、1~2時間くらいかかった。

方法は、『デザインCSS』にコードを打ち込んで、

『背景色』とか『フォントサイズ』を変更させるが、

全く経験のない初心者だったのでとても苦労した。

このようなプログラムは、

大昔に(20年くらい前に)『VB6.0』を少しかじった程度だった。

(今は分かる人は少ないと思うが。)

 

『デザインCSS』の場所は、

はてなブログ

ダッシュボード

左サイドバーの『デザイン』

真ん中のスパナのマーク『カスタマイズ』

一番下、高度な設定『{}デザインCSS

 

記事の見出し(題)の部分は『h1』を指定すればいいらしい。

実際のコードはこうなる。

h1 {
background: #87cefa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角の丸み*/
  font-size: 25px !important; 
}

しかし、

これを記入すると『記事の見出し(題)』のほかに、

『ブログのタイトル』までも同じようにカスタマイズされてしまう。

つまり、『h1』は『記事の見出し(題)』と『ブログのタイトル』両方含まれている。

 

 

 

 

そこで、『h1』の後に次のコードを追加する。

h1.entry-title {
background: #87cefa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角の丸み*/
  font-size: 25px !important; 
}

このentry-titleを追加すれば『h1』の中の、

記事の見出しの部分だと指定できる。

上記変更で、このブログのような記事の見出し(題)の背景を『水色』に変更できた。

 

ネットを調べても、

このような『記事の見出し(題)』だけ変更するやり方が見つからなかったのでブログにしてみた。

※ブログページを右クリックして出るメニューの一番下

『開発者ツールで調査する』を開いて、手探りで調べた。

あくまで、無料版はてなブログの仕様に起因する問題だとは思うが。

無料版はてなブログで記事の見出し(題)のみカスタマイズしたい場合の方法でした。