今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「本文＆リンクテキスト」
の色設定をカスタマイズする手順
をご紹介していきたいと思います
まず「本文テキスト」について…
「本文テキスト」の色って、普通に考えると「真っ黒」なイメージですよね
でも実際には、「真っ黒」よりも「グレー味を帯びたブラック」の方が、視覚的に柔らかみが出て見やすいかなと思ってます
個人的におすすめなカラーコードは「#515151」で、今まさに見ていただいてる文章もまさにその色を使ってます
次に「リンクテキスト」について…
リンクテキストとは、そのテキストをクリックすることで指定のURLページへジャンプできる仕様のこと
↑ この青いテキスト部分のこと
で、この「リンクテキスト」の色は、一般的には「ブルー系」なイメージだと思います
ただ「ブルー」のなかでも、「クリック率が高くなる」とされる定番の色味みたいなのが、実は大体もう決まってます
なかでも有名なカラーコードの1つは、 #0044cc です
ということで今回は、そんな…
- 本文テキスト
- リンクテキスト
それぞれにおける、初期設定のカスタマイズ手順を解説していきます
ちなみに「WING（AFFINGER5）」の場合、このカスタマイズは超簡単です
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
【本文テキスト＆リンクテキスト編】WING AFFINGER5における「色設定」のカスタマイズ手順
まずは、WordPressのカスタマイズ画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「各テキストとhタグ（見出し）」という項目をクリックします
↑ つづいて、「テキスト色一括変更」をクリックします
ここから…
- 本文テキスト
- 内部リンク
それぞれの色設定をカスタマイズしていきます
「本文テキスト」の色設定
さきほどのステップで「テキスト色一括変更」の画面を開けたら…
↑ 画面中央のプレビューから、投稿済みの記事があればクリックして開きましょう
↑ 記事のプレビュー画面が開けました。 初期設定では、画像のような「真っ黒」系になってます
この本文テキスト色を変更する場所は…
↑ この「記事内のテキストなど」という項目です
試しに壱度、露骨に目立つカラーにしてみます
↑ こんな蛍光グリーンです
中央のプレビュー画面を見てみると…
↑ グリーンに変わった場所が、この項目で反映されるエリアです
ちなみに…
↑ この「範囲を広げる」という項目にチェックを入れると…
↑ 一番上の「記事タイトル」を対象にできるだけでなく…
↑ このように、TOPページの記事一覧エリアまで反映させることができます
参考までに、僕が実際に使ってる色設定は下記です
↑ まず本文テキストで使ってるおすすめなカラーは、「グレー味を帯びたブラック」です
具体的には、「#515151」というカラーコード
そして、さきほどご紹介した「範囲を広げる」にもチェックを入れます
改めてプレビューで確認すると…
↑ こんな感じになりました。 画像では少しわかりづらいですが、ちょっと優しめなブラックに変わりました
↑ 記事一覧にも、同じカラーが反映されてます
↑ 設定できたら、画面上部の 公開 をクリックして設定を保存しましょう
これで、本文テキスト色のカスタマイズはOKです
つづいて、「リンクテキスト」の色設定も見ていきます
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
「リンクテキスト」の色設定
さきほどの「テキスト色一括変更」から、同じ画面で設定していきます
一度閉じてしまった場合は…
WordPress管理画面 ＞ 外観 ＞ カスタマイズ
＞ 各テキストとhタグ（見出し） ＞ テキスト色一括変更
これでまた同じ設定画面に戻れます
ちなみに「リンクテキスト」の色は、初期設定だと…
↑ こんな感じ。 このカラーを…
↑「記事内リンク色」という項目で、好きな色に指定しましょう
で、僕はいつも…
↑ この色味を使ってます。 具体的には「#0044cc」というカラーコード
プレビューで確認すると…
↑ こんな感じになりました
設定できたら、また画面上部の「公開」をクリックすれば完了です
今回の「本文テキスト＆リンクテキストの色設定」の解説は、これで以上となります
お疲れさまでした♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^