今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「記事タイトル＆見出し」
の色・デザインをカスタマイズする手順
をご紹介していきたいと思います
まず記事タイトルとは、文字通り「記事ごとのタイトル名」のことですね
そして「見出し」とは、その記事のなかの「小分けにされたタイトル」のこと
実際の画像で見ると…
↑ このネイビー色の部分が、すべて「見出し」です
「記事タイトル」はもちろんですが、この「見出し」もブログ上でもっとも目立つエリアの1つと言っても過言ではないと思います
そして「WING（AFFINGER5）」の場合、カスタマイズ手順は超簡単です
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
【記事タイトル＆見出し編】WING AFFINGER5における色＆デザイン設定のカスタマイズ手順
まずは、カスタマイズ画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「各テキストとhタグ（見出し）」という項目をクリックします
ここから、
- 記事タイトル
- H2見出し
- H3見出し
- H4見出し
と順に見ていきます🐥
「記事タイトル」の色＆デザイン設定
さきほど開いた「各テキストとhタグ（見出し）」のメニュー一覧から…
↑「記事タイトル」をクリックします
↑ 記事タイトルの設定画面が開きました
まずは画面中央のプレビュー画面から、実際に投稿してる記事をクリックして開いてみます
↑ 記事プレビューが開きました。 このサンプル画像では、 Hello world! という場所が記事タイトルになります
この記事タイトルの色とデザインは、左側の設定メニューにある…
↑ この「文字色」～「ボーダー色（サブ）」と…
↑ その下にずらっと並んだデザインパターンから指定できます
ちなみに個人的には、記事タイトルはこの初期設定のままが一番シンプルでわかりやすいと思うので、変更はしてません
ということで配色とデザインを選んだら…
↑ 画面上部の 公開 をクリックして保存しましょう
設定がおわって1つ前の画面に戻るときは、同じく上部の ＜ をクリックしましょう
つづいて、「見出し」のカスタマイズを見ていきたいと思います🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
「H2見出し」の色＆デザイン設定
1コ前の「各テキストとhタグ（見出し）」画面に戻ったら、また左側のメニュー一覧から…
↑ 今度は、「H2タグ」という項目をクリックしましょう
↑「H2タグ」の設定画面が開いたら、また中央のプレビューから投稿済みの記事をクリックすると、実際の表示イメージを見ながら設定できます
ちなみに「H2見出し」は、初期設定では…
↑ こんな感じになってます
さきほどの記事タイトルと同じように、左側の設定メニューから配色とパターンを指定していきましょう
参考までに、僕が実際にカスタマイズした配色＆デザイン例を載せておきます
↑ デザインパターンは、「吹き出しデザインに変更」です
あと、初期設定で有効になってる「テキストを中央寄せ」という項目のチェックを外します
↑ 配色はこんな感じ
具体的なカラーコードは、真っ白にあたる「#ffffff」と、ネイビー系にあたる、「#1001b2」です
右側のプレビューを見てみると…
↑ こんな感じに変わりました
「H2見出し」の設定は、これでOKです
今度は、「H3見出し」も同じ流れで設定していきましょう🐥
「H3見出し」の色＆デザイン設定
また1コ前の「各テキストとhタグ（見出し）」画面に戻ったら、左側のメニュー一覧から…
↑ 今度は「H3タグ」という項目をクリックします
この「H3見出し」は、初期設定だと…
↑ こんな感じになってます
ここも、任意の配色＆デザインを指定しましょう
また参考までに、実際に僕が設定した配色＆デザイン例を載せておきますね
↑ デザインは「グラデーションアンダーラインに変更」で、「テキストを中央寄せ」のチェックは外します
↑ 配色はこの通り
ホワイトは「#ffffff」、ネイビー系は「#1001b2」のカラーコードです
またプレビューで確認すると…
↑ こんな感じになりました
見出しの階層をユーザーにわかりやすく伝えるために、H2見出しよりは存在感を薄くしてます
これで、「H3見出し」の設定もOKです
最後に、「H4見出し」です🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
「H4見出し」の色＆デザイン設定
1つ前の「各テキストとhタグ（見出し）」画面にまた戻ったら、左側のメニュー一覧から…
↑ 今度は、「H4タグ」をクリックしましょう
この「H4見出し」は、初期設定だと…
↑ こんな感じになってます
また任意の配色とデザインを指定しましょう
個人的には、デザインパターンは初期設定の…
↑ この設定が気に入ってるので、そのままにしてます
↑ 配色はこの通り
背景色はホワイトではなく、トップグレー系にしてます（具体的には、カラーコード「#f7f7f7」です）
またプレビューを見ると…
↑ こんな感じになりました
改めてここまでの「H2見出し」～「H4見出し」のプレビューを見てみると…
↑ こんな感じになりました
今回の「記事タイトル＆見出しをカスタマイズする手順」の解説は、これで以上です
お疲れさまでした♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^