WORDPRESS

WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順【WordPressブログ】

WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順 アイキャッチ



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

「ウィジェット」の色設定をカスタマイズする手順

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

まず「ウィジェット」とは、ブログのサイドバーなどに…

  • カテゴリー一覧
  • プロフィール

といった、色々なメニューを設置できるツールの総称

例えば…

affinger-color-setting-widget-20200217_sample-01

↑ 右側サイドバーのオレンジで囲ってるとこが、ウィジェットです

で、肝心の「ウィジェットの色設定」とは、設置したウィジェットごとの…

affinger-color-setting-widget-20200217_sample-02

↑ この部分のこと

初期設定だと水色になってるとこ!

つまり…

  • 任意で名づけた「ウィジェットタイトル」の色
  • ボーダー(横線)などのデザイン色

におけるカスタマイズ設定ですね

このカスタマイズは、「WING(AFFINGER5)」だと超簡単です

5分もかからないよ

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

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

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

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第6章「デザイン」編 

About me

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

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

あずき

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

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

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

Twitter

【ウィジェット編】WING AFFINGER5で、ブログの「色設定」をカスタマイズする手順

pc-work-202001_01

それではカスタマイズ手順です

affinger-color-setting-widget-20200217_01

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

affinger-color-setting-widget-20200217_02

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

affinger-color-setting-widget-20200217_03

↑ つづいて、「ウィジェットタイトル(サイドバー)」をクリックします

affinger-color-setting-widget-20200217_04

↑ ウィジェット設定の画面が開きました

画面右側のプレビューを見てもわかる通り、初期設定ではウィジェットタイトルとデザインの色が…

affinger-color-setting-widget-20200217_sample-02

↑ こんな水色に設定されてます

この色設定の変更は…

affinger-color-setting-widget-20200217_05

↑ この、「文字色」「背景色」「背景色(グラデーション(上部)」「ボーダー色」「ボーダー色(サブ)」で行います

試しに…

affinger-color-setting-widget-20200217_06

↑ こんな感じの「ネイビー系」ベースに変えてみます。 右側のプレビューを見ると…

affinger-color-setting-widget-20200217_07

↑ 色はもちろんですが、ボーダー(横線)がグラデーションになりました

これは、上記の「ボーダー色(サブ)」という項目をホワイトにしたのと…

affinger-color-setting-widget-20200217_08

↑ そもそもデザインの種類が、初期設定だと「グラデーションアンダーライン」というパターンになってるため

こちらも試しに…

affinger-color-setting-widget-20200217_09

↑「2色アンダーラインに変更」という項目を選んでみると…

affinger-color-setting-widget-20200217_10

↑ 左と右で、くっきり2色にわかれました

それ以外にも例えば…

affinger-color-setting-widget-20200217_11

↑「囲みドットデザインに変更」というパターンを選んで、さらに…

affinger-color-setting-widget-20200217_12

↑「文字色」をホワイト、「背景色」と「ボーダー色」をネイビー系にして、「ボーダー色(サブ)」のみホワイトにすると…

affinger-color-setting-widget-20200217_13

↑ こんなボックス型のデザインにもできます

さらにさらに…

affinger-color-setting-widget-20200217_14

↑ この「背景や吹き出しの角を丸くする」にチェックを入れると…

affinger-color-setting-widget-20200217_15

↑ ボックスデザインの四隅が丸くなりました

この要領で、デザインパターンとそのカラーを色々試してみましょう

参考までに、僕のこの新しいサブブログでは…

affinger-color-setting-widget-20200217_16

↑ デザインは、初期設定のままの「グラデーションアンダーライン」

affinger-color-setting-widget-20200217_17

↑ 配色は、この通りです

このネイビー系の正確なカラーコードは、「#1001b2」を使ってます

また、ホワイトは真っ白にあたる「#ffffff」です

またプレビュー画面をチェックしてみると…

affinger-color-setting-widget-20200217_18

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

カスタマイズってどうしてもあれこれ装飾を加えたくなりますが、個人的には極力シンプルにした方がスマートな見映えになるかなと思ってます

ユーザー目線で見やすいデザインにしよう

改めてブログの全体感を見てみると…

affinger-color-setting-widget-20200217_sample-04

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

おしまい♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

 ✔ 洗練された美しいデザインと、「変幻自在」な圧巻のバリエーション!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

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

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入&導入ステップを画像つきで1から解説

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第6章「デザイン」編 

あずきのWordPressブログガイド 総合TOP 

About me

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

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

あずき

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

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

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

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ