![](https://oyoyo-m.com/wp-content/uploads/2021/08/d9a3b9d2b785c467f2b334c6a059997f-1.png)
SWELLなら簡単!サイドバーのナビゲーションボックスを作る方法を解説【CSS不要!】
当ページのリンクには広告が含まれています。
![SWELLなら簡単!サイドバーのナビゲーションボックスを作る方法を解説【CSS不要!】](https://oyoyo-m.com/wp-content/uploads/2022/01/07b20c0a4b4ab30f74d54b7492fbf691.png)
- サイドバーにナビゲーションボックスを作る方法を知りたい
- でも「CSS」「HTML」は使いたくない(使えない)
そんなおあなたの悩みを解決します。
SWELLなら「CSS」「HTML」コードをいっさい使わずに、こんなナビゲーションボックスをつくることができます。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/318fbb3365227b52817e2fd9a575afd4.jpg)
![かわうそ](https://oyoyo-m.com/wp-content/uploads/2021/08/b60f1ca6ded20b5ec26c663a6605c4b1-2-150x150.png)
かわうそ
実はこの「ナビゲーションボックス」は SWELLの【ブログパーツ】と【リッチカラム】で作りました
ブログパーツとリッチカラムを使えば、むずかしいコードを使わずにナビゲーションボックスができちゃいます。
おしゃれなナビげ―ジョンボックスで、サイトの回遊率があがるかも!
ぜひ参考にしてみてくださいね 。
お知らせ
当ブログにご訪問ありがとうございます。
2022年4月15日、SWELLが【SWELL v.2.6.1】にバージョンアップされ、新たに「ボックスメニュー」という機能が追加されました。
「ボックスメニュー」を使うことで、当記事で紹介している「リッチカラム」を使う方法より簡単に『ナビゲーションボックス』をつくることができるようになりました。
下記の記事にて「ボックスメニュー」と「ブログパーツ」を使って『ナビゲーションボックス』を作る方法を解説していますので、どうぞご参照ください。
(2022年4月18日追記)
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://oyoyo-m.com/wp-content/uploads/2022/04/f8172abc72fe3c42be3ebb7e5666e126-300x168.png)
【SWELL】新機能ボックスメニューでボックスナビを作る方法|便利すぎる機能も紹介
2022年4月、SWELLに「ボックスメニュー」機能が追加されました。これによりサイドバーなどに表示する「ボックスナビ」も簡単につくれるようになりました。この記事では「ボックスメニュー」の便利な機能と使い方について解説しています。
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
オリジナルのアイコンで外枠なしの『ナビゲーションボックス』を作りたいという方は、このままこちらの記事をごらんください
![](https://oyoyo-m.com/wp-content/uploads/2022/01/40338b351459d27e26bbece0157b3c6a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/40338b351459d27e26bbece0157b3c6a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/b547f69a5715bd971a35d5128455ddd6.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/b547f69a5715bd971a35d5128455ddd6.jpg)
【SWELL v.2.6.1 をリリースしました🙌】
— 了🌊SWELL開発者 (@ddryo_loos) April 15, 2022
・「ボックスメニュー」ブロックを追加
・「リスト入りグループ」ブロックを追加
・「アイコンピッカー」リニューアル
・「セル背景」機能の追加調整
などなどです!#wpswellhttps://t.co/ZLzUrFSCia
スポンサーリンク
タップできる目次
CSSを使わずに<ナビゲーションボックス>が作れる【ブログパーツ】とは
![](https://oyoyo-m.com/wp-content/uploads/2021/08/1c1489d9ada1785c63cb619cbbb31734.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/1c1489d9ada1785c63cb619cbbb31734.jpg)
S
ブログパーツとは、専用のエディ―ターで作成したコンテンツを、サイト内の好きな場所にウィジェットで表示させることができる機能のことです。
SWELLのブログパーツを使えば、CSSやHTMLコードを使わずにナビゲーションボックスを作ることができます。
ブログパーツ基本的な使い方は、以下の2ステップです。
STEP
ブログパーツでコンテンツをつくる
- 【ブログパーツのエディーター画面】でコンテンツを作成し公開する
- 作成したブログパーツの「呼び出しコード」をコピーする
STEP
ブログパーツをサイト内の好きな場所に表示させる
- 【外観】 → 【ウィジェット画面】をひらく
- 表示させたい場所に【カスタムHTML】をスライドする
- 【カスタムT HML】にブログパーツの「呼び出しコード」をはりつけて保存する
- 表示画面で確認をする
ブログパーツの基本的な使い方は、こちらの記事でくわしく解説しています。
スポンサーリンク
SWELLの【ブログパーツ】でサイドバーにナビゲーションボックスを作る方法
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d71f275be6b2546e0e5cd918de8a4653.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d71f275be6b2546e0e5cd918de8a4653.jpg)
では、当ブログのナビゲーションマップの作り方を紹介します。
作成手順は、以下の3ステップです。
- ステップ1
- Canvaでナビゲーションボックスのロゴをつくる
- ステップ2
- ブログパーツでサイドバーに表示させるコンテンツをつくる
- ステップ3
- ブログパーツで作成したコンテンツをサイドバーに表示させる
【ステップ1】Canvaでナビゲーションボックスのロゴをつくる
まず、ナビゲーションマップのアイコンを作ります。
今回は、オンラインデザイン作成ツール【Canva】を使います。
![](https://www15.a8.net/0.gif?a8mat=3HKN87+7OUL2Q+4M9K+61RI9)
![](https://www15.a8.net/0.gif?a8mat=3HKN87+7OUL2Q+4M9K+61RI9)
STEP
Canvaのホーム画面でロゴを選択し空白を選択
気に入ったテンプレートがあれば、そちらを選択してください
![](https://oyoyo-m.com/wp-content/uploads/2022/01/c9e69b78915e78183467a48198ddd7f7.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/c9e69b78915e78183467a48198ddd7f7.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/2ac653938740462c070f133ba6dc87dd.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/2ac653938740462c070f133ba6dc87dd.jpg)
ロゴを作成する画面が開きました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e3c0b30ca0bb7f58b72400e4648f43e5.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e3c0b30ca0bb7f58b72400e4648f43e5.jpg)
STEP
ロゴの外枠をつくる
STEP
「素材」で正方形を検索する
今回は黄色で囲った枠を選んでみました(無料です)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/94e67badbf9564ff716c955af65b5e8e.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/94e67badbf9564ff716c955af65b5e8e.jpg)
STEP
選択した枠の大きさと色を調整する
今回は、当サイトのメインカラー(#e07f7f)にしました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/4a3c8bea4fc558c33a88abce3634a4e9.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/4a3c8bea4fc558c33a88abce3634a4e9.jpg)
STEP
ページを4つ複製する
作成するナビゲーションボックスの数だけコピーします
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e7d71eb82fd1dd25f6f4138d920e3196.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e7d71eb82fd1dd25f6f4138d920e3196.jpg)
STEP
「素材」でナビゲーションにマッチしたロゴをさがす
SWELL以外のロゴはCanvaでさがしました。
SWELLは、公式のロゴ画像をスクリーンショットしました
![](https://oyoyo-m.com/wp-content/uploads/2022/01/33169de85ba7e19ecbc192a46efe3bb5.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/33169de85ba7e19ecbc192a46efe3bb5.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/beeae67cd18a5b48627bbdef58761133.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/beeae67cd18a5b48627bbdef58761133.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/fe3d89ba0b622d345bbf811cf8f74b47.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/fe3d89ba0b622d345bbf811cf8f74b47.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/26a8895420ad6081217271e89d9fd826.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/26a8895420ad6081217271e89d9fd826.jpg)
STEP
ロゴの色を調整する
ロゴの色を外枠と同じ色に調整しました。
SWELLのロゴは写真なのでCanvaで色を変えることができません。
いったんパワーポイントで外枠に近い色に変えてから、Canvaにアップロードしました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/dba9081f323ff827c03d15bbde0490f2.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/dba9081f323ff827c03d15bbde0490f2.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/685c1a3450f76538b334fa92ffb3b305.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/685c1a3450f76538b334fa92ffb3b305.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/87c837cb581d12bb67580e9cdeaf1bcb.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/87c837cb581d12bb67580e9cdeaf1bcb.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/9bccea1c8eef782e284e949d39dc7a1c.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/9bccea1c8eef782e284e949d39dc7a1c.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/26a8895420ad6081217271e89d9fd826-1.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/26a8895420ad6081217271e89d9fd826-1.jpg)
STEP
外枠に画像とテキストを入れて位置や大きさをととのえる
ロゴが完成しました
![](https://oyoyo-m.com/wp-content/uploads/2022/01/20cb0a4402d7695db58db8a852802397.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/20cb0a4402d7695db58db8a852802397.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/1b47ea35319f12c17a5fae17110ef41a.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/1b47ea35319f12c17a5fae17110ef41a.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/6ace3c18b7a87bdfdccbbb630d7a1e14.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/6ace3c18b7a87bdfdccbbb630d7a1e14.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/81b2cd06f8a2fd23f6f7e03244d2f427.png)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/81b2cd06f8a2fd23f6f7e03244d2f427.png)
STEP
作成したロゴをダウンロードする
ファイルの種類は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)
必ず「透過背景」にチェックをしてください
![](https://oyoyo-m.com/wp-content/uploads/2022/01/1bba5feeb1f85ed273129fdf0bc7012f.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/1bba5feeb1f85ed273129fdf0bc7012f.jpg)
【ステップ2】ブログパーツでサイドバーに表示させるコンテンツをつくる
ブログパーツでナビゲーションロゴのコンテンツを作ります。
ナビボックスの見栄えをよくするコツ ❶
![](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)
それは「フルワイド」を使うことです!
「フルワイド」を使うと、サイドバーの幅いっぱいにナビゲーションボックスを表示させることができます。
(白い背景部分がサイドバーエリア)
フルワイドを使用
![](https://oyoyo-m.com/wp-content/uploads/2022/01/318fbb3365227b52817e2fd9a575afd4.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/318fbb3365227b52817e2fd9a575afd4.jpg)
フルワイド使用なし
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e25a55700ea19347413e0fb984aa798d.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e25a55700ea19347413e0fb984aa798d.jpg)
STEP
ブログパーツの新規エディーター画面を開く
![](https://oyoyo-m.com/wp-content/uploads/2022/01/fa6beaef6122f40f37bef49df65c4ad4.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/fa6beaef6122f40f37bef49df65c4ad4.jpg)
STEP
エディーターに「フルワイド」を表示させる
STEP
パターンの「ワイルドセクション」をクリック
![ワイルドセクションボタンを説明するための写真](https://oyoyo-m.com/wp-content/uploads/2021/08/79c6e13311c944c6b8d26a1c3738a39f.jpg)
![ワイルドセクションボタンを説明するための写真](https://oyoyo-m.com/wp-content/uploads/2021/08/79c6e13311c944c6b8d26a1c3738a39f.jpg)
検索窓に『フル』と入力するとすぐ見つかります
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5d3a7642f796ea17d54fe907931a7c73.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5d3a7642f796ea17d54fe907931a7c73.jpg)
フルワイドが表示されました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/7e91f8ed66cdab8ef73ae9cb169bd02a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/7e91f8ed66cdab8ef73ae9cb169bd02a.jpg)
STEP
フルワイドの設定をする
実際の背景は無色にしていますが、今回は説明用に色をつけています。
(背景色の不透明度を下げれば、背景色の色を消したり薄くすることもできます)
- サイト幅を選択
- 上下のPadding量⇒0
- 背景色⇒サイトのメインカラーに合わせてお好みで
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5e50adbf08529abeddc96ca649a8e516.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5e50adbf08529abeddc96ca649a8e516.jpg)
STEP
「フルワイド」の上に「リッチカラム」を表示させる
STEP
ブロックの「リッチカラム」ををクリック
検索窓に「リッチ」または「カラム」と入力するとすぐ見つかります
![](https://oyoyo-m.com/wp-content/uploads/2022/01/69e33392bf301e750403d4cad2809460.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/69e33392bf301e750403d4cad2809460.jpg)
フルワイドの上に「リッチカラム」が表示されました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/dddb56e876c1f9d710cf0719747710cd.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/dddb56e876c1f9d710cf0719747710cd.jpg)
STEP
リッチカラムの数を2×2にする
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5ecc86914b1d4d595757fed7f3843f34.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5ecc86914b1d4d595757fed7f3843f34.jpg)
STEP
カラムにCanvaで作ったロゴを入れる
![](https://oyoyo-m.com/wp-content/uploads/2022/01/970132c9f26b151f5abdcdadec43eb1e.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/970132c9f26b151f5abdcdadec43eb1e.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)
それは「ロゴ画像」に枠をつけること!
![](https://oyoyo-m.com/wp-content/uploads/2022/01/344cec8936d94cbe1b8455be85a03707.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/344cec8936d94cbe1b8455be85a03707.jpg)
見た目がすっきりして、よりナビゲーションボックスっぽさが増します。
![](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)
ロゴ枠がもっとシャープなデザインの場合、画像枠がない方がいいかもしれません。お好みでどうぞ。
枠アリ
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
枠ナシ
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e5c98bc59ccfe5bca141d10f378bd1ab.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e5c98bc59ccfe5bca141d10f378bd1ab.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)
それはカラム間の余白を縮小すること!
今回はデフォルトの1.5から0.3に縮小しました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/6557fcc7ae3bd78fca87abff8ddfd022.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/6557fcc7ae3bd78fca87abff8ddfd022.jpg)
各カラムが等間隔に配列されるため、見た目がよくなります。
デフォルト(1.5)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/2ab117445d76440a1dca42763dbd2042.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/2ab117445d76440a1dca42763dbd2042.jpg)
縮小(0.3)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
STEP
各ロゴにリンク先のURLを埋め込む
STEP
リッチカラムの「見出し」を消したらコンテンツのできあがり(公開をクリック)
実際の背景色は無色にしています。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e4d9fc84c30e1683ad3c351eb47065aa.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e4d9fc84c30e1683ad3c351eb47065aa.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)
忘れずに「公開」をクリックしてくださいね
【ステップ3】ブログパーツで作成したコンテンツをサイドバーに表示させる
STEP
作成したブログパーツの「呼び出しコード」をコピーする
![](https://oyoyo-m.com/wp-content/uploads/2022/01/f4d6c507261e098c38968ed643e8dbd5.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/f4d6c507261e098c38968ed643e8dbd5.jpg)
STEP
メニューの外観から【ウィジェット】を開く
STEP
【カスタムHTML】を【共通サイドバー】へスライドさせる
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/0957e7b874bc38554fa32425f1a965d0.jpg)
![](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/01/25c52ca600095ad45c427f571a86653c-1.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/25c52ca600095ad45c427f571a86653c-1.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)
わすれずに保存をクリックしてくださいね
*スマホ版のサイドバーにも入れました
![](https://oyoyo-m.com/wp-content/uploads/2022/01/210a9cc551900953c6f58f7d98657253.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/210a9cc551900953c6f58f7d98657253.jpg)
STEP
表示画面で確認する
サイドバーに「ナビゲーションボックス」が表示されました。
表示された画像をみて、必要ならロゴの大きさや位置を微調整してください。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ade0b21b63e8103f2a67ecc4f6dd3799.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ade0b21b63e8103f2a67ecc4f6dd3799.jpg)
スポンサーリンク
まとめ
![](https://oyoyo-m.com/wp-content/uploads/2021/09/620b9bb7cd35faac14e169a73f8691fe.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/09/620b9bb7cd35faac14e169a73f8691fe.png)
今回は「サイドバーのナビゲーションボックス」をSWELLのブログパーツを使って作る方法をご紹介しました。
「ナビボックス」の見栄えよくするコツも3つお伝えしました。
ナビボックスの見栄えをよくするコツ
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.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)
それは「フルワイド」を使うことです!
「フルワイド」を使うと、サイドバーの幅いっぱいにナビゲーションボックスを表示させることができます。
(白い背景部分がサイドバーエリア)
フルワイドを使用
![](https://oyoyo-m.com/wp-content/uploads/2022/01/318fbb3365227b52817e2fd9a575afd4.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/318fbb3365227b52817e2fd9a575afd4.jpg)
フルワイド使用なし
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e25a55700ea19347413e0fb984aa798d.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e25a55700ea19347413e0fb984aa798d.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)
それは「ロゴ画像」に枠をつけること!
![](https://oyoyo-m.com/wp-content/uploads/2022/01/344cec8936d94cbe1b8455be85a03707.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/344cec8936d94cbe1b8455be85a03707.jpg)
見た目がすっきりして、よりナビゲーションボックスっぽさが増します。
![](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)
ロゴ枠がもっとシャープなデザインの場合、画像枠がない方がいいかもしれません。お好みでどうぞ。
枠アリ
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
枠ナシ
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e5c98bc59ccfe5bca141d10f378bd1ab.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/e5c98bc59ccfe5bca141d10f378bd1ab.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)
それはカラム間の余白を縮小すること!
今回はデフォルトの1.5から0.3に縮小しました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/6557fcc7ae3bd78fca87abff8ddfd022.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/6557fcc7ae3bd78fca87abff8ddfd022.jpg)
各カラムが等間隔に配列されるため、見た目がよくなります。
デフォルト(1.5)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/2ab117445d76440a1dca42763dbd2042.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/2ab117445d76440a1dca42763dbd2042.jpg)
縮小(0.3)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/ceedc892662b346d0d0d6f36f7ba5d80.jpg)
SWELLなら、CSSやHTMLコードをいっさい使わずに「ナビゲーションボックス」を設置できます。
ロゴのデザインを変えれば、ぐっと雰囲気が違うナビボックスが作れます。
こちらはちょっと、シャープなデザインのサイトを意識してみました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/7b927265d29a90dc948a33e9921453d9.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/7b927265d29a90dc948a33e9921453d9.jpg)
ブロガーのあこがれ【ヒトデブログ風】デザインの「ナビボックス」も作ってみました。
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5b890b73b9be148460f852b502451fe7.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2022/01/5b890b73b9be148460f852b502451fe7.jpg)
ヒトデさんと言えば <JIN>
<JIN> といえば「ナビゲーションボックス」というイメージがありますよね。
でも<JIN>でなくても【SWELL】でも簡単に作れますよ!
(勝手に真似してごめんなさい)
![](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)
決してこのロゴデザインは パクリ 使いません(^.x.^)
いかがでしたか。
ぜひ、あなたのブログにピッタリな「ナビゲーションボックス」を作って
サイトの周遊率をアップさせましょう!
最後まで、お読みくださりありがとうございました。
SWELL【ブログパーツ】の基本的な使い方を解説しています。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/c913622d4f1e73031de654282b50fe22-300x169.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/c913622d4f1e73031de654282b50fe22-300x169.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/c913622d4f1e73031de654282b50fe22-300x169.jpg)
【SWELL】ブログパーツの基本をわかりやすく解説!カスタマイズ実例5選も紹介
ワードプレスの有料テーマSWELLの「ブロックパーツ」を使うと簡単にサイトをカスタマイズできます。この記事では、ブログパーツの基本的な使い方と当サイトのカスタマイズ実例5選の紹介しています。「パソコンはあまり得意ではないけど、サイトをおしゃれにカスタマイズしてみたい」という方におススメの内容です。
有用性の低いコンテンツの原因・対策・修正法教えます
私がアドセンス審査でお世話になった先生です。具体的で実践的なアドバイスを丁寧にしていただきました。無料修正回数は無制限。コンサルの日数は要相談。ビデオチャット打ち合わせ可能。
不要
です!