【SWELL】ボックスメニューの作り方|活用例も合わせて紹介
![SWELLボックスメニューの作り方](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_boxmenu.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/04/hukidashi_icon_woman-150x150.jpg)
SWELLでボックス型のメニューが作りたい!
どうやって作るの?
SWELLでは、ボックスメニューブロックを使えば、簡単にボックスメニューを作ることができます。
今回は、ボックスメニューの作り方と活用例を解説します。
参考にしていただければ、幸いです。
ボックスメニューの活用例
ボックスメニューの機能を使えば、様々なボックスメニューが作れます。
実際のサイトは以下です▼
ボックスメニューの活用例は以下です。
iroiroblog(当サイト)のサイドバー
![iroiroblog(当サイト)のサイドバー](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_01.jpg)
![iroiroblog(当サイト)のサイドバー](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_01.jpg)
カテゴリーやタグをボックスメニューで表示しました。
アイコン(SVG)を付けただけですが、文字だけよりもかなり分かりやすくなります。
Handmade shop iroiroのサイドバー
![Handmade shop iroiroのサイドバー①](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_02_1.jpg)
![Handmade shop iroiroのサイドバー①](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_02_1.jpg)
商品のカテゴリー一覧をボックスメニューにしました。
アイコンはお好みの画像を入れることもできます。
それぞれのリンクボックスを押すことで、商品を絞って探せるようになっています。
![Handmade shop iroiroのサイドバー②](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_02_2.jpg)
![Handmade shop iroiroのサイドバー②](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_02_2.jpg)
商品をカラー・サイズ別で探せるよう、設置しました。
“カラーで探す”のボックスメニューは、アイコンのカラーを変えて分かりやすくしました。
Handmade shop iroiroの商品ページ下段
![Handmade shop iroiroの商品ページ下段](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_03.jpg)
![Handmade shop iroiroの商品ページ下段](https://handmade-iroiro.com/wp-content/uploads/2023/07/box-menu_example_03.jpg)
商品一覧ページでサイドバーに表示していたボックスメニューを、商品ページ下段に設置しました。
アイコンとテキストは横並びにすることもできます。
ボックスメニューの作り方
基本のボックスメニューの作り方と、ブログパーツを使ったボックスメニューの作り方を解説します。
投稿や固定ページにボックスメニューを作りたい場合は基本のボックスメニューの作り方でOKです。
サイドバーなどのウィジェットに表示させたい場合やボックスメニューを使いまわしたい場合は、ブログパーツを使ってボックスメニューを作ります。
それぞれ解説していきます。
基本のボックスメニューの作り方
![+をクリック](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_01.jpg)
![+をクリック](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_01.jpg)
+をクリックし、ブロック一覧を開きます。
![ボックスメニューを開く](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_02.jpg)
![ボックスメニューを開く](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_02.jpg)
ブロック一覧より、ボックスメニューをクリックします。
![ボックスメニューの設定をする](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_03.jpg)
![ボックスメニューの設定をする](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_03.jpg)
サイドバーでボックスメニューの設定をします。
ボックスメニューの設定
スタイル
標準or塗りから選べます。
標準
塗り
カラー設定
テキストカラー、アイコンカラー、背景カラーは好きな色に設定できます。
アイコンとテキストの並び
縦並びor横並びを選べます。
縦並び
横並び
ボックス間の余白
ボックス間に好きなだけ余白を入れることができます。
アイコンサイズ
アイコンサイズはお好みのサイズに設定可能です。
3em
5em
列数
列数は1~8まで設定できます。
パソコン、タブレット、スマホでそれぞれ設定することも可能です。
![リンクボックスの設定をする](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_04.jpg)
![リンクボックスの設定をする](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_04.jpg)
各リンクボックスをクリックし、サイドバーでリンクボックスの設定をします。
リンクボックスの設定
アイコン設定
アイコンにはSVGか画像を入れることができます。
リンクの設定
![リンクの設定](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_04_more.jpg)
![リンクの設定](https://handmade-iroiro.com/wp-content/uploads/2023/07/boxmenu_make_04_more.jpg)
リンクマークをクリックし、検索窓にリンク先URLを入力します。(内部リンクもOKです。)
ブログパーツを使ったボックスメニューの作り方
サイドバーなどのウィジェットにボックスメニューを配置したい場合は、ブログパーツで作ります。
![ブログパーツを新規作成する](https://handmade-iroiro.com/wp-content/uploads/2023/07/blogparts_boxmenu_make_01.jpg)
![ブログパーツを新規作成する](https://handmade-iroiro.com/wp-content/uploads/2023/07/blogparts_boxmenu_make_01.jpg)
ブログパーツ→新規追加をクリックします。
![呼び出しコードをコピー](https://handmade-iroiro.com/wp-content/uploads/2023/07/blogparts_boxmenu_make_03.jpg)
![呼び出しコードをコピー](https://handmade-iroiro.com/wp-content/uploads/2023/07/blogparts_boxmenu_make_03.jpg)
ブログパーツをクリックし、ブログパーツの一覧ページを開きます。
呼び出しコードをコピーします。
![呼び出しコードを張る](https://handmade-iroiro.com/wp-content/uploads/2023/07/blogparts_boxmenu_make_04.jpg)
![呼び出しコードを張る](https://handmade-iroiro.com/wp-content/uploads/2023/07/blogparts_boxmenu_make_04.jpg)
外観→ウィジェットをクリックし、ウィジェットを開きます。
共通サイドバーにカスタムHTMLをドラッグ&ドロップ。
“内容”にコピーした呼び出しコードを張ります。
まとめ
今回は、ボックスメニューをの活用例と作り方を解説しました。
サイズや色も細かく調整できますので、かなり活用できると思います。
特におすすめの設置場所は、サイドバーです。
サイドバーにボックスメニューを設置すると、サイトの回遊率UPも狙えると思います。
とても簡単に作れるのでぜひ試してみて下さい!
その他のカスタマイズ例は以下の記事を参考にして下さい▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_ecsite-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_ecsite-300x169.jpg)
ヘッダーの作り方は以下の記事で解説しています▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_header-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_header-300x169.jpg)
メインビジュアルの作り方は以下の記事で解説しています▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_mainvisual-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_mainvisual-300x169.jpg)
コメント