WORDPRESS

AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順【WordPressブログ】

AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順 アイキャッチ



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

「箇条書きボックス」
の色設定をカスタマイズする手順

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

まず、「WING AFFINGER5」における箇条書きボックスとは、例えば…

affinger-color-setting-bullet-point-20200225_1-05

↑ こちらの「チェックリスト」。 もしくは…

affinger-color-setting-bullet-point-20200225_2-05

↑ こちらの「数字リスト」。 もしくは…

affinger-color-setting-bullet-point-20200225_3-05

↑ こちらの「こんな方におすすめ」などです

箇条書きボックス自体は、ほかにもいくつかあるよ

今回は、個人的に愛用してる上記「3パターン」の箇条書きボックスについて、色設定の方法を解説していきます

WING(AFFINGER5)」なら、これらのカスタマイズは超簡単です

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

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

【箇条書きボックス編】AFFINGER5における色設定のカスタマイズ手順

まずは、カスタマイズ画面を開きましょう(下記手順です)

affinger-color-setting-bullet-point-20200225_top-01

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

affinger-color-setting-bullet-point-20200225_top-02

↑ 左側のメニュー一覧から、「オプションカラー」をクリックしましょう

「オプションカラー」を開いたら、ここからは…

  • チェックリスト
  • 数字リスト
  • こんな方におすすめ

この3つにわけて、それぞれのカスタマイズ手順を見ていきます🐥

まずは「チェックリスト」から!

「チェックリスト」の色設定

pc-work-202001_01

さきほどの手順で「オプションカラー」画面を開けたら…

affinger-color-setting-bullet-point-20200225_1-01

↑ 左側のメニュー一覧から、「チェックリスト」をクリックします

「チェックリスト」画面を開けたら、色設定を行うのは…

affinger-color-setting-bullet-point-20200225_1-02

↑ こちらの「チェック色」~「囲い背景色」までの項目です

初期設定では…

affinger-color-setting-bullet-point-20200225_1-03

↑ こんな風に、ブルー&ホワイトの配色になってます

今回は参考例として、僕が実際に愛用してる…

affinger-color-setting-bullet-point-20200225_1-04

↑ こんな配色にしてみました

具体的なカラーコードは…

  • チェック色 = #ffffff(真っ白)
  • チェック背景色 = #ffb049(オレンジ系)
  • 囲いボーダー色 = #e0e0e0(ライトグレー系)
  • 囲い背景色 = デフォルトのまま(無色)

この通りです

「囲いボーダー色」っていうのは、外枠のボックスのこと!

ちなみに、「背景色の角を丸くする」にチェックを入れると、外枠の角が丸くできます

プレビューで見てみると…

affinger-color-setting-bullet-point-20200225_1-05

↑ こんな感じです

「囲い背景色」にも色を付ければ、ボックスのなか全体をその色の網掛けにできるよ

設定できたら…

affinger-color-setting-bullet-point-20200225_1-06

↑ 画面上部の 公開 をクリックして、その設定を保存しましょう

これで、「チェックリスト」の色設定はOKです

つづいて「数字リスト」の色設定を見ていきます🐥

同じく上部の  をクリックして、1つ前の画面に戻りましょう

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

「数字リスト」のカラー設定

pc-work-202001_02

さきほどの「チェックリスト」画面から、上部の  をクリックして1つ前の画面に戻れたら…

affinger-color-setting-bullet-point-20200225_2-01

↑ 左側のメニュー一覧から、「数字リストのカラー」をクリックします

「数字リスト」画面が開けたら、色設定を行うのは…

affinger-color-setting-bullet-point-20200225_2-02

↑ この「ナンバー色」~「囲い背景色」までの項目です

初期設定では…

affinger-color-setting-bullet-point-20200225_2-03

↑ さきほどの「チェックリスト」と同じ、ブルー系に設定されてます

こちらも、参考例として僕が愛用してる…

affinger-color-setting-bullet-point-20200225_2-04

↑ こちらの配色にしてみたいと思います

さっきの「チェックリスト」とまったく同じ配色!

プレビューで確認すると…

affinger-color-setting-bullet-point-20200225_2-05

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

設定できたら、また画面上部の 公開 をクリックして設定を保存しましょう

これで、「数字リスト」の色設定もOK!

最後に、「こんな方におすすめ」の色設定を見ていきます🐥

また画面上部の  をクリックして、1つ前の画面に戻りましょう

「こんな方におすすめ」の色設定

pc-work-202001_03

さきほどの「数字リストのカラー」画面から、また上部の < をクリックして1つ前の画面に戻れたら…

affinger-color-setting-bullet-point-20200225_3-01

↑ 左側メニュー一覧から、「こんな方におすすめ」をクリックします

「こんな方におすすめ」画面を開けたら、色設定を行うのは…

affinger-color-setting-bullet-point-20200225_3-02

↑ こちらの「タイトル色」~「背景色」までの項目です

初期設定では…

affinger-color-setting-bullet-point-20200225_3-03

↑ こんな感じになってます

こちらも参考例として、僕が愛用してる…

affinger-color-setting-bullet-point-20200225_3-04

↑ こんな配色にしてみました

具体的なカラーコードは…

  • タイトル色 = #515151(ダークグレー系)
  • 枠線とタイトル下線 = #e0e0e0(ライトグレー系)
  • ulリストのチェックアイコン = #ffb049(オレンジ系)
  • その他の項目 = デフォルトのまま

この通りです

「タイトル下線を非表示」にチェックを入れると、1番上のタイトル部分の下線を消せるよ!

プレビューでチェックしてみると…

affinger-color-setting-bullet-point-20200225_3-05

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

これで、「こんな方におすすめ」の色設定もOK!

今回の「箇条書きボックスの色設定」の解説は、これで以上となります

お疲れさまでした♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ