WORDPRESS

【スマホ用も】AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

【スマホ用も】AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】
 

専業ブロガー5年目のあずきです🐥

 

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

サイトタイトルの文字色

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

 



 

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

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

↑ こちらの【ブログ全体におけるタイトル名】を指します

 

で、具体的には…

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

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

 

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

キャッチフレーズ

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

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

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

 

補足

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

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

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

 

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

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

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

AFFINGER6「サイトタイトルの位置設定」カスタマイズ設定方法。中央揃えにする【ワードプレスブログ「完全初心者」ガイド】
AFFINGER6「サイトタイトルの位置設定」カスタマイズ設定方法。中央揃えにする【ワードプレスブログ「完全初心者」ガイド】

続きを見る

 

関連

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

WordPressサイトタイトル(ブログ名)の変更方法。キャッチフレーズも【ワードプレスブログ「完全初心者」ガイド】
【2022年】WordPressサイトタイトル(ブログ名)の変更方法。キャッチフレーズも【ワードプレスブログ「完全初心者」ガイド】

続きを見る

 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

【スマホ用も】AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

WordPress ヘッダー b-01

注意

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

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数の多さから「情報もググりやすい」のでおすすめです)

 

そのため、使用されているWordPress環境が…

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

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

 

なお「Classic Editor」の有効化手順は、下記のステップとなります(一瞬です)

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

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

WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】
WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】

続きを見る

 

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

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

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

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

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

 

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

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

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

 

ただし!

 

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

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

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

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

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

 

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

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

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

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

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

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

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

 

ということで…

 

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

お疲れさま!
 
 

人気記事

 

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

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

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

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS