WORDPRESS

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

AFFINGER5で「本文&リンクテキスト」の色設定をカスタマイズする手順 アイキャッチ



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

「本文&リンクテキスト」
の色設定をカスタマイズする手順

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

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

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

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

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

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

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

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

affinger-color-setting-main-text-20200219_2-01

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

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

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

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

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

  • 本文テキスト
  • リンクテキスト

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

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

3分もかからないよ

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

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

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

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

affinger-color-setting-main-text-20200219_top-01

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

affinger-color-setting-main-text-20200219_top-02

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

affinger-color-setting-main-text-20200219_top-03

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

ここから…

  • 本文テキスト
  • 内部リンク

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

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

pc-work-202001_01

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

affinger-color-setting-main-text-20200219_1-01

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

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

affinger-color-setting-main-text-20200219_1-02

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

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

affinger-color-setting-main-text-20200219_1-03

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

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

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

affinger-color-setting-main-text-20200219_1-04

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

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

affinger-color-setting-main-text-20200219_1-05

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

ちなみに…

affinger-color-setting-main-text-20200219_1-06

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

affinger-color-setting-main-text-20200219_1-07

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

affinger-color-setting-main-text-20200219_1-08

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

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

affinger-color-setting-main-text-20200219_1-09

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

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

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

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

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

affinger-color-setting-main-text-20200219_1-10

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

affinger-color-setting-main-text-20200219_1-11

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

affinger-color-setting-main-text-20200219_1-12

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

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

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

画面はこのままでOK!

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

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

pc-work-202001_02

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

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

WordPress管理画面 > 外観 > カスタマイズ
> 各テキストとhタグ(見出し) > テキスト色一括変更

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

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

affinger-color-setting-main-text-20200219_2-01

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

affinger-color-setting-main-text-20200219_2-02

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

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

で、僕はいつも…

affinger-color-setting-main-text-20200219_2-03

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

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

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

affinger-color-setting-main-text-20200219_2-04

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

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

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

お疲れさまでした♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ