affinger-mybox-20200314_ec

WordPress

【超便利】AFFINGER5の「マイボックス」その種類と使い方【WordPressブログ】



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

「マイボックス」の種類と使い方

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

まず「WING(AFFINGER5)」における「マイボックス」とは、例えば…

affinger-mybox-20200313_1-09

↑ こんなのです

いくつかの「既成パターン」から種類を選べるのはもちろん、それ以上にこのマイボックスが優れてる点が…

  • 自分の好きなデザインに、色やアイコンなどをカスタマイズできること

例えば…

affinger-mybox-20200313_3-top-05

↑ こちらの既成パターンから…

affinger-mybox-20200313_3-2-05

↑ アイコンだけ別のものに変えてみたり、もしくは…

affinger-mybox-20200313_3-4-03

↑ 配色も、好きなカラーコードで指定したりできます

だからこその ”マイ” ボックス!

そして使い方も簡単です

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

当ブログのWordPress環境

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

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

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

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

AFFINGER5における「マイボックス」の種類&使い方【カスタマイズ方法まで】

「マイボックス」の基本的な使い方【既成パターン】

pc-work-202001_01

まずは、「マイボックス」の基本的な使い方から🐥

例として…

affinger-mybox-20200313_1-01

↑ この選択してるテキスト(青い部分!)を、「マイボックス」で囲ってみたいと思います

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

affinger-mybox-20200313_1-02

↑ 画面上部の タグ をクリックし…

affinger-mybox-20200313_1-03

↑ ボックスデザイン > マイボックス を開きましょう。 すると…

affinger-mybox-20200313_1-04

↑ デザインパターンがたくさん出てきます

これらが、最初から用意されてる「既成パターン」です

試しに、「注意ポイント」という種類を選んでみましょう

affinger-mybox-20200313_1-05

↑ すると、選択していたテキストの上下に、「専用のコード」が挿入されます

これで、マイボックスはもう完成!

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

affinger-mybox-20200313_1-06

↑「注意ポイント」というタイトルとアイコン付きで、テキストが網掛けボックスで囲われました🐥

ちなみに…

もう1パターンの作成手順として、「マイボックス」内のテキストを入力する前に…

タグ > ボックスデザイン > マイボックス > 注意ポイント

で…

affinger-mybox-20200313_1-07

↑ 先にコードを挿入させてから…

affinger-mybox-20200313_1-08

↑ そのあとに、上下のコード間にテキストを入力する順番でも…

affinger-mybox-20200313_1-09

↑ 結果はまったく同じです

基本的な使い方は、これでOK🐥

で、この「マイボックス」の既成パターンは、上記の「基本」以外にもいくつかあります(次パートへ!)

全パターンまとめて見ていくよ!

「マイボックス」の既成パターン

pc-work-202001_02

タグ > ボックスデザイン > マイボックス から選択できる「マイボックス」の既成パターンは、全部で9種類です

ズバリ、次の通り

affinger-mybox-20200313_2-01

ただし!

「マイボックス」の真骨頂は、むしろここからです

これらの「既成パターン」をもとに、アイコンや色を自由にカスタマイズしていきます

最後のパートへ!

「マイボックス」を好きなデザインにカスタマイズ

pc-work-202001_03

WING(AFFINGER5)」の「マイボックス」では、既成のパターンをもとに…

  • タイトル名
  • アイコンのデザイン
  • 各パーツの配色

を変更して、オリジナルのボックスを簡単に作れてしまいます

文字通り ”マイ” ボックス!

試しに、既成パターンの「ポイント」を使って、カスタマイズしてみますね

まずは、通常の「マイボックス」の作成手順で…

affinger-mybox-20200313_3-top-01

↑「タグ」をクリックして…

affinger-mybox-20200313_3-top-02

↑ ボックスデザイン > マイボックス から…

affinger-mybox-20200313_3-top-03

↑ 任意の「既成パターン」を選択します

今回の例では、「ポイント」を選ぶよ!

affinger-mybox-20200313_3-top-04

↑ これで、専用コードが挿入されました

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

affinger-mybox-20200313_3-top-05

↑ こんな状態です

つづいて、上下に挿入された2つのコードのうち…

affinger-mybox-20200313_3-top-06

↑ 上側(長い方!)のコードをいじって、カスタマイズしていきます

まずは、マイボックスのタイトル変更から🐥

マイボックスの「タイトル(見出し)」をカスタマイズ

さきほどの手順で上下に挿入されたコードのうち、「上側」のコード内の…

affinger-mybox-20200313_3-1-01

↑ この1番最初の ポイント にあたる部分を、好きなワードに変更してみましょう

↑ の画像では、説明しやすいように赤マーカーで引いてるよ!

今回は例として…

affinger-mybox-20200313_3-1-02

↑「ちなみに」というワードに変えてみます

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

affinger-mybox-20200313_3-1-03

↑ タイトルが変わりました

ちなみにこのタイトル自体を消したい場合は、「ポイント」というワードを削除して、かつ何も入力しなければOKです

つづいて、アイコンを変えていきます

マイボックスの「アイコン」をカスタマイズ

同じく「マイボックス」コードの…

affinger-mybox-20200313_3-2-01

↑ この「fa-check-circle」という「チェックアイコン」を表示するための専用ワードを削除して、別のアイコンの専用ワードを代わりに挿入していきます(下記手順です)

affinger-mybox-20200313_3-2-02

↑ タグ > ショートコード補助 > Webアイコン(クラス) を開くと…

affinger-mybox-20200313_3-2-03

↑ こんな感じで、アイコンの種類が表示されます

今回は例として、1番上の「メモ」というアイコンを選んでみましょう

affinger-mybox-20200313_3-2-04

↑ 選ぶと、「メモ」アイコンを表示するための専用ワードが挿入されます

赤いマーカーのとこ!

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

affinger-mybox-20200313_3-2-05

↑ アイコンが「メモ」のデザインに変わりました

このアイコンも、そもそも何も表示したくなければ、最初の「fa-check-circle」という専用ワードを削除するだけでOKです

今度は、ここまでの「タイトル」と「アイコン」の色を変えていきます🐥

マイボックスの「タイトル&アイコン」の色をカスタマイズ

同じく「マイボックス」コードの…

affinger-mybox-20200313_3-3-01

↑ この color=”    " の赤マーカー部分にあたるカラーコードを削除して、任意の

カラーコードに変えていきます(下記手順です)

affinger-mybox-20200313_3-3-02

↑ タグ > ショートコード補助 > HTMLカラーコード を開くと…

affinger-mybox-20200313_3-3-03

↑ 代表的なカラーの選択肢が、ずらっと表示されます

今回は試しに、 緑(#4CAF50) を選んでみましょう

affinger-mybox-20200313_3-3-04

↑ 選ぶと、その色のカラーコードが挿入されます

またプレビューで確認してみると…

affinger-mybox-20200313_3-3-05

↑ アイコンとタイトルが、緑色に変わりました

ちなみに使いたい色のカラーコードさえわかれば、上記の「HTMLカラーコード」に載ってるカラーでなくても、無数のカラーバリエーションから指定できます

その場合は、上記の赤マーカー部分に、手入力でカラーコードを入れればOKです

カラーコードは、 #〇〇〇〇〇〇 の形!

このカラーコードについては、「WEB色見本 原色大辞典」さんで簡単に調べられます

今度は、ボックスの背景と枠線のカラーを変えていきましょう🐥

マイボックスの「背景&枠線」の色をカスタマイズ

同じく「マイボックス」コード内の…

affinger-mybox-20200313_3-4-01

↑ この…

  • bordercolor="    "
  • bgcolor="    "

それぞれの赤マーカー部分のカラーコードを、1つ前の「タイトル&アイコンの色カスタマイズ」と同じ要領で、好きな色に変えていきます

ちなみに、この2項目の意味はそれぞれ…

  • bordercolor → マイボックスの枠線カラー
  • bgcolor → マイボックスの背景カラー

この通りです

affinger-mybox-20200313_3-3-02

↑ タグ > ショートコード補助 > HTMLカラーコードのなかの…

affinger-mybox-20200313_3-3-03

↑ この選択肢のなかから選ぶか、もしくは自分でカラーコードを調べて、好きな色に差し替えましょう

今回は例として、上記の「HTMLカラーコード」のなかから…

  • bordercolor → 緑(#4CAF50)
  • bgcolor → 緑薄(#E8F5E9)

を、それぞれ選んでみました

つまり…

affinger-mybox-20200313_3-4-02

↑ こうなります

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

affinger-mybox-20200313_3-4-03

↑ 背景と枠線のカラーが、グリーン系に変わりました

最後に、「枠線の太さ」と「四隅の丸み」をカスタマイズしていきましょう🐥

マイボックスの「枠線の太さ」&「四隅の丸み」をカスタマイズ

同じく「マイボックス」コード内の…

affinger-mybox-20200313_3-5-01

↑ この…

  • borderwidth=" "
  • borderradius=" "

それぞれの赤マーカー部分を、任意の数値に変えていきます

ちなみに、この2項目の意味はそれぞれ…

  • borderwidth → 枠線の太さ
  • borderradius → 四隅の丸み

この通りです

今回は例として…

affinger-mybox-20200313_3-5-02

と指定してみます

プレビューで確認してみると…

affinger-mybox-20200313_3-5-03

↑ この通り、枠線が太くなって、四隅は四角くカスタマイズされました

今回の「マイボックスの種類と使い方」については、これで以上となります

大変お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

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

-WordPress

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