[簡単5分]はてなブログの目次デザインを変更する方法

f:id:efic_fun:20210223102958p:plain

こんにちは。ど田舎リモートワーカー「えふ」です。

何本かブログ記事を公開して、どうしても見出しが「ダサい」「読みにくい」と思っったので、
見出しのデザインを変更することにしました。

想像よりも簡単に変更できたので、ぼくが行った見出しの変更方法を紹介したいと思います。

デザイン変更前後の見出し
左が変更前、右が変更後の見出しになります。

では、早速を紹介したいと思います。

①見出しデザインを探す
②CSSをコピー
③CSSを貼り付け
最後に

①見出しデザインを探す

ぼくの場合はGoogle検索で「はてなブログ　見出し CSS」と検索しました。
下記の検索ワードなら目的の記事がヒットすると思います。

はてなブログ　見出し　装飾
はてなブログ　見出し　デザイン
はてなブログ　見出し　CSS
はてブ　見出し　装飾
はてブ　見出し　デザイン
はてブ　見出し　CSS

検索結果の記事で紹介されているデザインを見ながら好みのデザインを見つましょう

②CSSをコピー

ぼくの場合は以下の記事のデザインが好みでしたので、CSSを使わせてもらいました。

https://www.notitle-weblog.com/hatena-heading

どの記事にもデザインとCSSコードが紹介されていると思いますので、好きな見出しデザインのCSSコードをコピーしましょう。

③CSSを貼り付け

パソコンの場合
「デザイン設定」→「デザインCSS」にコピーしたCSSを貼り付けてください

スマホの場合
スマホの場合は、パソコンのように「デザインCSS」が存在しないため、HTMLを記載できる部分にコピーしたCSSを貼り付けてください。
ぼくの場合は、「記事」→「記事下」にCSSを貼り付けました。

スマホの注意点
ただコピーしたCSS貼り付けるだけだと見出しデザインが反映されませんので、貼り付けたCSSの前後にstyleタグを追記する必要があります。

styleタグを追記した例

<style type="text/css">

※ここに、コーピーしたCSS

</style>

最後に

私が利用しているCSSも載せておきますので、Google検索を検索するのもめんどくさいという方は、下記のCSSを利用してみてください。

パソコンのCSSコード

/*見出し*/
.entry-content h3 {
  padding: 6px 10px;
  border-left: 8px solid #90caf3;
  border-bottom: 1px solid #90caf3;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

スマホのCSSコード（styleタグ付）

<style type="text/css">
/*見出し*/
.entry-content h3 {
  padding: 6px 10px;
  border-left: 8px solid #90caf3;
  border-bottom: 1px solid #90caf3;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}
</style>