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

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

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

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

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

例えば…

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

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

↑ この部分のこと

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

つまり…

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

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

5分もかからないよ

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

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

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

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

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

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

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

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

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

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

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

この色設定の変更は…

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

試しに…

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

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

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

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

こちらも試しに…

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

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

それ以外にも例えば…

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

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

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

さらにさらに…

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

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

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

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

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

↑ 配色は、この通りです

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

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

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

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

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

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

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

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

おしまい♪

あずき🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

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

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