【AFFINGER6】サイドバーにボックスメニューを作ってみよう！！【簡単にできる】

悩める人

Affinger6 で何か「ボックスメニュー」などは作れないものでしょうか？

サイドバーに置いて、ちょっと目立たせたいと思っているのですが。。

できれば画像付きで説明してもらえるとありがたいです。

今回はこのようなお悩みにお答えします。

記事数が増えてきたり、それに合わせてカテゴリーが増えてくると、ヘッダー部分だけではなくサイドバーにも何か目立たせるものを置きたくなりますよね。

めもりのサイトでは次のような「ボックスメニュー」を置いています。

このようなアイコンで飾ってサイドバーに置くことで、ヘッダー部分からだけではなく、こちらからもアクセスが見込めますよね。

今回はこのようなボックスメニュー作りをご紹介していきます。

この記事でわかること

ボックスメニューについて
ボックスメニューの作り方
ボックスメニューのカスタマイズ方法
ボックスメニューの配色変更

こちらのラインナップとなっています。

では早速はじめましょう！

1 【AFFINGER6】ボックスメニューについて
2 ボックスメニューの作り方
3 アイコンの設定の仕方【2通り】
- 3.1 ① WordPressに保存されている画像を指定して設定
- 3.2 ② FontAwesome のコードを用いて設定
4 ショートコードを変更した内容を確認する！
5 サイドバーに表示させてみよう！
6 ボックスメニューの背景色を変更する方法
7 おすすめアイコンサイト
8 まとめ：使える道具や機能は活用しよう！

【AFFINGER6】ボックスメニューについて

サンプルですが、

このようなものが作れるようになります！！

■基本(4列)

■サブあり(4列)

■縦並びタイプ

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

■縦並びタイプ(単品)

メニューA

サブテキスト

以上のようなボックスメニューを作ることができます。

ちなみに、ボックス数は容易に変更することができ、増やしたり減らすこともできます。

では続いて、作り方をご説明します。

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

どのようにして作っていくかですが、「投稿ページ」「固定ページ」のどちらでも良いので、まずそれを作成します。

そして記事内で「クイックタグで基本ショートコードを挿入」する必要があります。

次の手順に沿って、進めていきましょう！

「投稿ページ」または「固定ページ」の作成
ボックスメニューの挿入
ショートコードの編集
アイコンを選択し挿入
ウィジェットにショートコードを貼り付け

step
1「投稿ページ」または「固定ページ」の作成

「固定ページ」→ 「新規追加」をクリック

ここでは「固定ページ」で作成することにしましょう！

ショートコードを作ってウィジェットに貼り付けるだけなので、終わった後「固定ページ」は不要となりますので削除しても構いません。

※もちろんタイトル名なども必要ありません。単なるメモ帳代わりと思っていただいて問題ありません。

step
2「ボックスメニュー」の挿入

「クラシックエディタ」を用いて行うところですが、「ブロックエディタ」を用いている場合でも次のようにして「クラシックエディタ」を使うことができます。

・「クラシック」を選択

続いて、

・「タグ」→ 「カスタムパーツ」→ 「ボックスメニュー」→ お好みのものを選択

このお好みのものを選ぶことで、最初にサンプルでご紹介したボックスを表示させることができます。

今回は「基本(4列)」を選びましょう！

※これを選ぶとウィジェットでサイドバーに指定したときに、2行2列のカラムのようになります。
「縦並びタイプ」なら、そのまま縦1列にメニューが4つ並びます。こちらは後のショートコードで変更することができます。

step
3「ショートコード」の編集

先の手順で「基本(4列)」を選ぶと、次のような「ショートコード」が表示されます。

上記のコードで編集すべき主な箇所は次の赤字のところです。

※例としてボックスのコードを1組だけとして表示しています。

✔️ ショートコードで編集すべき主な箇所6個

icon_image= ""	好みの画像のURL(WordPressに保存されているメディア)
webicon=""	FontAwesome のフォトアイコン
icon_size=""	アイコンのサイズ(%表示) FontAwesome の使用時はデフォルトで300%となっています。
text=""	表示させたいテキスト
subtext=""	textの下に表示させたいテキスト
url=""	リンク先のアドレス(ディレクトリなど)