【簡単】アフィンガー5でアイコンメニュー(ボックスメニュー)を実装する方法

悩んでる人

アイコンが並んでるメニューを作りたい

ボックスメニュ-の作り方が知りたい

オシャレなメニューバーを作りたい

kawateru

こんにちは、かわてるです！(@kaz_lion)

今回は当ブログでも使用しているアイコンメニュー（ボックスメニュー）

を実装する方法を解説していきます。

アイコンメニュー（ボックスメニュー）

アフィンガー5では、

簡単に実装することができますよ♪

本記事のテーマ

【簡単】アフィンガー5でアイコンメニュー(ボックスメニュー)を実装する方法

【アフィンガー5】アイコンメニュー(ボックスメニュー)作成方法

早速ですがアフィンガー5で

アイコンメニュー(ボックスメニュー)を作成していきましょう。

今回はサイドバーに入れる方法をご紹介します。

記事作成画面でアイコンメニュー(ボックスメニュー)を作る

まずは記事の新規作成画面を開きましょう。

固定でも投稿ページでもどちらでもOKです。

作成画面が開いたらアフィンガー5に備えられている

ショートコードを入れていきます。

タグ➜カスタムボタン➜ボックスメニュー➜基本（4列）を選択

するとこんなショートコードが挿入されるはずです。

この時点でプレビューしてみるとこんな感じです↓

【アフィンガー5】アイコンメニュー(ボックスメニュー)設定方法

ここから

• アイコンメニュー(ボックスメニュー)のタイトル設定
• アイコンメニュー(ボックスメニュー)のアイコン画像設定
• アイコンメニュー(ボックスメニュー)のリンク先設定

を指定していきます。

アイコンメニュー(ボックスメニュー)のタイトル設定

まずは簡単なアイコンメニューのタイトルをつけていきます。

先ほどのコードの

”メニューA”

”メニューB”

”メニューC”

”メニューD”

の部分を好きなタイトルに変更してください。

※両サイドの””は消さないようにしてください。

これでタイトルの変更が完了です。

アイコンメニュー(ボックスメニュー)のアイコン画像設定

次にアイコンメニュー(ボックスメニュー)の画像設定をしていきます。

アイコンはフリー素材を使用しても良いですし、自分で作成したものでも構いません。

フリー素材を使用する場合はこちらのサイトがおすすめです。

>>flat icon

kawateru

英語ですがオシャレなアイコンがそろっていますよ！

※王冠のアイコンがついている素材は有料となります。

アイコン素材が用意できたら

メディアを追加➜ファイルをアップロードを選択してアップロードしてください。

アップロードが完了したら下記のURLが記載されている部分をコピー

（画像の一番下）

リンクをコピーしたら

先ほどのショートコードの「st-box-btn-list icon_image=」の後ろの””の間にURLを貼り付けて下さい。

この作業を各項目ごとに行います。

kawateru

あとちょっと頑張ろう！

アイコンメニュー(ボックスメニュー)のリンク先設定

ボタンをクリックしたときのアクセス先を指定します。

別タブなどで自分のブログを開いてアクセスしたいページのURLをコピーしましょう。

コピーが終わったらショートコード内の「url=」

の後ろの””の間にURLを貼り付けましょう。

これを各項目行えばOKです。

【アフィンガー5】アイコンメニュー(ボックスメニュー)をサイドバーに設定

最後にサイドバーに表示するように設定します。

先ほどのショートコードを全てコピーして別タブで

WordPressの管理画面をもう一つ開きましょう。

外観➜カスタマイズ➜ウィジェットを選択

左上の「00_STINGERカスタムHTML」を選択して

サイドバーウィジェットに追加を押しましょう。

そしたら内容と書いてある部分に先ほどのショートコードを貼り付けて保存を押しましょう。

これでアイコンメニュー(ボックスメニュー)の実装は完了です。

自分のブログのトップページを確認してみましょう。

ちなみに最初に追加した記事は消しちゃって大丈夫ですよ。

まとめ「アイコンメニュー(ボックスメニュー)の作成方法」

アフィンガー5はこんなに便利な機能が沢山あるけど、

機能が多すぎて使いこなせないなんてことも。

初心者のうちに見た目にこだわりすぎるのは良くないですが、

記事を書くことになれて来たら徐々に見た目もカスタマイズしていきましょ♪

このブログではサイトのカスタマイズについても随時紹介していきます！

記事の更新はTwitterでも配信しています。(@kaz_lion)