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

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

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

基本(4列)

サブあり(4列)

縦並びタイプ

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

縦並びタイプ(単品)

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

横並び、縦並び、サブテキスト付きメニューが選択できます。

 

ボックスメニューの設定

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

ボックスメニューの中から表示させたいメニューを選ぶだけで設定可能です。

下記に「サブあり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列)と同じです。

 

サイドバーにメニューを表示させる

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

 

ウィジェットにテキストを追加

 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」を使用しています。

-カスタマイズ

Copyright© アフィ基地 , 2020 All Rights Reserved.