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分もかからないよ

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

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

 第6章 デザイン 編          

 

About me

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

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

あずき

 

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

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

【ウィジェット編】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

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

おしまい♪

あずき🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

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

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

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

 第6章 デザイン 編          

全9章のTOPです

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

 

About me

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

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

あずき

 

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

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS