AFFINGER5【簡易チェックのカラー変更とカスタマイズ】

AFFINGER画像 AFFINGER5の記事装飾【簡易チェック】のカラー変更とカスタマイズの解説です。

詳しい使い方と、記事内で目を惹くデザインへの変更方法を紹介していきます。

こんな人のお役に立てる記事です。

小豆

簡易チェックのカラーって、変更できないのかな？
デフォルトのあまり目立たない状態をなんとかしたいんだよなぁ。

【AFFINGER5】簡易チェックのカラー変更とカスタマイズ
簡易チェックのカラー変更と使い方
さらに目立たせるためのカスタマイズ【5種類】
まとめ：簡易チェックはめちゃくちゃ使える

【AFFINGER5】簡易チェックのカラー変更とカスタマイズ

AFFINGER5には、使いきれないほど豊富な記事装飾が用意されていますよね。

ちなみに、チェックマークだけでもその数9種類。

関連AFFINGER5で表示できる9種類の【チェックマーク】と使い方

今回は、その中から【簡易チェック】をピックアップしてカスタマイズしていきます。

で、早速ですが、デフォルトの状態の【簡易チェック】のデザインがこれ。

簡易チェックデザイン

小豆

うーん。
悪くなないんだけど、イマイチ記事内で目立たないんだよなぁ。

ちょっとデザインがシンプル過ぎるのかもね。
カラーを変更してみたら、しっくりくるのかも。

大福

というわけで、やってみました。

サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト

チェックカラーを変えただけなのに、パッと見の印象がだいぶ変わりましたね。

これなら、ごちゃごちゃした記事内でも目立ちそうです。

要点をまとめる時なんかに、大活躍してくれそうですね。

簡易チェックのカラー変更と使い方

簡易チェックの「カラー変更」と「使い方」をそれぞれ解説していきます。

カラー変更

カスタマイズメニューを開く
カラーを変更

step
1カスタマイズメニューを開く

カスタマイズメニュー

WordPressメニュー　→　外観　→　カスタマイズ

チェックボックス

オプションカラー　→　リスト（数字・チェック/ボックスタイプ）　→　チェック（ボックスタイプ）

step
2カラーを変更

カラー設定

チェック色、チェックの枠色を任意の色に設定

ここで行った設定は、「簡易チェック」だけでなく「チェックボックス」にも反映されます。

メモ

以下の設定は、「簡易チェック」ではなく、「チェックボックス」のみに反映される設定です。

チェック（ボックスタイプ）サイズ微調整用
チェック（ボックスタイブ）のデザインをチェックのみにする

大福

これで、簡易チェックのカラー変更の設定は終わり。
続いて、使い方を解説していくよ。

簡易チェックの使い方

テキストを入力
簡易チェック装飾を選択
番号無しリストをクリック

step
1テキストを入力

テキストを入力

簡易チェック装飾を行いたいテキストを入力

step
2簡易チェック装飾を選択

装飾を選択

テキストを選択した状態で、

スタイル　→　リスト　→　簡易チェックをクリック

step
3番号無しリストをクリック

番号無しリストをクリック

番号無しリストをクリックで、簡易チェック装飾が完成

さらに目立たせるためのカスタマイズ【5種類】

【簡易チェック】をさらに記事内で目立たせるために、異なる5パターンのカスタマイズをしてみました。

カスタマイズ

ブラックデザイン
黒板デザイン
POPなデザイン
ミニふきだしとの組み合わせ
見出し付きボックスとの組み合わせ

枠のデザインは、コピペで使えるよ。

大福

ブラックデザイン

サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト

囲み枠のショートコード

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#212121" bgcolor="#424242" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

ここにテキスト

[/st-mybox]

テキスト色を#ffffff（白）に設定しています。

黒板デザイン

サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト

囲み枠のショートコード

[st-mybox title="" fontawesome="" color="#ffffff" bordercolor="#6D4C41" bgcolor="#2E7D32" borderwidth="5" borderradius="0" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

ここにテキスト

[/st-mybox]

テキスト色を#ffffff（白）に設定しています。

POPなデザイン

サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト

囲み枠のショートコード

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#907b6e" bgcolor="#ede4cd" borderwidth="3" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

ここにテキスト

[/st-mybox]

ミニふきだしとの組み合わせ

ふきだしテキスト

サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト

囲み枠のショートコード

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f44336" color="#fff" margin="0 0 -10px 0" radius="" position="" myclass="" add_boxstyle=""]ふきだしテキスト[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

ここにテキスト

[/st-mybox]

見出し付きボックスとの組み合わせ

見出しテキスト

サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト

囲み枠のショートコード

[st-midasibox title="見出しテキスト" fontawesome="" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold" myclass=""]

ここにテキスト

[/st-midasibox]