★当サイトは【SWELL】を使用しています....(▽◕ ᴥ ◕▽)         トップページのメインビジュアルを春バージョンにしました

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

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

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

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

かわうそ

何と「ボックスメニューブロック」という機能が追加されました!

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

わたしのサイトで表示させているボックスナビの画像
サイドバーにピッタリのボックスナビ

トップページなどにピッタリのボックスナビ

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

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

もうこの記事の需要がなくなったわね

かわうそ

おっしゃる通り。それほど今回追加された「ボックスメニュー」を使うと超簡単にボックスナビが作れるようになったのです

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

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


この記事はこんな方に向けて書きました
  • SWELLの新機能「ボックスメニュー」についてくわしく知りたい
  • 「ボックスメニュー」でボックスナビを作る方法を知りたい
  • SWELLで「ボックスナビ」をCSSやHTMLを使わずに作る方法を知りたい
そんな
あなたに

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

目次

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

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

  1. 「標準」と「塗り」から選べるボックスのデザイン
  2. 使えるアイコンが標準装備されている
  3. アイコンの色を自由に変えることができる
  4. アイコンの大きさや余白などの設定もボタンひとつでラクラク
  5. オリジナルアイコンも簡単に挿入できる

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

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

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

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

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

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

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

デフォルトの色は事前に設定したサイトカラーになります

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

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

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

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

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

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

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

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

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

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

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

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

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

https://journey.oyoyo-m.com/

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

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

ステップ1
ボックスナビ用のオリジナルアイコンをつくる
(オリジナルアイコンを使用しない場合は不要)
ステップ2
サイドバーに表示させるボックスナビのブログパーツをつくる
ステップ3
ブログパーツで作成したボックスナビをサイドバーに表示させる

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

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

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

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

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

かわうそ

「Canvaでアイコンを作る方法」は下記をクリック

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

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

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

STEP
ブログパーツでコンテンツをつくる
  1. 【ブログパーツのエディーター画面】でコンテンツを作成し公開する
  2. 作成したブログパーツの「呼び出しコード」をコピーする
STEP
ブログパーツをサイト内の好きな場所に表示させる
  1. 【外観】 → 【ウィジェット画面】をひらく
  2. 表示させたい場所に【カスタムHTML】をスライドする
  3. 【カスタムT HML】にブログパーツの「呼び出しコード」をはりつけて保存する
  4. 表示画面で確認をする
STEP
ブログパーツの新規エディーター画面を開く
ボックスメニューでサイドバーにボックスナビを作る方法を説明するための画像
STEP
エディーターに「ボックスメニュー」を表示させる
ボックスメニューでサイドバーにボックスナビを作る方法を説明するための画像
STEP
行を追加する

プラスボタンをクリックして「リンクボックス」を追加します

ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像

列を追加する場合は、こちらから行います

ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像

今回は、2列×3行ににしました

ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像
STEP
リンクボックスにアイコンを挿入する

赤枠部分が「オリジナルアイコン」、それ以外は「SWELLの標準装備アイコン」を挿入しました

ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像

SWELLの標準アイコン」の挿入方法

STEP
リンクボックスをクリック
ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像
STEP
右サイドバーに表示された「アイコン選択」をクリック
ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像
STEP
アイコンを選んでクリック
ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像
STEP
アイコンが表示されました
ボックスメニューでサイドバーにボックスナビを作る手順を説明するための画像

オリジナルアイコン」の挿入方法

STEP
リンクボックスをクリック
STEP
右サイドバーに表示された「アイコンタイプの画像」をクリック⇒オリジナルアイコン画像を入力
STEP
オリジナルアイコンが表示されました
かわうそ

他のアイコンも挿入しました

STEP
アイコンボックスにテキストを入れる
STEP
アイコンボックスにリンク先のURLを受け込む
STEP
リンクボックスの大きさや余白を調整する

実際に表示させてから調整しても大丈夫です。

私は下記のように設定しました

STEP
ブログパーツを「公開」にします

ボックスナビが完成したら、忘れずに「公開」をクリックしてください

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

STEP
作成したブログパーツの「呼び出しコード」をコピーする
STEP
【カスタムHTML】を【共通サイドバー】へスライドさせる
STEP
「カスタムTHLM」へコピーしたブログパーツの「呼び出しコード」をペースト
かわうそ

わすれずに 保存 をクリックしてくださいね

STEP
表示画面で確認する

表示された画像をみて、アイコンの大きさや余白を微調整してください。

まったり旅するblog

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

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

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

常に進化を続けるSWELL!

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

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

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

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

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

かわうそ

開発者さん、こんな太っ腹なサービスを続けて大丈夫なんですか?

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

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

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

ポチっとしていただけると嬉しいです

リタイアかわうその主婦活ブログ - にほんブログ村
【SWELL】新機能ボックスメニューで「ボックスナビ」を作る方法|便利すぎる機能も紹介

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次
閉じる