AFFINGER5

AFFINGER5アイコン付きボックスメニューの作り方

アフィンガー5「アイコン付きボックスメニュー」の作り方です。

サイドバーに設定すると、お洒落な感じに仕上がります↓↓

 

 

しぐお
では、説明に入ります。

 

アイコン付きボックスメニューの種類

デフォルトで使えるアイコン付きボックスメニューは5種類。

  1. 基本(4列)
  2. サブあり(4列)
  3. 縦並びタイプ
  4. 縦並びタイプ(サブあり)
  5. 縦並びタイプ(単品)

下がショートコード貼り付けただけの状態です↓↓

基本(4列)

サブあり(4列)

縦並びタイプ

縦並びタイプ(サブあり)

縦並びタイプ(単品)

しぐお
設定したいアイコンは、用意する必要があります。

 

アイコン付きボックスメニューの設定

タグ>カスタムボタン>ボックスメニュー

カスタムボタンをクリックし、ボックスメニューの中にあるショートコードを貼り付ければ完了です。

あとは、アイコンとリンクを設定するだけ。

しぐお
下記に「サブあり4列」を使った例を紹介しますね。

 

ボックスメニューのカスタマイズ

サブあり(4列)

アイコンとサブテキストを変更してみました。

設定したコードは下記の通りです。

 html
[[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://siguburo49.com/wp-content/uploads/2020/02/f_f_object_149_s512_f_object_149_0bg.png" fontawesome="fa-wordpress" icon_size="" text="たぬき" subtext="raccoon" url="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%8C%E3%82%AD" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://siguburo49.com/wp-content/uploads/2020/02/f_f_object_153_s512_f_object_153_0bg.png" fontawesome="fa-wordpress" icon_size="" text="キツネ" subtext="fox" url="https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%84%E3%83%8D" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://siguburo49.com/wp-content/uploads/2020/02/f_f_object_111_s512_f_object_111_0bg.png" fontawesome="fa-wordpress" icon_size="" text="ネコ" subtext="cat" url="https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://siguburo49.com/wp-content/uploads/2020/02/f_f_object_103_s512_f_object_103_2bg.png" fontawesome="fa-wordpress" icon_size="" text="小鹿" subtext="fawn" url="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%AB" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]]

アイコン画像は自分で用意してください。。

しぐお
記事の最後におすすめ画像サイトも紹介中。

 

ショートコードの変更箇所

上で設定した「たぬき」を例に、ショートコードの変更箇所を説明します。

 デフォルト
[[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]]
 たぬき
[[st-box-btn-list icon_image="https://siguburo49.com/wp-content/uploads/2020/02/f_f_object_149_s512_f_object_149_0bg.png" fontawesome="fa-wordpress" icon_size="" text="たぬき" subtext="raccoon" url="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%8C%E3%82%AD" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]]
  • icon_image="画像URL"
  • text="たぬき"
  • subtext="raccoon"
  • url="リンク先URL"

画像は先にアップロードが必要です。

画像URLはテキスト画面で入力

 

縦並びタイプ(サブあり)

設定方法はサブあり(4列)と同じです。

しぐお
自分の好みで使い分けて下さいませ。

 

サイドバーにアイコン付きメニューを表示させる

アイコン付きボックスメニューはサイドバーにも表示できます。

 

手順

  1. ウィジェットにテキストを追加
  2. ショートコードを貼り付ける
  3. 保存する

 html
[[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]]

上記コードは「サブあり(4列)」のデフォルトコードです。

サイドバーに表示させたい方は、コピペして使ってください。

 

ボックスメニューの色を変更する

カスタマイズ>メニューのカラー設定>ボックスメニュー

ボックスメニューの設定画面で、テキスト、背景、ボーダー色を変更できます。

 

 

自分好みにカスタマイズしてください。

しぐお
以下、無料で使えるアイコン画像サイトを紹介します。

 

無料で使えるアイコン画像サイト

この記事のアイコンは「FLAT ICON」を使用しています。

ではでは。

-AFFINGER5
-,

© 2020 とにも書くにも