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

最新記事

2020/2/16

【簡単】mixhostの登録手順を画像付きで解説します

以前から気になっていたレンタルサーバー「mixhost」に登録しました。 mixhostの登録手順を記事にしたので、良ければ参考にしてください。 登録手順 契約プランを選ぶ 初期ドメインを取得 契約オプションの設定 お客様情報の入力 アカウント設定完了のメッセージ確認 ⇒mixhost 目次契約プランを選ぶプラン内容(抜粋)プラン共通の特徴初期ドメインを取得契約オプションの設定ドメイン設定の確認お客様情報の入力アカウント設定完了のメッセージ確認ミックスホストの管理画面ミックスホストまとめ 契約プランを選ぶ ...

ReadMore

2020/2/16

AFFINGER5最新テーマのアップデート方法

アフィンガーを最新テーマにアップデートする方法です。 ぼくが使っているのはEX版なので、EX版を例にして説明します。 目次初めてアップデートする場合購入ユーザー限定ページへ最新アップデート手順購入ユーザー限定ページマイページ最新テーマのダウンロードワードプレスにテーマを追加テーマのバージョンを確認する管理画面からアップデート 初めてアップデートする場合 アフィンガーのアップデートが初めての場合は、「テーマアップローダー」をダウンロードしてください。 ダウンロードした後、プラグインに追加します。 テーマアッ ...

ReadMore

2020/2/8

無料で使える画像サイト

目次pixabayO-DAN写真AC1ZOOM.MEイラストACFLAT ICON(アイコン)FLAT ICON DESIGN(アイコン)toptal(背景画像) pixabay pixabay お洒落な海外画像の宝庫。無料動画も有り。 当サイトのアイキャッチ画像でも、かなりお世話になってます。   O-DAN O-DAN 世界中の無料写真素材の中から理想の一枚を検索。 pixabayで写真が見つからなかったときはここ。かなり重宝すると思います。   写真AC 写真AC 日本人モデルを ...

ReadMore

2020/2/14

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

アフィンガー5「アイコン付きボックスメニュー」の作り方を紹介します。 目次アイコン付きボックスメニューの種類ボックスメニューの設定ボックスメニューのカスタマイズサブあり(4列)縦並びタイプ(サブあり)サイドバーにメニューを表示させるウィジェットにテキストを追加ボックスメニューの色を変更する無料で使えるアイコン画像サイト アイコン付きボックスメニューの種類 基本(4列) メニューA メニューB メニューC メニューD サブあり(4列) メニューA サブテキスト メニューB サブテキスト メニューC サブテキ ...

ReadMore

2020/2/16

エックスサーバーにサブドメインを設置してサイトを追加する方法

目次サブドメインとは?エックスサーバーでサブドメインを追加するサブドメイン名を入力サブドメイン設定完了画面サブドメインにWordPressをインストール サブドメインとは? サブドメインは、本体の独自ドメインをいくつかの分野別に分けたもので、企業サイトなどによく使われています。 分割したものですが、独立した存在として運用でき、メインサイトとは異なる内容のWebサイトを作ることができます。 ⇒Udemyより転用   エックスサーバーでサブドメインを追加する エックスサーバーにログイン後、サブドメイ ...

ReadMore

-カスタマイズ

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