WordPressテーマWING(AFFINGER5)では，カスタマイズの機能が豊富で，各テキストと見出しのデザイン変更やカスタマイズも可能です。
その中でも今回は，記事タイトルと見出し（h2からh5まで）のデザイン変更とカスタマイズの方法を解説します。
また，カスタマイズで変更を加えても反映されないといったケースの解決案も紹介していますので，参考にしてもらえたらと思います。
この記事はこんな方におすすめ
- AFFINGER5で見出しのカスタマイズの方法が知りたい
- カスタマイズで変更を加えても反映されない場合の解決方法が知りたい
- 見出しを格好良いデザインに変えたい
参考
「WING（AFFINGER5）」は，SEOに強く収益が発生しやすいと評価されていて，稼ぐことに特化した人気のあるWordPress有料テーマです。
WING（AFFINGER5）に興味のある人は，
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
詳しく解説していますので，参考にしてください。
-
-
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
続きを見る
それでは，順に解説していきます。
目次
「記事タイトル・見出し」をカスタマイズする前にやっておくこと
まず，「記事タイトル・見出し」をカスタマイズする前に，「全体カラー設定」で「全体的に反映 : 」以外に設定してください。
ここで「全体的に反映 : 」にチェックを入れていると，カスタマイズで変更を加えても反映されないからです。
「全体的に反映 : 」以外にチェックを入れることで，カスタマイズで変更を加えたデザインが反映されるようになります。
- 「外観」から
- 「カスタマイズ」をクリックします。
「全体カラー設定」をクリックします。
- (2)もしくは(3)または「使用しない（管理画面で選択したカラーが初期値になります）」のどれかにチェックを入れます。
- 「公開」をクリックします。
これで反映されたらOKなんですが，これ以外にもデザインが反映されない原因はあります。
いくつかの原因と解決案をまとめましたので，参考にしてください。
「記事タイトル・見出し」のカスタマイズが反映されない原因と解決案
| カスタマイザーの「全体カラー設定」で「(1)全体的に反映」に設定している | 「(1)全体的に反映」以外にチェックを入れる |
| ブラウザのキャッシュが残っている | ブラウザのキャッシュをクリアする |
| キャッシュ系プラグインを使用している | キャッシュ系プラグインの削除または無効化 |
「記事タイトル・見出し」のデザイン・カスタマイズ
「記事タイトル・見出し」をカスタマイズする手順を解説していきます。
カスタマイズする前のデフォルトのデザインを見ておきましょう。
「記事タイトル」のデフォルトのデザインは上の画像のようになります。
(h2からh5)までの見出しのデフォルトのデザインは上のようになります。
記事タイトルと見出しはWordPressのカスタマイズ画面で編集することが出来ます。
- 「外観」から
- 「カスタマイズ」をクリックします。
「各テキストとhタグ (見出し) 」をクリックします。
ここから記事タイトルと各見出しのカスタマイズが可能ですので，好みのデザインにカスタマイズしてください。
「記事タイトル」のデザイン・カスタマイズ
「記事タイトル」をクリックします。
文字や背景の色を設定できます。
今回は，デフォルトのままにしています。
タイトルのスタイルを変更できます。
ここもデフォルトのままにしています。
「公開」をクリックして完了です。
今回，記事タイトルはデフォルトのままにしています。
「H2見出し」のデザイン・カスタマイズ設定
「H2見出し」はここでカスタマイズすることができます。
デフォルトのデザインは下の画像のようになります。
ここで好みのデザインにカスタマイズしてください。
「H2タグ」をクリックします。
ここでは，
- 「吹き出しデザインに変更(※要背景色)」にチェックを入れ，
- 「テキストを中央寄せ」のチェックを外しています。
ここでは，「吹き出しデザイン」に変更するので，
指定する箇所は，文字色と背景色になります。
ここでの色の指定は以下のようになります。
- 文字色: #ffffff
- 背景色: #000083
「公開」をクリックします。
変更されたデザインは下の画像のようになります。
「H3見出し」のデザイン・カスタマイズ
「H3見出し」はここでカスタマイズすることができます。
デフォルトのデザインは下の画像のようになります。
ここで好みのデザインにカスタマイズしてください。
「H3タグ」をクリックします。
ここでは，
- 「グラデーションアンダーラインに変更(※要ボーダー色)」にチェックを入れ，
- 「テキストを中央寄せ」のチェックを外しています。
ここでは，「グラデーションアンダーライン」に変更するので，
指定する箇所は，文字色とボーダー色とボーダー色（サブ）になります。
ここでの色の指定は以下のようになります。
- 文字色: #000083
- ボーダー色: #000083
- ボーダー色(サブ): #002eef
「公開」をクリックします。
変更されたデザインは下の画像のようになります。
「H4見出し」のデザイン・カスタマイズ
「H4見出し」はここでカスタマイズすることができます。
デフォルトのデザインは下の画像のようになります。
ここで好みのデザインにカスタマイズしてください。
「H4タグ」をクリックします。
ここでは，そのままデフォルトの「左ボーダーを付ける」のままですので，
指定する箇所は，文字色とボーダー色とボーダー色と背景色になります。
ここでの色の指定は以下のようになります。
- 文字色: #000083
- ボーダー色: #000083
- 背景色: #f2f3f2
「公開」をクリックします。
変更されたデザインは下の画像のようになります。
「H5見出し」のデザイン・カスタマイズ
「H5見出し」はここでカスタマイズすることができます。
デフォルトのデザインは下の画像のようになります。
ここで好みのデザインにカスタマイズしてください。
「H5タグ」をクリックします。
ここでは，そのままデフォルトの「下にボーダーを付ける」のままですので，
指定する箇所は，文字色とボーダー色とボーダー色と背景色になります。
ここでの色の指定は以下のようになります。
- 文字色: #000083
- ボーダー色: #000083
- 背景色: #f2f3f2
「公開」をクリックします。
変更されたデザインは下の画像のようになります。
まとめ
「記事タイトル・見出し」のカスタマイズは以上になります。
ここで，変更されたデザインをまとめて見てみましょう。
デフォルトに比べるとだいぶ変わっています。
それではまた！
では，カスタマイズの機){kind=link}