『WING』のカスタマイザーでできる見出し（H1~H5タグ）のデザインカスタマイズ

当サイト、早くもテーマを『WING』に変更して各デザインのカスタマイズを施している途中でございます。

その中でも一番変更しやすい見出し（H1~H5タグ）のデザインをCSSの変更を用いず、デフォルトで用意されているものを紹介していきます。

スポンサーリンク

記事タイトル（H1タグ）のデザイン

記事を書く際に必ずつける必要のある記事タイトル。

このデザインがWINGではデフォルトで複数用意されているので一つずつ紹介。

▼まずはどんなデザインスタイルが用意されているのか？

上記のスタイルが用意されています。

なしの場合

このようなシンプルなデザインとなります。

これに簡単な着色を設定して各デザインを見ていきます。

※各デザインによってカラーを変更していきます。

吹き出しデザイン

なんだか左側の余白のなさが気になります。

paddingの調整が必要でしょうか。

囲み＆左ラインデザイン

ボーダーで設定されたカラーが囲みの部分やラインに適用されています。

余白もなく程よいデザインです。

2色アンダーライン

シンプルで見やすいデザインです。

ボーダー色とサブの設定次第で変更できます。

よくよく見るとやはり左側の余白がキツキツに。

グラデーションアンダーライン

上の２色アンダーラインがグラデーションになったパターンです。

こちらもボーダー色とサブを変更することで配色を変更できます。

センターライン

タイトルが長いせいでセンターラインが少ないのですが、短くすればもっとわかるのかな？

基本的にSEO対策を兼ねて30文字程度をタイトルにつけるので、これはデザイン的に少しもったいないような気がします。

ものすごく微妙にですが左側のセンターラインの位置がやはり詰まっているように見えます。

囲みドットデザイン

よく見ないとわかりませんがボーダー色（メイン）で囲んだ内側にサブで設定したカラーでドット表示されています。

▲スマートフォンではわかりやすくなっているのが確認できました。

ストライプデザイン

背景色・グラデーション上部の配色でストライプの色を変更できます。

やはり左が詰まっているのでCSSで対処したほうが良さそうですが、CSSをいじらなくても簡単によく見せられるので下部に書きます。

下線ドットデザイン

単なる線に見えます。

アップにしても細かすぎて線に見えてしまいます。

囲みドットデザインと同じようにスマホで見ればドットと確認はできると思います。

H1の左づまりを解消したい場合

今のところH1はすべてpaddingの影響のせいか左に詰まって見えてしまっています。

せっかくのデザインが台無しになってしまいますね。

これを治すにはCSSをいじる必要があるのですが、わざわざいじらなくても簡単に直せそうな設定があったので試してみます。

『デザインを幅いっぱいに』

これにチェックを入れると、

このように横幅いっぱいまで広げられます。

左に詰まっているのが気にならなそうです。

その他のデザイン変更

例えば囲み＆左ラインの設定でボーダー色とサブをクリアしておくと

このように周囲を黒で囲われ、背景に設定したグラデーションがかかります。

『グラデーションを横向きにする』にチェックをすると、

このようにグラデーションのオレンジを右に持っていけます。

また『背景や吹き出しの角を丸くする』にチェックを入れると

じゃっかんではありますが丸みを帯びてくれます。

『テキストを中央寄せ』はその通りセンタリングになるので割愛します。

個人的にタイトルはシンプルにしておきたいので当サイトでは『なし』を選択しておきます。

また記事タイトルがわかりにくくなってしまうので、文字色とPC閲覧時の文字サイズのみ変更します。

スポンサーリンク

見出し２（H2タグ）のデザイン

デフォルトの状態のままだと

このようになります。

これをH1タグの時と同じようにカスタマイザーで変更していきます。

デフォルトの文字色の設定は

このようになっているので文字が見にくいです。

見やすいように設定し直しましょう。

そしてH2タグのスタイルは…

どうやらH1タグのスタイルと同じようです。

このあとH3タグも見てみましたが、同じ設定が続きますのでデザインの紹介は省きます。

どのスタイルにしても見栄えの良いものばかりなので、下手にCSSを変更しなくてもステキな各見出しが作れそうです。

お好みの配色にして見出しのカスタマイズを楽しみましょう。

見出し（H4タグ）のデザイン

見出し（H4タグ）はデフォルトでは下のように表示されます。

これではかなり薄くてユーザビリティが損なわれてしまいますので少しコントラストを付けて調整をしたほうが良さそうです。

ちなみにデフォルトですと

このような色設定です。

H4タグはスタイルの設定が少なく、H1~3までのようなデザイン性はあまりありません。

上の画像のような設定にすると

このようなデザインになります。

「右にボーダーをつける」がないのはふせん風のデザイン性を出すためでしょうか？

必要な人は border-right: 1px solid #dddddd; とでもcssで変更すれば良いのかなと思います。

見出し５（H5タグ）のデザイン

WINGでは見出し５も見出し４と同じ設定のようです。

色合いの違いやサイズの違いで差を出したほうが見やすいのではないかなと思います。

当サイトでは見出しの判断のしやすさを考えて［余白の上下を5px］にしておきました。

見出し６（H6タグ）のデザイン

見出し６についてはカスタマイザーには設定がありませんでした。

ですので割愛します。

その代わりにある設定が「まとめタグ」と呼ばれるもの。

まとめタグのデザイン

デフォルトではただの太字のようなデザイン。

Boldでサイズを少し大きくしたようなものでしょうか。

カスタマイザーでの設定は

このようになっているのでH4タグH5タグと同じ設定のようです。

これをH6タグの代わりとして使うべきなのでしょうか…？

謎です。そもそも「スタイル」から入力すると

• 記事タイトル
• h2風
• h3風
• h4風
• h5風
• まとめ

となっています。

この『風』とは一体何なのか。

スポンサーリンク

見出しデザインまとめ

WINGのカスタマイザーではh1、h2、h3は同じ設定。

h4、h5、まとめタグが同じ設定になっているようです。

バリエーションが豊富なので、一生懸命に学んでわざわざcssを使う必要もないくらいデザインを調整できそうです。

もっとオリジナル性を出したければcssを変更するのをおすすめしますが、そこに時間を使うよりも記事を書くことに時間を書くことをもっとおすすめします。

当サイトの見出しカラー設定

色見本	カラーコード
	#dd7171
	#444444
	#dddddd
	#f2f2f2
	#fafafa

この色の組み合わせで見出しの設定を行っています。

#dd7171だけ記事タイトルで使用していますが、あまり派手を好まない性格なのでシンプルにしました。

見本の見出しの一覧は

参考見出しカスタマイズ確認のデモページ

こちらから確認してください。参考になれば幸いです。