SWELLなら簡単！サイドバーのナビゲーションボックスを作る方法を解説【CSS不要！】

そんなおあなたの悩みを解決します。

SWELLなら「CSS」「HTML」コードをいっさい使わずに、こんなナビゲーションボックスをつくることができます。

ブログパーツとリッチカラムを使えば、むずかしいコードを使わずにナビゲーションボックスができちゃいます。

おしゃれなナビげ―ジョンボックスで、サイトの回遊率があがるかも！

ぜひ参考にしてみてくださいね 。

【SWELL v.2.6.1 をリリースしました🙌】

・「ボックスメニュー」ブロックを追加
・「リスト入りグループ」ブロックを追加
・「アイコンピッカー」リニューアル
・「セル背景」機能の追加調整

などなどです！#wpswellhttps://t.co/ZLzUrFSCia

— 了🌊SWELL開発者 (@ddryo_loos) April 15, 2022

CSSを使わずに＜ナビゲーションボックス＞が作れる【ブログパーツ】とは

ブログパーツとは、専用のエディ―ターで作成したコンテンツを、サイト内の好きな場所にウィジェットで表示させることができる機能のことです。

SWELLのブログパーツを使えば、CSSやHTMLコードを使わずにナビゲーションボックスを作ることができます。

ブログパーツ基本的な使い方は、以下の２ステップです。

ブログパーツの基本的な使い方は、こちらの記事でくわしく解説しています。

SWELLの【ブログパーツ】でサイドバーにナビゲーションボックスを作る方法

では、当ブログのナビゲーションマップの作り方を紹介します。

作成手順は、以下の３ステップです。

ステップ１

Canvaでナビゲーションボックスのロゴをつくる

ステップ２

ブログパーツでサイドバーに表示させるコンテンツをつくる

ステップ３

ブログパーツで作成したコンテンツをサイドバーに表示させる

【ステップ１】Canvaでナビゲーションボックスのロゴをつくる

まず、ナビゲーションマップのアイコンを作ります。

今回は、オンラインデザイン作成ツール【Canva】を使います。

【ステップ２】ブログパーツでサイドバーに表示させるコンテンツをつくる

ブログパーツでナビゲーションロゴのコンテンツを作ります。

【ステップ３】ブログパーツで作成したコンテンツをサイドバーに表示させる

まとめ　

今回は「サイドバーのナビゲーションボックス」をSWELLのブログパーツを使って作る方法をご紹介しました。

「ナビボックス」の見栄えよくするコツも３つお伝えしました。

SWELLなら、CSSやHTMLコードをいっさい使わずに「ナビゲーションボックス」を設置できます。

ロゴのデザインを変えれば、ぐっと雰囲気が違うナビボックスが作れます。

こちらはちょっと、シャープなデザインのサイトを意識してみました。

ブロガーのあこがれ【ヒトデブログ風】デザインの「ナビボックス」も作ってみました。

ヒトデさんと言えば ＜ＪＩＮ＞

＜ＪＩＮ＞ といえば「ナビゲーションボックス」というイメージがありますよね。

でも＜ＪＩＮ＞でなくても【SWELL】でも簡単に作れますよ！

（勝手に真似してごめんなさい）

いかがでしたか。

ぜひ、あなたのブログにピッタリな「ナビゲーションボックス」を作って

サイトの周遊率をアップさせましょう！

最後まで、お読みくださりありがとうございました。

SWELL【ブログパーツ】の基本的な使い方を解説しています。