【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①
みなさん、おはこんばんは☺️
今回は、タグ機能の中にあるボックスメニューの使い方について解説します✨
メニューを色々カスタマイズできるので、ぜひステキなブログに利用してみてください🤗
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①①](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/5b2254e137483783fd17527e57cb4050-1024x576.jpeg)
それでは解説します✨
【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①
ボックスメニューはこのような形で、クラシックのタグ カスタムボタン ボックスメニューより4種類から好みのフォームを選べます。
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①②](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/f1f04932fadd0b37b6bc2d523c5de14b-1024x446.jpg)
基本(4列)
サブあり(4列)
縦並びタイプ
縦並びタイプ(サブあり)
縦並びタイプ(単品)
"サブあり(4列)"を使って解説します。
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
ボックスメニューのボタンを増やしたい場合は…
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
このコードを追加してください。
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
(この間に追加する)
[/st-box-btn]
step
1"を押す
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①③](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/2137390cfcf7313fa5c3eb564e7ac2c9-2-1024x799.jpg)
step
2ブロックのテキストから"クラシック"を選択
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①④](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/268357284f04ce7c602fe33268204d7e-1024x508.png)
step
3書く場所に出てきた"クラシック"をクリックする
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑤](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/9dfcfef075242360132731a487a6c797-1024x514.png)
step
4"タグ" "カスタムボタン" "ボックスメニュー"から"サブあり(4列)"を選択
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑥](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/f1f04932fadd0b37b6bc2d523c5de14b-1-1024x446.jpg)
step
5を参考にカスタマイズ
ポイント
デフォルト | 備考 |
① pc_show="4" | 1列に並べる数(2 ~4) |
② icon_image="" | 使いたい画像のURL |
③ webicon="st-svg-wordpress" | アイコンコード(FontAwesome5など)※画像(icon_image=""が優先表示) |
④ icon_size="" | アイコンのサイズ 数字を入力(画像、アイコン共通) |
⑤ text="メニューA" | タイトル |
⑥ subtext="サブテキスト" | サブタイトル |
⑦ url="" | クリックされた際に見せたいリンク先のURL |
⑧ bgcolor="" | ボタンの背景色 ※#000000などカラーコードを入力 |
⑨ color="" | サブタイトルの文字色(アイコンを利用の場合、アイコンの色へも反映) ※#000000などカラーコードを入力 |
⑩ fontsize="90" | タイトルの文字サイズ |
① pc_show="4" : 1列に並べる数(2 ~4)
pc_show="3"の場合
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑦](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/9161876fa3c351697e1ef5bfe8aa275d-1024x626.png)
pc_show="2"の場合
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑧](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/650c58c69f322c50afa63c7ffffaa1cb-1024x799.jpg)
② icon_image="" : 使いたい画像のURL
画像のURLの挿入方法
step
Aホームから"メディアを選択
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑨](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/4059630e6be40f3bb5907c5388889c57.png)
step
B画像を選択すると、右下に"ファイルのURL"が表示されるので、"URLをクリップボードにコピー"をクリックでコピー完了
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑩](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/a3d52b85b1c49ea0439509ae34eb5e7e-1024x436.jpg)
step
Cicon_image=""に貼り付けをする ※画像が表示されたら「Ctrl + Z」でURLに変更
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑪](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/f9542c5eaee0457e0c88919e66c14887-1024x676.jpg)
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑫](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/fa785a5085d8a708304ebdd03c7bb89c-1024x366.jpg)
③ webicon="st-svg-wordpress" : アイコンコード(FontAwesome5など)※画像(icon_image=""が優先表示)
"タグ" "ショートコード補助" "Webアイコン(クラス)"から確認可能
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑬](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/b75353f86dd63eca39acf95a2748a938-1024x514.jpg)
より多くのアイコンを使用したい場合は、FontAwesome5もあります。導入方法等は下記記事を参考にしてください。
-
参考【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方
【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方 皆さま、おはこんばんは😊WING AFFINGER5からACTION AFFINGER6になり ...
続きを見る
④ icon_size="" : アイコンのサイズ 数字を入力(画像、アイコン共通)
アイコンの場合は、デフォルトの通り、数字の入力不要でちょうど良いと思います。
画像を利用する場合は、各々調整をするのが良いと思います。
⑤ text="メニューA" : タイトル
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑭](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/5bae2031d807b19885a2968384956426.png)
この部分です。
⑥ subtext="サブテキスト" : サブタイトル
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑮](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/565367b5a3b7359d3d26742a7712b578.png)
この部分です。
⑦ url="" : クリックされた際に見せたいリンク先のURL
url=""の""の中に、http://〜 のボタンがクリックされた際に見せたいリンク先のURLを入れます。
⑧ bgcolor="" : ボタンの背景色 ※#000000などカラーコードを入力
このように、各々ボタンの背景色を変更できます。
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑯](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/bfb08370c2e41a9ad4cc4200ad73bdf1-1024x276.png)
おすすめ!カラー選択方法
「色の名前とカラーコードが一目でわかるWEB色見本」
このサイト、とっても便利です。好みの色の見本とカラーコードが非常に見やすくなっているので、カラーを選ぶのが楽しくなりますよ🤗
良かったら、参考に見てみてください✨
⑨ color="" : サブタイトルの文字色(アイコンを利用の場合、アイコンの色へも反映) ※#000000などカラーコードを入力
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑰](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/565367b5a3b7359d3d26742a7712b578.png)
この部分です。
のように、アイコンを利用の場合は、アイコンの色もお揃いになります。
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑱](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/663ceb2d1c29656679071014276c3275-1024x251.png)
⑩ fontsize="90" : タイトルの文字サイズ
![【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①⑲](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/5bae2031d807b19885a2968384956426.png)
この部分です。
ワンポイントテクニック
アイコンを使用する場合、アイコンにアニメーションを加えることも可能です!!
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
この「webicon="st-svg-wordpress"」
st-svg-wordpressのアイコンコードの後ろに半角スペース+アニメーションコードを挿入します。
「webicon="st-svg-wordpress st-ring animated"」のようにします。
st-ring animatedがアニメーションコードです。
アニメーションコードは下の表を参考にしてください。
アニメーション (クラス) | アイコン装飾 | アニメーションコード |
45°揺れ | st-wrench animated | |
ベル揺れ | st-ring animated | |
横揺れ | st-horizontal animated | |
縦揺れ | st-vertical animated | |
点滅 | st-flash animated | |
バウンド | st-bounce animated | |
回転 | st-rotation animated | |
ふわふわ | st-float animated | |
大小 | st-pulse animated | |
シェイク | st-shake-s animated | |
シェイク(強) | st-shake animated | |
拡大(ゆれ) | st-tada animated | |
過ぎる | st-passing animated | |
戻る | st-passing-reverse animated | |
バースト | st-burst animated | |
落ちる | st-falling animated |
さらに目立ち、アイキャッチにもなりますので、ぜひ使ってみてください。
ステキなブログの作成に役立てば幸いです😊
ぜひ、使ってみてくださいね✨
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/07/action_banar-1-1024x916.png)
AFFINGER6の使い方
AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。
こんなページもあります
トップページのカスタマイズ
お知らせの作成方法
タブ式カテゴリー一覧の作成方法
カテゴリー一覧(スライドショー)の作成方法
"TOPに戻るボタン"のカスタマイズ方法
ヘッダーカードの作成方法
ボックスメニューの使い方② サイドバーへの表示方法
スライドショーの下にお知らせを挿入する方法
流れる文字の表示方法
記事の書き方
ブロックエディタ基本的な使い方
ブロックエディタの装飾一覧
タグ機能の装飾一覧
光るボタンの作り方
文字にアニメーションをつける方法
フォント(Google Fonts)の設定方法
FontAwesome5のアイコンにアニメーションを付ける方法
ボックスメニューの使い方①
ブログカードの作り方&カスタマイズ方法
吹き出し・会話アイコンの使い方・設定・カスタマイズ方法