今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「マイボックス」の種類と使い方
をご紹介していきたいと思います
まず「WING（AFFINGER5）」における「マイボックス」とは、例えば…
↑ こんなのです
いくつかの「既成パターン」から種類を選べるのはもちろん、それ以上にこのマイボックスが優れてる点が…
- 自分の好きなデザインに、色やアイコンなどをカスタマイズできること
例えば…
↑ こちらの既成パターンから…
↑ アイコンだけ別のものに変えてみたり、もしくは…
↑ 配色も、好きなカラーコードで指定したりできます
そして使い方も簡単です
それではさっそく見ていきましょー🐥
当ブログのWordPress環境
- 使用してるテーマ：WING（AFFINGER5）
- 使用してるエディタ：旧エディタ（クラシックエディタ）
- 使用してるプラグイン：↓ の記事ですべて公開してます
この記事を書いた人
Contents
AFFINGER5における「マイボックス」の種類＆使い方【カスタマイズ方法まで】
「マイボックス」の基本的な使い方【既成パターン】
まずは、「マイボックス」の基本的な使い方から🐥
例として…
↑ この選択してるテキスト（青い部分！）を、「マイボックス」で囲ってみたいと思います
テキストを選択した状態で…
↑ 画面上部の タグ をクリックし…
↑ ボックスデザイン ＞ マイボックス を開きましょう。 すると…
↑ デザインパターンがたくさん出てきます
これらが、最初から用意されてる「既成パターン」です
試しに、「注意ポイント」という種類を選んでみましょう
↑ すると、選択していたテキストの上下に、「専用のコード」が挿入されます
プレビューで見てみると…
↑「注意ポイント」というタイトルとアイコン付きで、テキストが網掛けボックスで囲われました🐥
ちなみに…
もう1パターンの作成手順として、「マイボックス」内のテキストを入力する前に…
タグ ＞ ボックスデザイン ＞ マイボックス ＞ 注意ポイント
で…
↑ 先にコードを挿入させてから…
↑ そのあとに、上下のコード間にテキストを入力する順番でも…
↑ 結果はまったく同じです
基本的な使い方は、これでOK🐥
で、この「マイボックス」の既成パターンは、上記の「基本」以外にもいくつかあります（次パートへ！）
「マイボックス」の既成パターン
タグ ＞ ボックスデザイン ＞ マイボックス から選択できる「マイボックス」の既成パターンは、全部で9種類です
ズバリ、次の通り
ただし！
「マイボックス」の真骨頂は、むしろここからです
これらの「既成パターン」をもとに、アイコンや色を自由にカスタマイズしていきます
「マイボックス」を好きなデザインにカスタマイズ
「WING（AFFINGER5）」の「マイボックス」では、既成のパターンをもとに…
- タイトル名
- アイコンのデザイン
- 各パーツの配色
を変更して、オリジナルのボックスを簡単に作れてしまいます
試しに、既成パターンの「ポイント」を使って、カスタマイズしてみますね
まずは、通常の「マイボックス」の作成手順で…
↑「タグ」をクリックして…
↑ ボックスデザイン ＞ マイボックス から…
↑ 任意の「既成パターン」を選択します
↑ これで、専用コードが挿入されました
プレビューで見てみると…
↑ こんな状態です
つづいて、上下に挿入された2つのコードのうち…
↑ 上側（長い方！）のコードをいじって、カスタマイズしていきます
まずは、マイボックスのタイトル変更から🐥
マイボックスの「タイトル（見出し）」をカスタマイズ
さきほどの手順で上下に挿入されたコードのうち、「上側」のコード内の…
↑ この1番最初の ポイント にあたる部分を、好きなワードに変更してみましょう
今回は例として…
↑「ちなみに」というワードに変えてみます
プレビューで見てみると…
↑ タイトルが変わりました
ちなみにこのタイトル自体を消したい場合は、「ポイント」というワードを削除して、かつ何も入力しなければOKです
つづいて、アイコンを変えていきます
マイボックスの「アイコン」をカスタマイズ
同じく「マイボックス」コードの…
↑ この「fa-check-circle」という「チェックアイコン」を表示するための専用ワードを削除して、別のアイコンの専用ワードを代わりに挿入していきます（下記手順です）
↑ タグ ＞ ショートコード補助 ＞ Webアイコン（クラス） を開くと…
↑ こんな感じで、アイコンの種類が表示されます
今回は例として、1番上の「メモ」というアイコンを選んでみましょう
↑ 選ぶと、「メモ」アイコンを表示するための専用ワードが挿入されます
プレビューで確認すると…
↑ アイコンが「メモ」のデザインに変わりました
このアイコンも、そもそも何も表示したくなければ、最初の「fa-check-circle」という専用ワードを削除するだけでOKです
今度は、ここまでの「タイトル」と「アイコン」の色を変えていきます🐥
マイボックスの「タイトル＆アイコン」の色をカスタマイズ
同じく「マイボックス」コードの…
↑ この color=” " の赤マーカー部分にあたるカラーコードを削除して、任意の
カラーコードに変えていきます（下記手順です）
↑ タグ ＞ ショートコード補助 ＞ HTMLカラーコード を開くと…
↑ 代表的なカラーの選択肢が、ずらっと表示されます
今回は試しに、 緑（#4CAF50） を選んでみましょう
↑ 選ぶと、その色のカラーコードが挿入されます
またプレビューで確認してみると…
↑ アイコンとタイトルが、緑色に変わりました
ちなみに使いたい色のカラーコードさえわかれば、上記の「HTMLカラーコード」に載ってるカラーでなくても、無数のカラーバリエーションから指定できます
その場合は、上記の赤マーカー部分に、手入力でカラーコードを入れればOKです
このカラーコードについては、「WEB色見本 原色大辞典」さんで簡単に調べられます
今度は、ボックスの背景と枠線のカラーを変えていきましょう🐥
マイボックスの「背景＆枠線」の色をカスタマイズ
同じく「マイボックス」コード内の…
↑ この…
- bordercolor=" "
- bgcolor=" "
それぞれの赤マーカー部分のカラーコードを、1つ前の「タイトル＆アイコンの色カスタマイズ」と同じ要領で、好きな色に変えていきます
ちなみに、この2項目の意味はそれぞれ…
- bordercolor → マイボックスの枠線カラー
- bgcolor → マイボックスの背景カラー
この通りです
↑ タグ ＞ ショートコード補助 ＞ HTMLカラーコードのなかの…
↑ この選択肢のなかから選ぶか、もしくは自分でカラーコードを調べて、好きな色に差し替えましょう
今回は例として、上記の「HTMLカラーコード」のなかから…
- bordercolor → 緑（#4CAF50）
- bgcolor → 緑薄（#E8F5E9）
を、それぞれ選んでみました
つまり…
↑ こうなります
プレビューで見てみると…
↑ 背景と枠線のカラーが、グリーン系に変わりました
最後に、「枠線の太さ」と「四隅の丸み」をカスタマイズしていきましょう🐥
マイボックスの「枠線の太さ」＆「四隅の丸み」をカスタマイズ
同じく「マイボックス」コード内の…
↑ この…
- borderwidth=" "
- borderradius=" "
それぞれの赤マーカー部分を、任意の数値に変えていきます
ちなみに、この2項目の意味はそれぞれ…
- borderwidth → 枠線の太さ
- borderradius → 四隅の丸み
この通りです
今回は例として…
と指定してみます
プレビューで確認してみると…
↑ この通り、枠線が太くなって、四隅は四角くカスタマイズされました
今回の「マイボックスの種類と使い方」については、これで以上となります
大変お疲れさまでした♪
あずき🐥
この記事を書いた人