![](https://satokoweb.com/wp-content/uploads/2020/04/woman-150x150.png)
ブログのサイドバーにボックスメニューを設置したいけど、どうすればいいの?
こんな悩みはありませんか?
この記事では、サイドバーにボックスメニューを設置してブログを見やすくする方法を紹介します。
サイドバーにボックスメニューを置くと、ブログの雰囲気がグッとよくなりますよ♪
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato.png)
海外在住の40代・男児2人のママ
40代で未経験からWebライターに挑戦。回り道をしてようやく自分のペースで働けるライティング力を手に入れる
Webライター×ワードプレスブログでお金&自由な時間を手に入れる情報を発信中
サイドバーにボックスメニューを設置したい!
以前使っていたWordPressテーマ「JIN」は、かわいらしい雰囲気がお気に入りでした。
サイドバーにボックスメニューを設置して、さらに素敵な雰囲気に……↓
![](https://satokoweb.com/wp-content/uploads/2022/12/jin-boxmenu-1024x691.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/jin-boxmenu-1024x691.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
SWELLのサイドバーにもボックスメニューを設置したい!
というわけで、SWELLのサイドバーにもボックスメニューを設置してみました。
ボックスメニューの設置方法を、画像と一緒に詳しく紹介していきます。
SWELLのサイドバーにボックスメニューを設置する方法
SWELLのサイドバーにボックスメニューを設置する手順は、こちらの2ステップ。
- ブログパーツで「ボックスメニュー」をつくる
- ウィジェットの「共通サイドバー」に追加する
WordPress初心者でも、ゆっくり設定していけば大丈夫!
画像を使って説明していくので、一緒に設定してみましょう。
ステップ1 ブログパーツで「ボックスメニュー」をつくる
まずはブログパーツで「ボックスメニュー」を作りましょう。
ブログパーツを新規作成する
左のメニューから「ブログパーツ」⇒「新規作成」をクリック。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-001.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-001.png)
タイトルを入力したらボックスメニューを選ぶ
タイトルを入力します。
自分がわかりやすいタイトルなら何でも大丈夫!
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
私は「ボックスメニュー(サイドバー)」にしました♪
タイトルを入力したら、左上の「+」をクリック。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-002-1024x236.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-002-1024x236.png)
ブロックメニューが出てくるので、下のほうにある「ボックスメニュー」をクリック。
ボックスメニューが出てきますよ。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-003-1024x426.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-003-1024x426.png)
ボックスメニューのスタイルを設定する
ボックスメニューが出てきました!
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-004-1024x454.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-004-1024x454.png)
右側のメニューからスタイルが選べます。
メニューを下にスクロールしていくと「アイコンサイズ」や「デバイスごとの列数」も選べるので、好きなように設定しましょう。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-005-1024x448.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-005-1024x448.png)
パソコン・タブレット・スマホごとにボックスメニューの列数を設定できますよ!↑
ボックスメニューのアイコンを設定する
ボックスメニューのスタイル設定が終わったら、アイコンを設定しましょう。
ボックスをクリックし「アイコン選択」をクリック。
いろんなアイコンが出てくるので、好きなアイコンを選びます。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-006-1024x445.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-006-1024x445.png)
ボックスを増やしたいときは……
ボックスを増やしたいときは、一番下にある「+」をクリックするとひとつずつボックスが追加されますよ↓
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-007-1024x484.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-007-1024x484.png)
アイコンの色を変えたいときは……
アイコンの色を変えたいときは、右側のメニューの「アイコンカラー」をクリック。
いろんな色が出てくるので、好きな色を選びましょう。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-008-1024x447.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-008-1024x447.png)
ボックスメニューのテキストを設定する
アイコンが設定できたら、テキストも設定しましょう。
「Text…」の部分をクリックすると、文字を入力できます。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-009-1024x433.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-009-1024x433.png)
テキストの色を変えたいときは……
テキストの色を変えたいときは、右側のメニューの「テキストカラー」をクリック。
いろんな色が出てくるので、好きな色を選びましょう。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-010-1024x485.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-010-1024x485.png)
ボックスメニューのリンクを設定する
アイコンとテキストが設定できたら、各ボックスのリンクを設定しましょう。
ボックスをクリック⇒リンクボタンをクリック
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-011-1024x446.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-011-1024x446.png)
リンク先のURLを入力したら「URL」をクリック。
これでボックスのリンクが設定されました。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-013-1024x447.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-013-1024x447.png)
ボックスメニューを公開し、ブログパーツのページへ
すべてのリンクが設定できたら、右上の「公開」をクリック。
ボックスメニューを公開したら、左上のアイコンをクリックしてブログパーツのページへ戻りましょう。
これで「ステップ1」は終了です!
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-016-1024x465.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-016-1024x465.png)
ステップ2 ウィジェットの「共通サイドバー」に追加する
ボックスメニューが公開できたら、サイドバーに追加しましょう。
呼び出しコードをコピーし、ウィジェットのページへ
ブログパーツのページに戻ったら、ボックスメニューの「呼び出しコード」をコピーします。
コードをコピーしたら、左のメニューから「外観」⇒「ウィジェット」をクリック。
ウィジェットのページへいきましょう。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-018-1024x604.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-018-1024x604.png)
共通サイドバーに「テキスト」をドラッグ&ドロップする
「共通サイドバー」の中に、左側のメニューから「テキスト」をドラッグ&ドロップします。
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
![](https://satokoweb.com/wp-content/uploads/2024/02/icon-sato-150x150.png)
ドラッグ&ドロップとは、クリックしたまま移動させること。
「テキスト」をクリックしたまま移動させて「共通サイドバー」の中に入れればOK!
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-019-1024x717.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-019-1024x717.png)
「テキスト」にコードを貼り付けて保存する
共通サイドバーの中に「テキスト」を入れたら、さっきコピーした「呼び出しコード」を貼り付けます。
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-020-1024x573.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-020-1024x573.png)
コードを貼り付けたら、右下の「保存」をクリック。
これでサイドバーにボックスメニューが設定できました♪
トップページを確認する
設定が終わったら、トップページを確認してみましょう。
サイトバーにボックスメニューが表示されていれば大成功です♪
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-021-1024x729.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-021-1024x729.png)
サイドバー内でボックスメニューを移動させたいときは……
サイドバー内で移動させたいときは「ドラッグ&ドロップ」で好きな場所に移動させられます。
「テキスト」をクリックしたまま好きな場所で移動させましょう。
(移動させたときは、自動で保存してくれます)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-022-1024x498.png)
![](https://satokoweb.com/wp-content/uploads/2022/12/swell-boxmenu-022-1024x498.png)
移動させたあとは、変更できているかトップページで確認してくださいね!
【SWELL】ボックスメニューをサイドバーに設置する方法 まとめ
ブロックエディターで直感的に読みやすい記事が書けるSWELL。
慣れると簡単なのですが、テーマを変えたばかりの頃は設定の仕方がわからなくて大変でした……(涙)
ひとつ設定をしようとするたびに、いろんなブログを調べまくりました。
今回は、サイドバーにボックスメニューを設置する方法を紹介しました。
WordPress初心者には少し難しいかもしれませんが、ゆっくり設定していけば大丈夫!
このブログを見ながら、ぜひチャレンジしてみてくださいね。