WORDPRESS

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法を初心者向けに解説【ACTION/WordPressブログ】

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法
 

あずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「記事タイトル&見出し」の色・デザイン・フォントサイズ設定

をカスタマイズする方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

実際のブログ画面上で見ると…

 

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 top-01

 

↓(設定後の一例)

 

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 top-02

 

↑ 例えばこのような感じですね

記事タイトルは、上の例だと「Hello spring!」のとこだね!
 

ということで、今回は3つのステップで丁寧に解説していきます

  1. 「記事タイトル」の色・デザイン設定をカスタマイズする
  2. 「見出し(H2・H3・H4…)」の色・デザイン設定をカスタマイズする
  3. 「記事タイトル&見出し」のフォントサイズ設定をカスタマイズする

さっそく見ていきましょー🐥

 

 

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法を初心者向けに解説【ACTION/WordPressブログ】

 

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

見出しタグ(hx)/ テキスト

というタブをクリックします

ここから、「記事タイトル・見出し」の順にカスタマイズしていくよ!
 

ACTION AFFINGER6「記事タイトル」の色・デザイン設定をカスタマイズする方法

WordPress ヘッダー c-01

 

「カスタマイズ」設定画面の…

見出しタグ(hx)/ テキスト

というタブを開いたら、そのなかの左側一覧から…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-1-01

↑ こちらの「記事タイトル」というタブをクリックしましょう

 

ACTION AFFINGER6では、初期状態で…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-1-02

↑ このような記事タイトルの色・デザインに設定されており、まずは「デザイン設定」を…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-1-03

↑ こちらの各種項目でカスタマイズします

 

今回は例として、このなかの…

  • テキストを中央寄せ

という項目のみ、「チェックあり」に変更してみますね

 

画面の中央に表示されている「プレビュー」エリアで任意の記事ページ(例:Hello world!)を開くと、「実際の画面上でどう変更されるのか?」を確認しながら設定することができます

 

「デザイン」を設定できたら、つづいて同じ設定画面内に表示されている…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-1-04

↑ こちらの項目で、今度は「色設定」をカスタマイズしましょう

 

ここでは例として…

  • 文字色

という項目のみ、 #515151(黒に近いグレー) という色に変更してみます

 

一通り設定できたら、左上の「公開」を忘れずにクリックして、「記事タイトル」の基本的なカスタマイズは完了です

 

プレビューで確認してみると…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-1-05

↑ このような記事タイトルの色・デザインになりました🐥

 

関連

記事タイトルとともに記事の冒頭エリアに表示される「アイキャッチ画像の設定方法」や、「記事タイトルとアイキャッチ画像の位置を逆転させる方法」はこちらをどうぞ ↓

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法
AFFINGER6「記事ごとのアイキャッチ画像」を設定するやり方とカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

 
つづいて、「見出し」のカスタマイズ方法も見ていこう!
 

ACTION AFFINGER6「見出し(H2・H3・H4…)」の色・デザイン設定をカスタマイズする方法

WordPress ヘッダー c-02

 

さきほどの「記事タイトル」と同じく、まずは「カスタマイズ」設定画面の…

見出しタグ(hx)/ テキスト

というタブを開き、今度はそのなかの左側一覧から…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-2-01

↑「H2タグ~H5タグ」までの各種タブから、カスタマイズしたい任意の「見出しタイプ」を選択しましょう

ここでは例として、「H2タグ(見出し2)」を選んでみるよ!
 

関連

見出しタイプ【H2・H3・H4…】をどう使い分ければいいかわからない場合は、こちらをどうぞ ↓

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け
【2021年】WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分けを初心者向けに解説【ブログ記事の「階層」を作る】

続きを見る

 

ACTION AFFINGER6では、初期状態で…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-2-02

↑ このような見出し「H2」の色・デザインになっていますが、さきほどの「記事タイトル」と同じ要領で、任意の設定にカスタマイズできます

 

今回は例として、まずデザインについては…

  • センターラインに変更

という項目のみ「チェックあり」に変更し、また色については…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-2-03

↑ このような配色にしてみます(参考までに、カラーコードは下記の通りです)

  • 文字色 → #523634
  • 背景色 → #ffffff
  • 背景色(グラデーション上部) → デフォルトの空欄のまま
  • ボーダー色 → #523634
  • ボーダー色(サブ) → デフォルトの空欄のまま

実際の画面上で確認してみると…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-2-04

↑ このような見出しになりました

 

あとは「H3」以降の見出しについても、上記の「記事タイトル」「H2」と同じ要領で、色・デザイン設定をカスタマイズしていくだけ

設定がおわったら、左上の「公開」ボタンを忘れずにクリックしよう!
 

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-2-05

↑ 完成後の一例です

 

最後に、記事タイトル&見出しの「フォントサイズ」設定について見ていきましょう🐥

 

ACTION AFFINGER6「記事タイトル&見出し」のフォントサイズ設定をカスタマイズする方法

WordPress ヘッダー c-03

 

ACTION AFFINGER6における記事タイトル&見出しの「フォントサイズ」設定は、さきほどの「色・デザイン」設定とは別の箇所からカスタマイズを行います

 

WordPress管理画面の左側一覧から…

AFFINGER 管理

という項目をクリックし、さらにそのなかの左側一覧から…

全体設定

というタブをクリックして開きましょう

 

「全体設定」タブを開くと、そのなかに…

AFFINGER6「記事タイトル&見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法 1-3-01

↑「フォントのサイズ」という設定エリアがあるので、こちらで各種フォントサイズを指定していけばOKです🐥

 
 

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

-WORDPRESS