【Blogger】初心者でもできる記事内の見出しをカスタマイズする方法

みなさんの中にはブログの記事を書く時に

「見出しをもっと色とりどりにしたい！」

や

「見出しをもっと可愛くデザインしたい！」

と思う方もいるのではないかと思います。

でも、

「HTMLやCSSのこと知らないし、どうすればよいかわからない。」といった方の為に、

今回は初心者でもできるBloggerで作成した記事内の見出しをカスタマイズする方法についてお伝えします。

1.初心者でもできる記事内の見出しをカスタマイズする方法

①テーマのバックアップ

HTMLやCSSの変更を行う前には必ずテーマのバックアップを取っておきましょう。

テーマのバックアップの方法がわからない方は以下の記事で詳しく解説しているので、ご覧ください。

②CSS編集まで行く

テーマのバックアップができたら、CSSを書き換えるところまで行きます。


「テーマ」→「カスタマイズ」→「上級者向け」→「CSSを追加」

⇩

③見出しの違いを理解する

Bloggerでは見出しのサイズが3種類ありますので、

カスタマイズしたい見出しのサイズを覚えておきます。

画像でも示しているように、各見出しのサイズは

「Heading」＝「h2」

「Subheading」＝「h3」

「Minor heading」＝「h4」

となります。

④見出しのカスタマイズ

カスタマイズしたい見出しのサイズがわかったら、先ほどの「CSSを追加」のページの余白部分にコードをコピペしていきます。

1番大きい見出し（Heading）をカスタマイズしたい場合は、

.entry-content h2 {カスタマイズしたいコード}

2番目に大きい見出し（Subheading）をカスタマイズしたい場合は、

.entry-content h3 {カスタマイズしたいコード}

1番小さい見出し（Minor heading）をカスタマイズしたい場合は、

.entry-content h4 {カスタマイズしたいコード}

になります。

ちなみに、上の画像の見出しのコードは上から順に、

.entry-content h2 {
  background: #c2edff;
  padding: 0.5em;
}

.entry-content h3 {
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;
  border-left: solid 5px #7db4e6;
}

.entry-content h4 {
  padding: 0.25em 0.5em;
  color: #494949;
  background: #FAF5F2;
  border-left: solid 3px #7db4e6;
}

 となっています。



他の見出しのデザインについては

「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」をご覧ください。


可愛いデザインのものがいろいろあります。

⑤オリジナルに見出しをカスタマイズする

見出しをオリジナルにカスタマイズするためには、多少CSSの知識がいりますが、

ここで簡単に、変更できるものを紹介しておきます。




①色の変更

色をオリジナルのモノに変えたいという方は多いと思います。


文字の色を変えたい場合は、

h2｛color:ここを変更｝

背景の色を変えたい場合は、

h2｛background:ここを変更｝

で色の変更ができます。


色のコードは「Adobe Color」で好きな色を自分で作り、

その色のコードを自動で作成してくれるので、あとは「ここを変更」と書いた場所にコピペするだけでOKです。


そして、「Adobe Color」は無料ですのでご安心を。ありがたい。。。






②枠線の変更

見出しの枠線の変更するには、

｛border:~~}

 を使って変更します。


例えば、上の画像のh3の右の青い枠線の太さを変えたい場合、

.entry-content h3 {border-left: solid 5px←ここの数字を変更 #7db4e6｝

数字を小さくすれば細く、大きくすれば太くなります。



枠線の色を変えたい場合は、

.entry-content h3 {border-left: solid 5px #7db4e6←この＃以降を変更｝

すると変えられます。


色の作成は「Adobe Color」をお使いください。




また、上下もしくは右側の枠線を変えたい場合は、

h3｛border-top:線の種類　太さ　色｝で上の枠線

h3｛border-bottom:線の種類　太さ　色｝で下の枠線 

h3｛border-right:線の種類　太さ　色｝で右の枠線 

の変更が可能です。




枠線の種類変更

枠線の種類もいろいろあり、変えることができるので、


いくつかだけ紹介します。

上が「dashed」

右が「double」

下が「dotted」

左が「solid」

となります。


好みに合わせて、上で書いた｛線の種類｝のところに、入れてみてください。



ちなみに上の画像の枠線を変えたコードは以下のような感じです。

.entry-content h3{ 
  border-top: dashed 5px #000;
  border-right: double 5px #000;
  border-bottom: dotted 5px #000;
  border-left: solid 5px #000;
}

2.まとめ

今回は初心者の方でも記事内の見出しをカスタマイズする方法を解説しました。

見出しをカスタマイズすることで、読者を引きつけることができるので、非常に大事になります。

また、個人的に「Adobe Color」は非常に重宝しています。

なんせ無料で使えて、かつ自分のオリジナルの色を作り出せますからね！

今回解説したやり方で見出しをカスタマイズして、美しい見栄えのブログ記事にしましょう！

本記事は以下の記事を参考にさせて頂きました。

「【Vaster2】記事ページの見出しのカスタマイズ」

お読みいただきありがとうございました。