広告 WORDPRESS

【2023年】AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.2】

AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.2】
 

専業ブロガー6年目のあずき猫です

 

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

サイトタイトルの文字色

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

 



 

まずWordPressにおける「サイトタイトル」とは、ブログのヘッダー(=最上部)エリアに表示される…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 top-01

↑ こちらの、「ブログ全体のタイトル名」を指します

 

で、具体的には…

  • PC画面用
  • スマホ画面用

で、個別にそれぞれカスタマイズしていく形です

 

ちなみに今回の設定では、この「サイトタイトル」とセットで表示される…

キャッチフレーズ

についても、サイトタイトルにあわせて文字色が変更されます

キャッチフレーズは、上画像だと「Just another…」の部分だね!
 

ということで、さっそく見ていきましょー🐥

 

補足

サイトタイトル&キャッチフレーズにおける「そのほかのカスタマイズ設定」については…

WordPress管理画面 > AFFINGER管理(画面の左下!) > 「ヘッダー」タブ

のページにて行えます(例:「サイト名とキャッチフレーズを上下反対にする」など)

 

なお、サイトタイトル&キャッチフレーズの表示を「中央揃え」にするには、同じく上記の「ヘッダー」タブ内から…

  1. 「ヘッダーを分割しない」という項目にチェックを入れて、右上の「Save」で設定を一旦保存!
  2. 同ページの「ヘッダーエリアをセンタリング」が選択可能になるので、チェックを入れて再度「Save」!

という手順を行えばOKです(画像付きの解説は、こちらをどうぞ ↓ )

AFFINGER6「サイトタイトル位置設定」のカスタマイズ設定方法。中央揃えに【ワードプレスブログ完全初心者ガイド/第6章/No.3】
【2023年】AFFINGER6「サイトタイトル位置設定」のカスタマイズ設定方法。中央揃えに【ワードプレスブログ完全初心者ガイド/第6章/No.3】

続きを見る

 

関連

「そもそもサイトタイトル名って、どうやって変更するの?」という場合は、こちらから ↓

WordPressサイトタイトル(ブログ名)の変更方法を初心者向けに優しく解説【キャッチフレーズ(サブタイトル)設定も】
WordPressサイトタイトル(ブログ名)の変更方法を初心者向けに優しく解説【キャッチフレーズ(サブタイトル)設定も】

続きを見る

 

【2023年】AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.2】

WordPress ヘッダー b-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

続きを見る

 

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

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 1-01

↑ 外観 > カスタマイズ をクリックし、さらに…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 1-02

↑「ロゴ画像 / サイトのタイトル」というタブをクリックしましょう

 

「ロゴ画像 / サイトのタイトル」タブを開くと、そのなかに…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 1-03-a

↑「サイトタイトルとキャッチフレーズの文字色」という項目があるので、こちらで任意の文字色にカスタマイズする形です

 

ただし!

 

こちらはあくまで【PC画面用】の設定項目なので、【スマホ画面用】の文字色についてはまた別で設定する必要があります

スマホ画面用も、このあとすぐ見ていくよ!
 

今回は例として、【PC画面用】の文字色を…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 1-03-b

↑ こちらの #515151(黒に近いグレー) に設定してみます

 

画面中央のプレビューで確認してみると…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 1-04

↑ このように、サイトタイトルとキャッチフレーズの文字色が変更されました

特にヘッダー背景色を「白」とかにしてる場合、文字色も同じ「白」のままだと隠れちゃうから変える必要があるよね
 
 

一方で【スマホ画面用】については、同じ設定画面のすぐ下にある…

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法 1-05

↑「スマホヘッダーのタイトル色」という項目で設定できます

 

ということで…

 

最後に左上の「公開」ボタンをクリックしたら、「サイトタイトルの文字色設定」のカスタマイズは完了です🐥

お疲れさま!
 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

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

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS