affinger-color-setting-widget-20200217_ec

WordPress

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



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

「ウィジェット」の色設定
をカスタマイズする手順

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

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

  • カテゴリー一覧
  • コメント
  • 最近の投稿

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

例えば…

affinger-color-setting-widget-20200217_sample-01

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

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

affinger-color-setting-widget-20200217_sample-02

affinger-color-setting-widget-20200217_sample-03

↑ この部分のこと

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

つまり…

  • 任意で名づけた「ウィジェットタイトル」の色
  • ボーダー(横線)などのデザイン色

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

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

5分もかからないよ

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

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

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

今回の「ウィジェットの色設定」の解説は、これで以上です

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.