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