AFFINGER5で「本文＆リンクテキスト」の色設定をカスタマイズする手順【WordPressブログ】

今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…

をご紹介していきたいと思います

まず「本文テキスト」について…

「本文テキスト」の色って、普通に考えると「真っ黒」なイメージですよね

でも実際には、「真っ黒」よりも「グレー味を帯びたブラック」の方が、視覚的に柔らかみが出て見やすいかなと思ってます

実際に、グレー寄りなブラックを使ってるサイトはよく見かける

個人的におすすめなカラーコードは「#515151」で、今まさに見ていただいてる文章もまさにその色を使ってます

次に「リンクテキスト」について…

リンクテキストとは、そのテキストをクリックすることで指定のURLページへジャンプできる仕様のこと

↑ この青いテキスト部分のこと

で、この「リンクテキスト」の色は、一般的には「ブルー系」なイメージだと思います

ただ「ブルー」のなかでも、「クリック率が高くなる」とされる定番の色味みたいなのが、実は大体もう決まってます

なかでも有名なカラーコードの1つは、　#0044cc　です

ということで今回は、そんな…

それぞれにおける、初期設定のカスタマイズ手順を解説していきます

ちなみに「WING（AFFINGER5）」の場合、このカスタマイズは超簡単です

3分もかからないよ

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

【本文テキスト＆リンクテキスト編】WING AFFINGER5における「色設定」のカスタマイズ手順

まずは、WordPressのカスタマイズ画面を開きましょう（下記手順です）

↑ WordPress管理画面　＞　外観　＞　カスタマイズ　をクリックします

↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「各テキストとhタグ（見出し）」という項目をクリックします

↑ つづいて、「テキスト色一括変更」をクリックします

ここから…

それぞれの色設定をカスタマイズしていきます

「本文テキスト」の色設定

さきほどのステップで「テキスト色一括変更」の画面を開けたら…

↑ 画面中央のプレビューから、投稿済みの記事があればクリックして開きましょう

投稿記事がなければ、ここはスルーでOK！

↑ 記事のプレビュー画面が開けました。 初期設定では、画像のような「真っ黒」系になってます

この本文テキスト色を変更する場所は…

↑ この「記事内のテキストなど」という項目です

ここで好きなカラーを選ぼう

試しに壱度、露骨に目立つカラーにしてみます

↑ こんな蛍光グリーンです

中央のプレビュー画面を見てみると…

↑ グリーンに変わった場所が、この項目で反映されるエリアです

ちなみに…

↑ この「範囲を広げる」という項目にチェックを入れると…

↑ 一番上の「記事タイトル」を対象にできるだけでなく…

↑ このように、TOPページの記事一覧エリアまで反映させることができます

参考までに、僕が実際に使ってる色設定は下記です

↑ まず本文テキストで使ってるおすすめなカラーは、「グレー味を帯びたブラック」です

具体的には、「#515151」というカラーコード

そして、さきほどご紹介した「範囲を広げる」にもチェックを入れます

これで、記事タイトルとか記事一覧のエリアも変更される！

改めてプレビューで確認すると…

↑ こんな感じになりました。 画像では少しわかりづらいですが、ちょっと優しめなブラックに変わりました

↑ 記事一覧にも、同じカラーが反映されてます

↑ 設定できたら、画面上部の　公開　をクリックして設定を保存しましょう

これで、本文テキスト色のカスタマイズはOKです

つづいて、「リンクテキスト」の色設定も見ていきます

画面はこのままでOK！

「リンクテキスト」の色設定

さきほどの「テキスト色一括変更」から、同じ画面で設定していきます

一度閉じてしまった場合は…

これでまた同じ設定画面に戻れます

ちなみに「リンクテキスト」の色は、初期設定だと…

↑ こんな感じ。 このカラーを…

↑「記事内リンク色」という項目で、好きな色に指定しましょう

一般的なのは、やっぱりブルー

で、僕はいつも…

↑ この色味を使ってます。 具体的には「#0044cc」というカラーコード

「クリック率が高くなる」とされる、人気なリンクテキスト色の1つ

プレビューで確認すると…

↑ こんな感じになりました

設定できたら、また画面上部の「公開」をクリックすれば完了です

今回の「本文テキスト＆リンクテキストの色設定」の解説は、これで以上となります

お疲れさまでした♪

あずき🐥