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

どうも、果汁1%程度です

 

はてなブログの設定シリーズ

 

f:id:kajyu-1per:20200223143613p:plain

 

今回は見出しのカスタマイズ

意外と簡単にできたのでメモしておくことに

 

CSS(Cascading Style Sheets) というのを使うらしい

追加コードはなんやら難しそうなのでぐぐってコピペ(^^;

 

そのほかちょっとHTMLの知識が必要

 

「見出し」で設定した行はHTMLがこんな感じになる

 <h3>大見出し</h3>    大見出し

<h4>中見出し</h4>    中見出し

<h5>小見出し</h5>    小見出し

 

そして、CSSの設定はこんな感じ

1行目のh3で<h3>大見出し</h3>の設定ですよとなるらしい

.entry-content h3{
color: #ffffff;
background: #000080;
padding: 10px 10px;
border-radius: 10px;
}

 

<h4>中身見出し</h4>をカスタマイズする場合はCSS設定の1行目をh4とすればOK

.entry-content h4{
color: #3f3f3f;
padding: 10px 15px;
border-left: 10px solid #000080;
border-bottom: 3px solid #000080;
}

 

  <h5>小見出し</h5>

.entry-content h5{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px dotted #000080;
}

 

設定方法は 「デザイン」→「カスタマイズ」→「CSS設定」をクリックしてコピペ

設定するとこんな感じ

f:id:kajyu-1per:20200112131118p:plain

 

デザインはいろいろできそうなので自分で作ってもいいかもしれない