【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①
みなさん、おはこんばんは☺️
今回は、タグ機能の中にあるボックスメニューの使い方について解説します✨
メニューを色々カスタマイズできるので、ぜひステキなブログに利用してみてください🤗
それでは解説します✨
【AFFINGER6(アフィンガー6)使い方】ボックスメニューの使い方①
ボックスメニューはこのような形で、クラシックのタグ カスタムボタン ボックスメニューより4種類から好みのフォームを選べます。
基本(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"を押す
step
2ブロックのテキストから"クラシック"を選択
step
3書く場所に出てきた"クラシック"をクリックする
step
4"タグ" "カスタムボタン" "ボックスメニュー"から"サブあり(4列)"を選択
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"の場合
pc_show="2"の場合
② icon_image="" : 使いたい画像のURL
画像のURLの挿入方法
step
Aホームから"メディアを選択
step
B画像を選択すると、右下に"ファイルのURL"が表示されるので、"URLをクリップボードにコピー"をクリックでコピー完了
step
Cicon_image=""に貼り付けをする ※画像が表示されたら「Ctrl + Z」でURLに変更
③ webicon="st-svg-wordpress" : アイコンコード(FontAwesome5など)※画像(icon_image=""が優先表示)
"タグ" "ショートコード補助" "Webアイコン(クラス)"から確認可能
より多くのアイコンを使用したい場合は、FontAwesome5もあります。導入方法等は下記記事を参考にしてください。
参考【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方
【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方 皆さま、おはこんばんは😊WING AFFINGER5からACTION AFFINGER6になり ...
続きを見る
④ icon_size="" : アイコンのサイズ 数字を入力(画像、アイコン共通)
アイコンの場合は、デフォルトの通り、数字の入力不要でちょうど良いと思います。
画像を利用する場合は、各々調整をするのが良いと思います。
⑤ text="メニューA" : タイトル
この部分です。
⑥ subtext="サブテキスト" : サブタイトル
この部分です。
⑦ url="" : クリックされた際に見せたいリンク先のURL
url=""の""の中に、http://〜 のボタンがクリックされた際に見せたいリンク先のURLを入れます。
⑧ bgcolor="" : ボタンの背景色 ※#000000などカラーコードを入力
このように、各々ボタンの背景色を変更できます。
おすすめ!カラー選択方法
「色の名前とカラーコードが一目でわかるWEB色見本」
このサイト、とっても便利です。好みの色の見本とカラーコードが非常に見やすくなっているので、カラーを選ぶのが楽しくなりますよ🤗
良かったら、参考に見てみてください✨
⑨ color="" : サブタイトルの文字色(アイコンを利用の場合、アイコンの色へも反映) ※#000000などカラーコードを入力
この部分です。
のように、アイコンを利用の場合は、アイコンの色もお揃いになります。
⑩ fontsize="90" : タイトルの文字サイズ
この部分です。
ワンポイントテクニック
アイコンを使用する場合、アイコンにアニメーションを加えることも可能です!!
[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 |
さらに目立ち、アイキャッチにもなりますので、ぜひ使ってみてください。
ステキなブログの作成に役立てば幸いです😊
ぜひ、使ってみてくださいね✨
AFFINGER6の使い方
AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。
こんなページもあります
トップページのカスタマイズ
お知らせの作成方法
タブ式カテゴリー一覧の作成方法
カテゴリー一覧(スライドショー)の作成方法
"TOPに戻るボタン"のカスタマイズ方法
ヘッダーカードの作成方法
ボックスメニューの使い方② サイドバーへの表示方法
スライドショーの下にお知らせを挿入する方法
流れる文字の表示方法
記事の書き方
ブロックエディタ基本的な使い方
ブロックエディタの装飾一覧
タグ機能の装飾一覧
光るボタンの作り方
文字にアニメーションをつける方法
フォント(Google Fonts)の設定方法
FontAwesome5のアイコンにアニメーションを付ける方法
ボックスメニューの使い方①
ブログカードの作り方&カスタマイズ方法
吹き出し・会話アイコンの使い方・設定・カスタマイズ方法