見出しの設定を変更しました。

bloggerの見出し設定

ブログの記事では見出しの設定が可能です。
bloggerでは見出し・小見出し・準見出しの3種類があります。
慣れてくると、それぞれを使用した時のデザインも気になってきますよね。
デザインをうまく設定できれば、その後の投稿に利便性もでてきますし。
そこで設定にチャレンジしてみました。

初期設定

見出しはh1～h6の6つの設定があります。

基本的に数字の小さなh1のほうが大きい、重要な見出しに使われます。

初期設定は以下のようになっています。

h1：サイトのタイトル

h2：記事の日付、見出し

h3：記事の名前、少見出し

h4：コメント、準見出し

h5：無設定

h6：無設定

なので、h2～h4のデザインを設定する形になります。

また、そのままデザインを変更してしまうと
記事の日付、記事の名前、コメントにも適用されてしまうので
それらにはh2～h4のデザインが適用されないよう、
設定を解除しておく必要があります。

設定手順

1.hの設定項目を整える

こちらのページを参考に項目を整えました。

その段階で、当サイトのデザインではサイドバーのガジェットのタイトルが

h2に指定されていることが判明しました。

サイドバーの項目はまとめてデザイン設定できると嬉しいなと思ったので

h5に指定することにしました。

最終的には

h1：サイトのタイトル

h2：見出し

h3：少見出し

h4：準見出し

h5：ガジェットのタイトル

h6：無設定

となりました。

2.デザインを設定する

こちらのページを参考に設定を行いました。
たくさんデザインがあるので見ているだけで楽しいですね。

bloggerではcssの内容は

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

のテキストボックスに記載すればOKです。

（後ほどテキストボックスから削除されHTMLに組み込まれるようなので

　修正などはHTMLの編集から行わなければいけなくなりますが…。）

3.Font Awesome5の設定

当サイトではこちらを参考にFont Awesome5を導入しました。
それにより、webアイコンフォントの表示が可能となります。
準見出しでチェックマークを取り入れました。

←これです。
他にも使いやすいデザインがたくさんあるのでお勧めです。
もちろんブログの文章中にも取り入れられますし。

ただ、CDNで使用するときのコードがhpに記載されたものではエラーがでてしまい
少し修正を加えたので記載しておきます。

実際に<head>～</head>に取り入れたコードとしては
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
になります。この半角スペースからのスラッシュが大切です。
これを加えることでエラー無く、アイコンが適用されました。

最後に実際にできた見出しを載せております。

見出し

小見出し

準見出し

以上3種類を設定しました。

色をそろえて統一感を出してみました。
並べてみると小見出しも結構主張が激しいですね…。

準見出しは主張しすぎないよう気を付けました。

また気まぐれで変わるかもしれませんが、設定方法が理解できてよかったです。

Pages