EFIC.fun

ゆるく、楽しく、ライフハック

【簡単3分】はてなブログの見出しデザインを変更する方法

f:id:efic_fun:20210223102958p:plain



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

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


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

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

変更前見出しデザイン変更後見出しデザイン
変更前後の見出しデザイン

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

①見出しデザインを探す

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

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

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

「はてなブログ 見出し css」で検索
「はてなブログ 見出し css」で検索

②CSSをコピー

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

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


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

見出し装飾CSS
見出し装飾CSS

③CSSを貼り付け

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

はてなブログ「デザインCSS」
はてなブログ「デザインCSS」

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

スマホ見出し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>

最後まで読んでくれてありがとうございました。
ブログサイトを運営する際のプロセスもブログ記事として継続して公開していきたいと思います。


efic.fun