専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「記事タイトル＆見出し」の色・デザイン・フォントサイズ設定
をカスタマイズする方法について、ブログ初心者さん向けに１からわかりやすく解説していきます
実際のブログ画面上で見ると…
↓（設定後の一例）
↑ 例えばこのような感じですね
ということで、今回は３つのステップで丁寧に解説していきます
- 「記事タイトル」の色・デザイン設定をカスタマイズする
- 「見出し（H2・H3・H4…）」の色・デザイン設定をカスタマイズする
- 「記事タイトル＆見出し」のフォントサイズ設定をカスタマイズする
さっそく見ていきましょー🐥
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
-
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
インフォトップ ワードプレステーマ売上
第１位※
すごいもくじLITE
の限定特典キャンペーンも実施中！！！
※2020年度Infotop売上及びInfotop Affidemy
Contents
AFFINGER6「記事タイトル＆見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法を初心者向けに解説【ACTION／WordPressブログ】
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
見出しタグ（hx）/ テキスト
というタブをクリックします
ACTION AFFINGER6「記事タイトル」の色・デザイン設定をカスタマイズする方法
「カスタマイズ」設定画面の…
見出しタグ（hx）/ テキスト
というタブを開いたら、そのなかの左側一覧から…
↑ こちらの「記事タイトル」というタブをクリックしましょう
ACTION AFFINGER6では、初期状態で…
↑ このような記事タイトルの色・デザインに設定されており、まずは「デザイン設定」を…
↑ こちらの各種項目でカスタマイズします
今回は例として、このなかの…
- テキストを中央寄せ
という項目のみ、「チェックあり」に変更してみますね
画面の中央に表示されている「プレビュー」エリアで任意の記事ページ（例：Hello world!）を開くと、「実際の画面上でどう変更されるのか？」を確認しながら設定することができます
「デザイン」を設定できたら、つづいて同じ設定画面内に表示されている…
↑ こちらの項目で、今度は「色設定」をカスタマイズしましょう
ここでは例として…
- 文字色
という項目のみ、 #515151（黒に近いグレー） という色に変更してみます
一通り設定できたら、左上の「公開」を忘れずにクリックして、「記事タイトル」の基本的なカスタマイズは完了です
プレビューで確認してみると…
↑ このような記事タイトルの色・デザインになりました🐥
関連
記事タイトルとともに記事の冒頭エリアに表示される「アイキャッチ画像の設定方法」や、「記事タイトルとアイキャッチ画像の位置を逆転させる方法」はこちらをどうぞ ↓
-
AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ACTION AFFINGER6「見出し（H2・H3・H4…）」の色・デザイン設定をカスタマイズする方法
さきほどの「記事タイトル」と同じく、まずは「カスタマイズ」設定画面の…
見出しタグ（hx）/ テキスト
というタブを開き、今度はそのなかの左側一覧から…
↑「H2タグ～H5タグ」までの各種タブから、カスタマイズしたい任意の「見出しタイプ」を選択しましょう
関連
見出しタイプ【H2・H3・H4…】をどう使い分ければいいかわからない場合は、こちらをどうぞ ↓
-
【2022年】WordPressの見出しとは？作り方と「H1・H2・H3…」の使い分けを初心者向けに解説【ブログ記事の「階層」を作る】
続きを見る
ACTION AFFINGER6では、初期状態で…
↑ このような見出し「H2」の色・デザインになっていますが、さきほどの「記事タイトル」と同じ要領で、任意の設定にカスタマイズできます
今回は例として、まずデザインについては…
- センターラインに変更
という項目のみ「チェックあり」に変更し、また色については…
↑ このような配色にしてみます（参考までに、カラーコードは下記の通りです）
- 文字色 → #523634
- 背景色 → #ffffff
- 背景色（グラデーション上部） → デフォルトの空欄のまま
- ボーダー色 → #523634
- ボーダー色（サブ） → デフォルトの空欄のまま
実際の画面上で確認してみると…
↑ このような見出しになりました
あとは「H3」以降の見出しについても、上記の「記事タイトル」「H2」と同じ要領で、色・デザイン設定をカスタマイズしていくだけ
↑ 完成後の一例です
最後に、記事タイトル＆見出しの「フォントサイズ」設定について見ていきましょう🐥
ACTION AFFINGER6「記事タイトル＆見出し」のフォントサイズ設定をカスタマイズする方法
ACTION AFFINGER6における記事タイトル＆見出しの「フォントサイズ」設定は、さきほどの「色・デザイン」設定とは別の箇所からカスタマイズを行います
WordPress管理画面の左側一覧から…
AFFINGER 管理
という項目をクリックし、さらにそのなかの左側一覧から…
全体設定
というタブをクリックして開きましょう
「全体設定」タブを開くと、そのなかに…
↑「フォントのサイズ」という設定エリアがあるので、こちらで各種フォントサイズを指定していけばOKです🐥
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
”全８章” の総合TOPページです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる！
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬！
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測！
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^