【簡単】AFFINGER6でサイドバーにボックスメニューを表示する方法

こんにちは！かなやんです。

Affinger6ではボックスメニューを使った超便利な方法があるのを知っていますか？

アイコンをボックスのように並べて表示できるので、どこにどんなカテゴリーの記事があるかが一発でわかるのでおすすめですよ。

ユキコ

かわいいアイコンを使ったボックスメニューが知りたい！

かなやん

この記事では、サイドバーにボックスメニューをつくる方法を紹介します。

ブログを作る際の参考にしてくださいね。

かなやん

約10分くらいで簡単にできるので、ぜひ試してみてくださいね☆

では、はじめましょう！

今回は2列のボックスメニューをつくる方法です。

Contents

ボックスメニュー作成用の記事を用意する

ボックスメニュー作成用の記事を用意して、「クラシックエディター」を選択します。

クラシックエディターが表示されたら、[カスタムボタン]→[ボックスメニュー]→[基本(4列)]の順に選択します。

そうすると、なにならプログラミングコードみたいなのが表示されます。

かなやん

これは「ショートコード」といって画面に表示するための文字です。

プレビュー画面で見るとわかるのですが、実際の画面ではショートコードが変換されてボックスメニューなどとして表示されます。

今回は列を「2列」にしたいので、「pc-show = " "」を「pc-show = "2"」にしましょう。

修正前	pc_show = " "
修正後	pc_show = "2"

つぎに、アイコンをURLをショートコードに入れていきます。

メディアライブラリにアイコンがすでに登録されていることを想定して説明していきます。

[メディア]→[ライブラリ]の順にクリックします。

「URLをクリップボードにコピー」ボタンをクリックすると、URLがコピーされます。

そのURLを「icon_image」のところに貼り付けましょう。

修正前	icon_image = " "
修正後	icon_image = "xxxx.yyyy.zzzz.png"

つぎに、ボックスメニューをクリックしたときに表示したいURLのリンクを貼り付けます。

おそらくこの記事を読んでいる人のブログは2つ以上のカテゴリーをお持ちだと思いますので、そのカテゴリーのURLをショートコードの「url」に貼ります。

修正前	url = " "
修正後	url = "xxxx.yyyy.zzzz.com"

さて、いよいよ作成したショートコードをウィジェットに貼り付ける作業をします。

まず、ダッシュボードから[外観]→[ウィジェット]の順に進みます。

[00_STINGERカスタムHTML]から[サイドバーウィジェット]を選択して、「ウィジェットを追加」ボタンを押します。

そうすると、次のような画面が表示されるので①タイトルと②内容を入力します。入力し終わったら「保存」ボタンを押して完了します。

保存し終わってブログのトップページに戻ると、このようになっていれば完成です！

おつかれさまでした！