【ブログ】はてなブログで見出しをカスタマイズする方法とは？

どうもこんにちは、S.Y N（シン）です。

日曜はその他投資について投稿しているのですが、今回はブログの状況について紹介したいと思います。

■スポンサーリンク

誰でもできるInsta自動システム【インスタイル】

→ブログ1年目の閲覧数はこちら！

www.hitobashiratoushi.com

はじめに

前回の投稿で目次をカスタマイズする方法について紹介しましたので、今回は見出しをカスタマイズする方法についてです。

→目次をカスタマイズする方法はこちら！

www.hitobashiratoushi.com

目次のカスタマイズ方法でも触れましたが、最低限の見出しを作成する場合は、カスタマイズを使用しなくても、標準のはてなブログ機能で対応できます。

しかし、それだとデザイン性に乏しいですし、何より他のブロガーさんと差別化ができないので、見出しのカスタマイズ方法を身につけて、是非自分好みにアレンジしてみてください！

1．見出しをカスタマイズする方法とは？

それでは早速、見出しをカスタマイズする方法について、解説していきます。

見出しをカスタマイズするには、目次と同じくデザインCSSを更新する必要があります。

まずデザインをクリックして、サイドメニューのレンチをクリックしてください。

すると詳細なメニューを選択できるので、デザインCSSをクリックしましょう。

プログラムを記述するスペースが表示されますので、ここに下記のプログラムを貼り付けてください。

■プログラム
h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

最後に変更を保存するをクリックすると、見出しのデザインが反映されます。

これだけでも標準の見出しと比べて、かなりカッコよくなりましたね！

2．大見出し、中見出し、小見出しをカスタマイズするには？

続いて大見出し、中見出し、小見出しをカスタマイズする方法ですが、これは非常に簡単です。

先ほどのプログラムで「h3」となっているところを、「h4」「h5」に変更すると、それぞれ中見出し、小見出しのカスタマイズになります。

「h3」のままだと大見出しのカスタマイズになるので、好きなデザインを使い分けてみてください！

3．見出しの色を変更するには？

background-color:の後を変更すると背景色を、color:の後を変更すると文字色をそれぞれ変更することができます。

■色のコード

グレー：f5f5f

水色：f0ffff

グリーン：ccffcc

ピンク：ffeff9

ここにあげた配色以外にも、様々な色がありますので、色々試してお気に入りの配色を見つけてください！

4．見出しの種類を変更する方法とは？

最後に見出しの種類についてですが、これにも様々な種類があります。

「はてなブログ 見出し」などで検索すると、見出しに関するプログラムが沢山出てきますので、大見出し・中見出し・小見出しそれぞれに、異なる見出しを使用して、分かりやすくアレンジしてみましょう。

■スポンサーリンク

【デイズ男性ハイステイタス恋活マッチングサービス】
待って見つける恋人!毎日1名年間365名を無料紹介

おわりに

ということで今週はブログの見出しをカスタマイズする方法について、お伝えさせていただきました。

ブログ投稿に興味のある方は参考にしてみてください(´∀｀)

最後までお付き合いありがとうございましたー！