今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「ウィジェット」の色設定をカスタマイズする手順
についてご紹介していきたいと思います
まず「ウィジェット」とは、ブログのサイドバーなどに…
- カテゴリー一覧
- プロフィール
といった、色々なメニューを設置できるツールの総称
例えば…
↑ 右側サイドバーのオレンジで囲ってるとこが、ウィジェットです
で、肝心の「ウィジェットの色設定」とは、設置したウィジェットごとの…
↑ この部分のこと
つまり…
- 任意で名づけた「ウィジェットタイトル」の色
- ボーダー（横線）などのデザイン色
におけるカスタマイズ設定ですね
このカスタマイズは、「WING（AFFINGER5）」だと超簡単です
それではさっそく見ていきましょー🐥
ちなみに
サイドバーに「カテゴリー一覧」を入れる方法はこちら ↓
-
【AFFINGER5】ブログのサイドバーに、「カテゴリー一覧」を設置する方法【WordPressウィジェット】
続きを見る
サイドバーに「プロフィール」などのテキストや画像を入れる方法はこちら ↓
-
【AFFINGER5】ブログのサイドバーに、「プロフィール」などテキストや画像を設置する方法【WordPressウィジェット】
続きを見る
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
今回の記事はこちらの章に属しています
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^
【ウィジェット編】WING AFFINGER5で、ブログの「色設定」をカスタマイズする手順
それではカスタマイズ手順です
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「各テキストとhタグ（見出し）」という項目をクリックします
↑ つづいて、「ウィジェットタイトル（サイドバー）」をクリックします
↑ ウィジェット設定の画面が開きました
画面右側のプレビューを見てもわかる通り、初期設定ではウィジェットタイトルとデザインの色が…
↑ こんな水色に設定されてます
この色設定の変更は…
↑ この、「文字色」「背景色」「背景色（グラデーション（上部）」「ボーダー色」「ボーダー色（サブ）」で行います
試しに…
↑ こんな感じの「ネイビー系」ベースに変えてみます。 右側のプレビューを見ると…
↑ 色はもちろんですが、ボーダー（横線）がグラデーションになりました
これは、上記の「ボーダー色（サブ）」という項目をホワイトにしたのと…
↑ そもそもデザインの種類が、初期設定だと「グラデーションアンダーライン」というパターンになってるため
こちらも試しに…
↑「2色アンダーラインに変更」という項目を選んでみると…
↑ 左と右で、くっきり2色にわかれました
それ以外にも例えば…
↑「囲みドットデザインに変更」というパターンを選んで、さらに…
↑「文字色」をホワイト、「背景色」と「ボーダー色」をネイビー系にして、「ボーダー色（サブ）」のみホワイトにすると…
↑ こんなボックス型のデザインにもできます
さらにさらに…
↑ この「背景や吹き出しの角を丸くする」にチェックを入れると…
↑ ボックスデザインの四隅が丸くなりました
この要領で、デザインパターンとそのカラーを色々試してみましょう
参考までに、僕のこの新しいサブブログでは…
↑ デザインは、初期設定のままの「グラデーションアンダーライン」
↑ 配色は、この通りです
このネイビー系の正確なカラーコードは、「#1001b2」を使ってます
また、ホワイトは真っ白にあたる「#ffffff」です
またプレビュー画面をチェックしてみると…
↑ こんな感じになりました
カスタマイズってどうしてもあれこれ装飾を加えたくなりますが、個人的には極力シンプルにした方がスマートな見映えになるかなと思ってます
改めてブログの全体感を見てみると…
↑ こんな感じになりました
おしまい♪
あずき🐥
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならプラグイン「すごいもくじLITE」を期間限定で配布中！
※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
今回の記事はこちらの章に属しています
全9章のTOPです
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^