![](https://oyoyo-m.com/wp-content/uploads/2021/08/d9a3b9d2b785c467f2b334c6a059997f-1.png)
【SWELL】新機能ボックスメニューでボックスナビを作る方法|便利すぎる機能も紹介
当ページのリンクには広告が含まれています。
![【SWELL】新機能ボックスメニューで「ボックスナビ」を作る方法|便利すぎる機能も紹介](https://oyoyo-m.com/wp-content/uploads/2022/04/f8172abc72fe3c42be3ebb7e5666e126.png)
SWELLの進化が止まりません。
2022年3月に「テーブル機能」が大幅に拡張されたばっかりというのに、4月のアップデートがすごいことになっています。
【SWELL v.2.6.1 をリリースしました🙌】
— 了🌊SWELL開発者 (@ddryo_loos) April 15, 2022
・「ボックスメニュー」ブロックを追加
・「リスト入りグループ」ブロックを追加
・「アイコンピッカー」リニューアル
・「セル背景」機能の追加調整
などなどです!#wpswellhttps://t.co/ZLzUrFSCia
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
何と「ボックスメニューブロック」という機能が追加されました!
「ボックスメニューブロック(以下ボックスメニュー)」が実装されたことにより、このような『ボックスナビ』を簡単に作ることができるようになったのです。
![わたしのサイトで表示させているボックスナビの画像](https://oyoyo-m.com/wp-content/uploads/2022/04/76a65e690906edcc9e4bcddfc85fb5ea-1.jpg)
![わたしのサイトで表示させているボックスナビの画像](https://oyoyo-m.com/wp-content/uploads/2022/04/76a65e690906edcc9e4bcddfc85fb5ea-1.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/538dcb925b997abf969011867a111d9d-1024x150.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/538dcb925b997abf969011867a111d9d-1024x150.jpg)
実は、当ブログで「リッチカラム」と「ブログパーツ」を使ったボックスナビ(ナビゲーションボックス)の作り方を紹介していました。
でも「リッチカラム」より「ボックスメニュー」を使う方が、より簡単にボックスナビを作れるのです。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/07b20c0a4b4ab30f74d54b7492fbf691-300x158.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/07b20c0a4b4ab30f74d54b7492fbf691-300x158.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/07b20c0a4b4ab30f74d54b7492fbf691-300x158.png)
SWELLなら簡単!サイドバーのナビゲーションボックスを作る方法を解説【CSS不要!】
この記事は【SWELL】のブログパーツを使ってサイドバーの<ナビゲーションボックス>を作る方法を解説しています。CSSやHTMLが一切不要です!
![](https://oyoyo-m.com/wp-content/uploads/2021/08/34c91a9912ddf33950502b48e9526e4e.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/34c91a9912ddf33950502b48e9526e4e.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/34c91a9912ddf33950502b48e9526e4e.png)
もうこの記事の需要がなくなったわね
![](https://oyoyo-m.com/wp-content/uploads/2021/08/6626da4eb323e3c00a9584fd4db76dba.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/6626da4eb323e3c00a9584fd4db76dba.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/6626da4eb323e3c00a9584fd4db76dba.png)
おっしゃる通り。それほど今回追加された「ボックスメニュー」を使うと超簡単にボックスナビが作れるようになったのです。
今回は、SWELLの「ボックスメニュー」の機能や使い方について紹介します。
この記事を読めば「ボックスメニュー」の主な機能や「ボックスナビ」の作り方がわかりますよ!
SWELLのアップデートに関する詳細は、こちらの公式サイトをご覧ください。
SWELL
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://swell-theme.com/wp-content/uploads/2022/04/thumb-2-6-1.webp)
![](https://swell-theme.com/wp-content/uploads/2022/04/thumb-2-6-1.webp)
![](https://swell-theme.com/wp-content/uploads/2022/04/thumb-2-6-1.webp)
【SWELL – ver. 2.6.1 アップデート情報】 | WordPressテーマ SWELL
主なアップデート内容 「ボックスメニュー」ブロックを実装しました。「リスト入りグループ」という「リストがデフォルト配置された状態のグループブロック」を追加しまし…
ワードプレステーマ【SWELL】
¥17,600(税込)
初心者にも使いやすくシンプルで高機能なワードプレステーマ。快適な使い心地で、いち押しです!もちろん私も愛用しています。
タップできる目次
【SWELL】ボックスメニューの魅力あふれる便利な機能を5つ紹介
![](https://oyoyo-m.com/wp-content/uploads/2022/04/b579a741eccefbdd6b5b19338a73d692-1024x576.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/b579a741eccefbdd6b5b19338a73d692-1024x576.jpg)
まず「ボックスメニュー」の便利すぎる機能を5つ紹介します。
- 「標準」と「塗り」から選べるボックスのデザイン
- 使えるアイコンが標準装備されている
- アイコンの色を自由に変えることができる
- アイコンの大きさや余白などの設定もボタンひとつでラクラク
- オリジナルアイコンも簡単に挿入できる
【便利な機能 ①】「標準」と「塗り」から選べるボックスのデザイン
![](https://oyoyo-m.com/wp-content/uploads/2022/04/8634a0251dfe820e74dba85c876dc73d-1024x566.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/8634a0251dfe820e74dba85c876dc73d-1024x566.jpg)
SWELLのボックスナビは「標準」と「塗り」のスタイルが用意されています
好みに応じて、ボタン一つでデザインを選べるのはとても嬉しい機能ですよね。
【便利な機能 ②】使えるアイコンが標準装備されている
![](https://oyoyo-m.com/wp-content/uploads/2022/04/21e62c79e70488b36ebd70e07cafdde5-1024x578.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/21e62c79e70488b36ebd70e07cafdde5-1024x578.jpg)
ボックスナビを作るために必要なアイコンも、標準で多数用意されています。
「SWLL」のアイコンもありますので、こんなボックスナビも簡単に作ることができますよ。
【便利な機能 ③】エディータ画面でアイコンの色を自由に変えることができる
![](https://oyoyo-m.com/wp-content/uploads/2022/04/cebab092e17083a036719e65aec51a83-1024x569.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/cebab092e17083a036719e65aec51a83-1024x569.jpg)
アイコンの色を変えたい場合も、ボタンひとつで色を変えることができます。
エディーター画面のボタン操作で簡単に色を変えることができるのです。
もちろんタイトルの色も自由に変えることができますよ。
【便利な機能 ④】アイコンの大きさや余白などの設定もボタンひとつでラクラク
![](https://oyoyo-m.com/wp-content/uploads/2022/04/a57931b64fa297e741bbd4dfe7892d68-1024x566.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/a57931b64fa297e741bbd4dfe7892d68-1024x566.jpg)
アイコンの「レイアウト」「大きさ」「余白」もボタン一つで簡単に設定できます。
実際のサイト画面で出来栄えを確認しながら、設定を微調整する作業も楽になりました。
テキストを左横にすることもできますよ。
【便利な機能 ⑤】オリジナルアイコンも簡単に挿入できる
![](https://oyoyo-m.com/wp-content/uploads/2022/04/1061b2c84124344c1690ac826e3800ca-1024x584.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/1061b2c84124344c1690ac826e3800ca-1024x584.jpg)
SWELLの標準アイコン以外に、自分でつくった画像をアイコンにすることができます。
アイコンタイプのボタンから、画像を取り込むだけでオリジナルアイコンのボックスナビをつくることができます。(オリジナルアイコンは色を変えることができません)
こちらはオリジナルアイコンの一例です(^_^)
「ボックスナビ」でカスタマイズのバリエーションがますますひろがりますね!
トップページ「おすすめ記事コーナー」の目次のデザインをリニューアルしました。
— リタイアかわうそ|Canva大好き (@Ed2QvvUTFM4ZLf0) April 27, 2022
SWELL の新機能 【ボックスメニューブロック 】で作っています✨https://t.co/EYSgA7rLhk#SWELL #ボックスメニューブロック pic.twitter.com/wEbFs1nUxU
スポンサーリンク
【SWELL】ボックスメニューでサイドバーにボックスナビを作る方法
![](https://oyoyo-m.com/wp-content/uploads/2022/04/beec5cd22b24d2582186fc5eecc8c1f4-1024x576.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/beec5cd22b24d2582186fc5eecc8c1f4-1024x576.jpg)
さっそく、当サイトの姉妹ブログ『まったり旅するblog』のサイドバーにボックスナビを作りましたので、その手順を紹介します。
作成手順は、以下の3ステップです。
- ステップ1
- ボックスナビ用のオリジナルアイコンをつくる
(オリジナルアイコンを使用しない場合は不要) - ステップ2
- サイドバーに表示させるボックスナビのブログパーツをつくる
- ステップ3
- ブログパーツで作成したボックスナビをサイドバーに表示させる
【ステップ1】ボックスナビ用のオリジナルアイコンをつくる
SWELL「ボックスメニュー」は、事前にアイコンが多数用意されています。
「でも、オリジナルのアイコンも使いたい!」という場合は、自分でアイコンを用意しましょう。
今回わたしが用意した「オリジナルアイコン」はこちら。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/4.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/4.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5.png)
どちらのアイコンも、オンラインデザイン作成ツール【Canva】を使って作りました。
![](https://oyoyo-m.com/wp-content/uploads/2023/07/image.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/image.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
「Canvaでアイコンを作る方法」は下記をクリック
Canvaでオリジナルアイコンを作る方法は
このタブをクリック
STEP
Canvaのホーム画面右上「デザインを作成」→「ロゴ」をクリック
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3125c2f9e5e82bcbd4d73e61afc290d4-1024x532.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3125c2f9e5e82bcbd4d73e61afc290d4-1024x532.jpg)
ロゴを作成する画面が開きました。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/fe7e7b581a7692cf759282df83ba2618-1024x531.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/fe7e7b581a7692cf759282df83ba2618-1024x531.jpg)
STEP
ロゴの外枠をつくる
STEP
左サイドバー「素材」をクリックし正方形を検索する
お好みの枠をお選びください
![](https://oyoyo-m.com/wp-content/uploads/2022/04/fe7e7b581a7692cf759282df83ba2618-1.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/fe7e7b581a7692cf759282df83ba2618-1.jpg)
STEP
選択した枠の大きさと色を調整する
エディーター画面いっぱいの大きさに拡大します。
枠の上をクリックすると、左上にカラーパレットボタンが出てきます。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/02e89626ec6e668a3ca6440a1f7f392d.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/02e89626ec6e668a3ca6440a1f7f392d.jpg)
カラーパレットの画面です。
赤枠のボタンをクリックすると、色を自由に作ることができます。
![](https://oyoyo-m.com/wp-content/uploads/2022/04/f0ea753ac47997a643e6b034d99a2b9b.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/f0ea753ac47997a643e6b034d99a2b9b.jpg)
今回はブログの雰囲気に合わせて、少し濃いめのピンク(D1959E)にしました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/92a50b101458f1e18598620460ced8be.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/92a50b101458f1e18598620460ced8be.jpg)
STEP
外枠をコピーする
赤枠は「複製ボタン」です。必要分の枠を複製してください。
今回は、8個複製をつくりました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/8257c10242994eca1eca230f8a76782b.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/8257c10242994eca1eca230f8a76782b.jpg)
STEP
ロゴの内側をつくる
今回は、以下のロゴを8つ作ります(偶数になるようにします)
STEP
各ボックスナビにマッチするイラストをさがす
「素材」の検索窓にキーワードを入れて、ピッタリのイラストをさがします
![](https://oyoyo-m.com/wp-content/uploads/2022/04/edf2a8b23270f2fb01aefddaeac39bfb.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/edf2a8b23270f2fb01aefddaeac39bfb.jpg)
STEP
ロゴ用のイラストを見つけました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/ec392a21a0958814c1da23c67320ef36.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/ec392a21a0958814c1da23c67320ef36.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5e1bc1317c017a62dea0b748660333b8.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5e1bc1317c017a62dea0b748660333b8.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/66615ce5d94a3ee2157663d61bddfdbe.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/66615ce5d94a3ee2157663d61bddfdbe.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6b99847cec291a983314ce5d6019c1a8.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6b99847cec291a983314ce5d6019c1a8.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/ceeefee55e567275dbd8c513583f2839.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/ceeefee55e567275dbd8c513583f2839.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/83ce7a238170f2e69c875873029f8d11.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/83ce7a238170f2e69c875873029f8d11.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/36cc761ccafeca136b14df53528f6dfc.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/36cc761ccafeca136b14df53528f6dfc.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5b52bb370501fa4d272eb92d6d6f8e83.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5b52bb370501fa4d272eb92d6d6f8e83.jpg)
STEP
イラストの大きさと色を調整する
イラストは外枠と同じ色にしました
イラスト下にテキストを入れるので、スペースを空けておきます
![](https://oyoyo-m.com/wp-content/uploads/2022/04/12-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/12-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/12-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/12-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/4-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/4-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/16.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/16.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/6-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5-1.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/5-1.png)
STEP
テキストを入れる
左サイドバー「テキスト」→「見出しを追加」をクリックします
![](https://oyoyo-m.com/wp-content/uploads/2022/04/999fedea3052be801259d9dd91e1f2d3.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/999fedea3052be801259d9dd91e1f2d3.jpg)
STEP
テキストの大きさや色を調整します
一部枠のデザインも変えました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/80285814e70c580be1d62bfd9958c902.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/80285814e70c580be1d62bfd9958c902.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/c5f0444478152be4cdd29decbbee5d27.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/c5f0444478152be4cdd29decbbee5d27.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/44ec30b5960802eaefa2112a516e005b.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/44ec30b5960802eaefa2112a516e005b.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2607ef91977ba3ae32154c6983ab4eb7.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2607ef91977ba3ae32154c6983ab4eb7.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3ecf62c37e2b7c5cfbc261945ff1dbd8.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/3ecf62c37e2b7c5cfbc261945ff1dbd8.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2380e2cadc5034fba486d3bf49cc3577.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2380e2cadc5034fba486d3bf49cc3577.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/153253064dd5a90ba5efade6bff7bcb5.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/153253064dd5a90ba5efade6bff7bcb5.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/65b34181b5e5a2f98dd98da3dd7e8c1c.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/65b34181b5e5a2f98dd98da3dd7e8c1c.png)
STEP
完成したロゴをダウンロードする
STEP
画面右上「共有」⇒「ダウンロード」をクリック
![](https://oyoyo-m.com/wp-content/uploads/2022/04/e26068d2da68aea7646deddb90236b62-1024x620.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/e26068d2da68aea7646deddb90236b62-1024x620.jpg)
STEP
ダウンロードの設定をする
ロゴの背景色を残したいときは「透過背景」にチェックを入れないでください
![](https://oyoyo-m.com/wp-content/uploads/2022/04/b029d743da3a2346e3d4adfdefcb43b0-1024x613.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/b029d743da3a2346e3d4adfdefcb43b0-1024x613.jpg)
STEP
ダウンロードが始まりました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/4553ea481d57a36bb47d7f7d2ef2ef51.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/4553ea481d57a36bb47d7f7d2ef2ef51.jpg)
このような表示が出た場合は「こちらをクリック」をクリックしてください
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2fe5d2418e1493fbfae33ff48a201c43-1024x330.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2fe5d2418e1493fbfae33ff48a201c43-1024x330.jpg)
STEP
ダウンロードしたファイルをわかりやすい場所に保存する
ダウンロードされるのは『ZIPファイル(圧縮ファイル)』です
![](https://oyoyo-m.com/wp-content/uploads/2022/04/94e41b0d7e1351fce07bcabb12867320.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/94e41b0d7e1351fce07bcabb12867320.jpg)
STEP
ZIPファイル(圧縮ファイル)を開いて中のファイルを別の場所に保存
![](https://oyoyo-m.com/wp-content/uploads/2022/04/076dcc2282c3f5cccdba4c7c50ee760b.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/076dcc2282c3f5cccdba4c7c50ee760b.jpg)
中のファイルをコピーして、新規作成したフォルダにコピー、ファイル名を変更して保存します
![](https://oyoyo-m.com/wp-content/uploads/2022/04/f52422195d901da964c1043cdfd2600c.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/f52422195d901da964c1043cdfd2600c.jpg)
【ステップ2】サイドバーに表示させるボックスナビのブログパーツをつくる
次は、ボックスナビのブログパーツをつくります。
ブログパーツ基本的な使い方は、以下の2ステップです。
STEP
ブログパーツでコンテンツをつくる
- 【ブログパーツのエディーター画面】でコンテンツを作成し公開する
- 作成したブログパーツの「呼び出しコード」をコピーする
STEP
ブログパーツをサイト内の好きな場所に表示させる
- 【外観】 → 【ウィジェット画面】をひらく
- 表示させたい場所に【カスタムHTML】をスライドする
- 【カスタムT HML】にブログパーツの「呼び出しコード」をはりつけて保存する
- 表示画面で確認をする
STEP
ブログパーツの新規エディーター画面を開く
![ボックスメニューでサイドバーにボックスナビを作る方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/01/fa6beaef6122f40f37bef49df65c4ad4.jpg)
![ボックスメニューでサイドバーにボックスナビを作る方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/01/fa6beaef6122f40f37bef49df65c4ad4.jpg)
STEP
エディーターに「ボックスメニュー」を表示させる
![ボックスメニューでサイドバーにボックスナビを作る方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/9864d797d3e1df5c300de1d3dbd3b184-1024x502.jpg)
![ボックスメニューでサイドバーにボックスナビを作る方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/9864d797d3e1df5c300de1d3dbd3b184-1024x502.jpg)
STEP
行を追加する
プラスボタンをクリックして「リンクボックス」を追加します
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/d736d7a62c42d55a266234d37182aefa-1024x470.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/d736d7a62c42d55a266234d37182aefa-1024x470.jpg)
列を追加する場合は、こちらから行います
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/5c9e6cd676b578c32aee92fece34a3b9.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/5c9e6cd676b578c32aee92fece34a3b9.jpg)
今回は、2列×3行ににしました
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/241a6c0e9778dd6ce18f6498a6e9dab9-1024x512.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/241a6c0e9778dd6ce18f6498a6e9dab9-1024x512.jpg)
STEP
リンクボックスにアイコンを挿入する
赤枠部分が「オリジナルアイコン」、それ以外は「SWELLの標準装備アイコン」を挿入しました
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/4fcb6085899b0924d422d43dea4805ae-1024x645.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/4fcb6085899b0924d422d43dea4805ae-1024x645.jpg)
「SWELLの標準アイコン」の挿入方法
STEP
リンクボックスをクリック
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/21ae2dec18ff05b64d9c5b9870f7bfb4.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/21ae2dec18ff05b64d9c5b9870f7bfb4.jpg)
STEP
右サイドバーに表示された「アイコン選択」をクリック
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/969bf1f2428f57cbc943c46c0262c919.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/969bf1f2428f57cbc943c46c0262c919.jpg)
STEP
アイコンを選んでクリック
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/80d2442e7e12858880477acf3530ff20.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/80d2442e7e12858880477acf3530ff20.jpg)
STEP
アイコンが表示されました
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/c89373ba5461540ab941b8af46d98cc4.jpg)
![ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2022/04/c89373ba5461540ab941b8af46d98cc4.jpg)
「オリジナルアイコン」の挿入方法
STEP
リンクボックスをクリック
![](https://oyoyo-m.com/wp-content/uploads/2022/04/8b9391ee3a0ccc125e9f563a45e4e8dd.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/8b9391ee3a0ccc125e9f563a45e4e8dd.jpg)
STEP
右サイドバーに表示された「アイコンタイプの画像」をクリック⇒オリジナルアイコン画像を入力
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2aab24be09af92aeb50e634dee916c1d.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/2aab24be09af92aeb50e634dee916c1d.jpg)
STEP
オリジナルアイコンが表示されました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/329707aaa0307adf83ff5eb8b724445e.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/329707aaa0307adf83ff5eb8b724445e.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
他のアイコンも挿入しました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0d8db37c6292be0bb85984a95e4851b9-1024x455.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0d8db37c6292be0bb85984a95e4851b9-1024x455.jpg)
STEP
アイコンボックスにテキストを入れる
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0454a4fd865157fd7e92fff75c8fd91b-1024x589.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0454a4fd865157fd7e92fff75c8fd91b-1024x589.jpg)
STEP
アイコンボックスにリンク先のURLを受け込む
![](https://oyoyo-m.com/wp-content/uploads/2022/04/661a4d1b36fca5114ba095f7b1e97126.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/661a4d1b36fca5114ba095f7b1e97126.jpg)
STEP
リンクボックスの大きさや余白を調整する
実際に表示させてから調整しても大丈夫です。
私は下記のように設定しました
![](https://oyoyo-m.com/wp-content/uploads/2022/04/1a6618a74442a84d5ce57257ba09750e.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/1a6618a74442a84d5ce57257ba09750e.jpg)
STEP
ブログパーツを「公開」にします
ボックスナビが完成したら、忘れずに「公開」をクリックしてください
【ステップ3】 ブログパーツで作成したボックスナビをサイドバーに表示させる
STEP
作成したブログパーツの「呼び出しコード」をコピーする
![](https://oyoyo-m.com/wp-content/uploads/2022/04/bcb3d70948575c6f5a0b36990da96303-1024x221.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/bcb3d70948575c6f5a0b36990da96303-1024x221.jpg)
STEP
【カスタムHTML】を【共通サイドバー】へスライドさせる
![](https://oyoyo-m.com/wp-content/uploads/2022/01/0957e7b874bc38554fa32425f1a965d0.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/0957e7b874bc38554fa32425f1a965d0.jpg)
STEP
「カスタムTHLM」へコピーしたブログパーツの「呼び出しコード」をペースト
![](https://oyoyo-m.com/wp-content/uploads/2022/04/7c93018bb180eabe1497eaebd4f4c727.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/7c93018bb180eabe1497eaebd4f4c727.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
わすれずに 保存 をクリックしてくださいね
ワードプレステーマ【SWELL】
¥17,600(税込)
初心者にも使いやすくシンプルで高機能なワードプレステーマ。快適な使い心地で、いち押しです!もちろん私も愛用しています。
まとめ ~進化を続けるSWELLから目が離せない~
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0e4fe597eac8ff1a3ff25b800e42973a-1024x576.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/0e4fe597eac8ff1a3ff25b800e42973a-1024x576.jpg)
今回は、2022年4月に新たにSWELL追加された「ボックスメニュー」の魅力的な機能と使い方について紹介をしました。
「ボックスメニュー」と「ブログパーツ」を組み合わせれば、サイト内のどこにでも簡単に「ナビボックス」を表示させることができます。
常に進化を続けるSWELL!
「こんな機能があったらいいのに・・・」という夢がどんどん実現している印象です。
何よりSWELLユーザーにとってありがたいのは・・・
アップデートの費用がいっさいかからないということ!
しかも一度購入すれば、複数のサイトで使いまわしができるのです!
SWELLはコスパのよさが最強!としか言いようがありません
![](https://oyoyo-m.com/wp-content/uploads/2021/08/67533acd061837cb4b301df0ab235867.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/67533acd061837cb4b301df0ab235867.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/67533acd061837cb4b301df0ab235867.png)
開発者さん、こんな太っ腹なサービスを続けて大丈夫なんですか?
もし、SWELLにしようか迷っている方がいましたら
全力で【SWELL】をおすすめします!
ワードプレステーマ【SWELL】
¥17,600(税込)
初心者にも使いやすくシンプルで高機能なワードプレステーマ。快適な使い心地で、いち押しです!もちろん私も愛用しています。
おしゃれなオリジナルアイコンをつくるなら【Canva】がおススメです
![](https://oyoyo-m.com/wp-content/uploads/2022/04/CANVA3.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/CANVA3.jpg)
あなたに