今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「ウィジェット」の色設定
をカスタマイズする手順
についてご紹介していきたいと思います
まず「ウィジェット」とは、ブログのサイドバーなどに…
- カテゴリー一覧
- コメント
- 最近の投稿
といった色々なメニューを、任意で設置できるツールの総称
例えば…
↑ 右側サイドバーのオレンジで囲ってるとこが、ウィジェットです
で、肝心の「ウィジェットの色設定」とは、設置したウィジェットごとの…
↑ この部分のこと
つまり…
- 任意で名づけた「ウィジェットタイトル」の色
- ボーダー（横線）などのデザイン色
におけるカスタマイズ設定ですね
このカスタマイズは、「WING（AFFINGER5）」だと超簡単です
それではさっそく見ていきましょー🐥
当ブログのWordPress環境
- 使用してるテーマ：WING（AFFINGER5）
- 使用してるエディタ：旧エディタ（クラシックエディタ）
- 使用してるプラグイン：↓ の記事ですべて公開してます
この記事を書いた人
【ウィジェット編】WING AFFINGER5で、ブログの「色設定」をカスタマイズする手順
それではカスタマイズ手順です
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「各テキストとhタグ（見出し）」という項目をクリックします
↑ つづいて、「ウィジェットタイトル（サイドバー）」をクリックします
↑ ウィジェット設定の画面が開きました
画面右側のプレビューを見てもわかる通り、初期設定ではウィジェットタイトルとデザインの色が…
↑ こんな水色に設定されてます
この色設定の変更は…
↑ この、「文字色」「背景色」「背景色（グラデーション（上部）」「ボーダー色」「ボーダー色（サブ）」で行います
試しに…
↑ こんな感じの「ネイビー系」ベースに変えてみます。 右側のプレビューを見ると…
↑ 色はもちろんですが、ボーダー（横線）がグラデーションになりました
これは、上記の「ボーダー色（サブ）」という項目をホワイトにしたのと…
↑ そもそもデザインの種類が、初期設定だと「グラデーションアンダーライン」というパターンになってるため
こちらも試しに…
↑「2色アンダーラインに変更」という項目を選んでみると…
↑ 左と右で、くっきり2色にわかれました
それ以外にも例えば…
↑「囲みドットデザインに変更」というパターンを選んで、さらに…
↑「文字色」をホワイト、「背景色」と「ボーダー色」をネイビー系にして、「ボーダー色（サブ）」のみホワイトにすると…
↑ こんなボックス型のデザインにもできます
さらにさらに…
↑ この「背景や吹き出しの角を丸くする」にチェックを入れると…
↑ ボックスデザインの四隅が丸くなりました
この要領で、デザインパターンとそのカラーを色々試してみましょう
参考までに、僕のこの新しいサブブログでは…
↑ デザインは、初期設定のままの「グラデーションアンダーライン」
↑ 配色は、この通りです
このネイビー系の正確なカラーコードは、「#1001b2」を使ってます
また、ホワイトは真っ白にあたる「#ffffff」です
またプレビュー画面をチェックしてみると…
↑ こんな感じになりました
カスタマイズってどうしてもあれこれ装飾を加えたくなりますが、個人的には極力シンプルにした方がスマートな見映えになるかなと思ってます
改めてブログの全体感を見てみると…
↑ こんな感じになりました
今回の「ウィジェットの色設定」の解説は、これで以上です
お疲れさまでした♪
あずき🐥
この記事を書いた人