【SWELL】新機能ボックスメニューでボックスナビを作る方法｜便利すぎる機能も紹介

SWELLの進化が止まりません。

2022年3月に「テーブル機能」が大幅に拡張されたばっかりというのに、４月のアップデートがすごいことになっています。

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

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

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

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

「ボックスメニューブロック（以下ボックスメニュー）」が実装されたことにより、このような『ボックスナビ』を簡単に作ることができるようになったのです。

実は、当ブログで「リッチカラム」と「ブログパーツ」を使ったボックスナビ（ナビゲーションボックス）の作り方を紹介していました。

でも「リッチカラム」より「ボックスメニュー」を使う方が、より簡単にボックスナビを作れるのです。

今回は、SWELLの「ボックスメニュー」の機能や使い方について紹介します。

この記事を読めば「ボックスメニュー」の主な機能や「ボックスナビ」の作り方がわかりますよ！

SWELLのアップデートに関する詳細は、こちらの公式サイトをご覧ください。

【SWELL】ボックスメニューの魅力あふれる便利な機能を５つ紹介

まず「ボックスメニュー」の便利すぎる機能を５つ紹介します。

【便利な機能 ①】「標準」と「塗り」から選べるボックスのデザイン

SWELLのボックスナビは「標準」と「塗り」のスタイルが用意されています

好みに応じて、ボタン一つでデザインを選べるのはとても嬉しい機能ですよね。

【便利な機能 ②】使えるアイコンが標準装備されている

ボックスナビを作るために必要なアイコンも、標準で多数用意されています。

「SWLL」のアイコンもありますので、こんなボックスナビも簡単に作ることができますよ。

【便利な機能 ③】エディータ画面でアイコンの色を自由に変えることができる

アイコンの色を変えたい場合も、ボタンひとつで色を変えることができます。

エディーター画面のボタン操作で簡単に色を変えることができるのです。

もちろんタイトルの色も自由に変えることができますよ。

【便利な機能 ④】アイコンの大きさや余白などの設定もボタンひとつでラクラク

アイコンの「レイアウト」「大きさ」「余白」もボタン一つで簡単に設定できます。

実際のサイト画面で出来栄えを確認しながら、設定を微調整する作業も楽になりました。

テキストを左横にすることもできますよ。

【便利な機能 ⑤】オリジナルアイコンも簡単に挿入できる

SWELLの標準アイコン以外に、自分でつくった画像をアイコンにすることができます。

アイコンタイプのボタンから、画像を取り込むだけでオリジナルアイコンのボックスナビをつくることができます。（オリジナルアイコンは色を変えることができません）

こちらはオリジナルアイコンの一例です(^_^)

「ボックスナビ」でカスタマイズのバリエーションがますますひろがりますね！

トップページ「おすすめ記事コーナー」の目次のデザインをリニューアルしました。

SWELL の新機能 【ボックスメニューブロック 】で作っています✨https://t.co/EYSgA7rLhk#SWELL　#ボックスメニューブロック pic.twitter.com/wEbFs1nUxU

— リタイアかわうそ｜Canva大好き (@Ed2QvvUTFM4ZLf0) April 27, 2022

【SWELL】ボックスメニューでサイドバーにボックスナビを作る方法

さっそく、当サイトの姉妹ブログ『まったり旅するblog』のサイドバーにボックスナビを作りましたので、その手順を紹介します。

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

ステップ１

ボックスナビ用のオリジナルアイコンをつくる
（オリジナルアイコンを使用しない場合は不要）

ステップ２

サイドバーに表示させるボックスナビのブログパーツをつくる

ステップ３

ブログパーツで作成したボックスナビをサイドバーに表示させる

【ステップ１】ボックスナビ用のオリジナルアイコンをつくる

SWELL「ボックスメニュー」は、事前にアイコンが多数用意されています。

「でも、オリジナルのアイコンも使いたい！」という場合は、自分でアイコンを用意しましょう。

今回わたしが用意した「オリジナルアイコン」はこちら。

どちらのアイコンも、オンラインデザイン作成ツール【Canva】を使って作りました。

【ステップ２】サイドバーに表示させるボックスナビのブログパーツをつくる

次は、ボックスナビのブログパーツをつくります。

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

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

まとめ　～進化を続けるSWELLから目が離せない～

今回は、2022年4月に新たにSWELL追加された「ボックスメニュー」の魅力的な機能と使い方について紹介をしました。

「ボックスメニュー」と「ブログパーツ」を組み合わせれば、サイト内のどこにでも簡単に「ナビボックス」を表示させることができます。

常に進化を続けるSWELL！

「こんな機能があったらいいのに・・・」という夢がどんどん実現している印象です。

何よりSWELLユーザーにとってありがたいのは・・・

アップデートの費用がいっさいかからないということ！

しかも一度購入すれば、複数のサイトで使いまわしができるのです！

SWELLはコスパのよさが最強！としか言いようがありません

もし、SWELLにしようか迷っている方がいましたら

全力で【SWELL】をおすすめします！

おしゃれなオリジナルアイコンをつくるなら【Canva】がおススメです