【AFFINGER6】ボックスメニューの作り方とカスタマイズ方法を紹介

2022年3月4日

 

今回は、WordPressテーマAFFINGERのボックスメニューを表示する方法の紹介です。

 

AFFINGERには、ヘッダーカードやカードレイアウトなどのさまざまな表示方法があります。

 

そんな中でも、ボックスメニューはアイコン表示ができて、サイト全体のUIをわかりやすくしてくれる機能の一つです。

 

是非、活用できるようにしておきましょう!

 

本記事の内容

AFFINGER6のボックスメニューの作り方

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

AFFINGERで表示できるボックスメニューとは?

AFFINGERのボックスメニューとは、以下のようなアイコンをメニューに表示することのできるものです。

 

 

アイコン付きで表示することで、ユーザーにとてもわかりやすいデザインになり、さまざまな効果をはっきしてくれます

 

ボックスメニューの効果

  • ブログのサイドバー:各カテゴリーへの誘導
  • 記事最下部のフッター:記事の読み終わりに他の記事への誘導
  • 記事内アイコン:クリックしてほしいリンクへの誘導

 

ボックスメニューは、活用次第でかなり便利な機能になってくれそうですね

 

 

ボックスメニューの基本の使い方について

 

まずは、ボックスメニューの表示方法と基本の使い方を解説していきます。

 

ボックスメニューの作成手順はこちら

  1. ボックスメニューを表示
  2. 画像の挿入
  3. リンク先の挿入
  4. テキストの入力

 

それでは、解説していきますので、順番に作業を行なっていきましょう。

 

step
1
ボックスメニューを表示させる

投稿画面にて、ボックスメニューを追加しましょう。「タグ」→「カスタムボタン」→「ボックスメニュー」にて、追加しましょう。

 

 

表示形式は以下の通りですので、参考にしてください

 

基本(4列)

 

サブあり(4列)

 

横並びタイプ

 

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

 

横並びタイプ(単品)

 

step
2
画像・アイコンの挿入

次に表示するアイコンの挿入作業をします。画像・アイコンそれぞれ追加方法を確認しましょう

 

 

画像とアイコンをの2種類からボックスメニューの作成が行えます

 

 

画像を挿入の場合

WordPress管理画面から投稿画面 or 「ライブラリ」より使用したい画像のURLをコピーしてください。コピーしたURLを「 icon_image="" 」 の項目に貼り付けましょう。

 

 

アイコンを挿入の場合

アイコンを表示したい場合には、アイコンコードの取得し貼り付けるだけで完了となります。

 

アイコンコードは Font Awesome のアイコンコードを使用できます。

 

 

 Font Awesome の使い方は以下の記事を参考にしてください。

参考「AFFINGER」ヘッダーメニューにWEBアイコン(Font Awesome)の表示方法を解説

 

取得しいてきたアイコンコードを「 webicon="" 」の項目に貼り付けましょう。

 

ポイント

それぞれのアイコンの大きさが大きすぎる場合には、「 icon_size="" 」にて調整可能です。半分くらいにしたい場合は " 50 " と入力してください。

 

step
3
リンクの挿入

次にそれぞれのアイコンのURL先を追加していきます。希望のリンク先を「 url="" 」の項目に貼り付けましょう。

 

 

step
4
テキストの追加

ボックスメニュー下のテキストを入力したす。それぞれタイトルのみ or サブタイトル付きなどがあるので、お好みのものを選択しましょう。

 

 

step
5
ボックスメニューの確認

最後は、正しくボックスメニューが作成できたか確認しましょう。以下サンプルですので、参考にしてみてください。

 

 ショートコードはこちら
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-mac-os-144.png" webicon="" icon_size="50" text="メニューA"  url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-googleのロゴ-144.png" webicon="" icon_size="50" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="fa-book" icon_size="" text="メニューC"  url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="fa-television" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

 

 

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

 

それでは次に、ボックスメニューのカスタマイズ方法についての解説です。

 

ボックスメニューには、いろんな用途で使用できて、カスタマイズすることでさらに読者のユーザーの注目を集めることができます

 

 

紹介するボックスメニューのカスタマイズはこちら

  • サイドバーの表示方法
  • カラーの変更
  • 列数を指定する

 

サイドバーの表示方法

サイドバーへの表示方法についてです。

 

管理画面より、ボックスメニューを作成していきます。固定ページなどで作成しておくと、使い回しが効くので便利です。

 

 ショートコードはこちら
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-読書-100-1.png" webicon="" icon_size="" text="BOOKS" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-マイコンピュータ-100.png" webicon="" icon_size="" text="ライフハックツール" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-貯金箱-100.png" webicon="" icon_size="" text="副業" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-プログラミング-100.png" webicon="" icon_size="" text="プログラミング" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"][/st-box-btn]

 

 

ボックスメニューが作成できたら、「外観」→「ウィジェット」に移動します。「テキスト」→「サイドバーウィジェット」→「ウィジェットの追加」を選択しましょう。

 

 

 

 

サイドバーのテキスト内に先ほどコピーしたボックスメニューのコードを貼り付けます。

 

 

以上で、サイドバーにボックスメニューの追加が完了となります。トップページから確認してみましょう。

 

 

各種カラーの変更

次に設定した、ボックスメニューのカラーをカスタマイズする方法についての解説です。

 

カラーのカスタマイズ項目はこちら

  • テキスト色
  • 背景色
  • ボーダー色

 

設定項目は「外観」→「カスタマイズ」→「各メニュー設定」→「ボックスメニュー」に移動してください。

 

 

アイコン以外にも、背景色などのカラーをカスタマイズすることでイメージが結構変わります

 

 

ボックスメニューのカラー設定を個別に行う場合には

カラー設定を個別に行いたい場合は、ショートコード内にカラーの設定入力していきます。

 

 ショートコードはこちら
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-読書-100-1.png" webicon="" icon_size="" text="BOOKS" subtext="" url="" target="" rel="" bgcolor="背景色" color="テキスト色" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-マイコンピュータ-100.png" webicon="" icon_size="" text="ライフハックツール" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-貯金箱-100.png" webicon="" icon_size="" text="副業" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-プログラミング-100.png" webicon="" icon_size="" text="プログラミング" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"][/st-box-btn]

 

 

列数を指定する

ボックスメニューを表示する列数を指定場合には、ショートコードにて列数の指定をするだけでOKです。

 

こちらの設定は、PC表示のみにないrますので注意しておきましょう。

 

 ショートコードはこちら
[st-box-btn myclass="" pc_show="表示する列数を入力" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-読書-100-1.png" webicon="" icon_size="" text="BOOKS" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-マイコンピュータ-100.png" webicon="" icon_size="" text="ライフハックツール" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-貯金箱-100.png" webicon="" icon_size="" text="副業" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="https://rutinelabo.com/blog/wp-content/uploads/2022/03/icons8-プログラミング-100.png" webicon="" icon_size="" text="プログラミング" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"][/st-box-btn]

 

表示する項目に応じて、ボックスメニューの列数に値も切り替えましょう!

 

アイコンサイトの紹介

 

Font Awesome

 

FLAT ICON DESUGN

 

ICONS

 

iconmonstr

 

ICOON MONO

 

お好みのものを使用してみてください!

 

まとめ

以上、AFFINGER6のボックスメニューの作り方とカスタマイズ方法でした。

 

AFFINGERのカスタマイズ方法に関しては、他にも色々と紹介しているのでよければ参考にしてみてください。

 

イラスト
【AFFINGER6】ヘッダーカードの作り方とカスタマイズ方法

続きを見る

 

イラスト
「AFFINGER」ヘッダーメニューにWEBアイコン(Font Awesome)の表示方法を解説

続きを見る

 

【AFFINGER】目次の作り方 3つのパターンを徹底解説

続きを見る

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-,