SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

SWELLのボックスメニューブロック|ナビゲーション用のボックスが簡単に作れる!

SWELLのボックスメニューブロック|ナビゲーション用のボックスが簡単に作れる!
  • URLをコピーしました!

SWELLのボックスメニューブロックについて紹介します。

この記事の内容
  • ボックスメニューブロックでできること
  • ボックスメニューブロックの使い方
  • ボックスメニューをウィジェットに配置する方法
ボックスメニューブロックで作れるもの
SWELLのボックスメニュー-1
SWELLのボックスメニュー-2

アイコンとテキストがひとつのボックスに囲まれたリンクを作成できる。
アイコンが豊富に選択できたり、デザインも簡単に変えられるとても便利なブロックです…!

ボックスメニューの設置例
SWELLのボックスメニュー-29
サイドバーに設置
SWELLのボックスメニュー-30
スマホ開閉メニューに設置
SWELLのボックスメニュー-31
トップページに設置
さとしん

簡単に素敵なボックス型のリンクが作れるのでぜひ活用しましょう…!

ボックスメニューブロックを使うためには、SWELLをVer.2.6.1以上にする必要があります。

目次

ボックスメニューブロックでできること

ボックスメニューブロックは、アイコン(画像)とテキストがセットになったボックスリンクを作れるブロックです。

以下のようなイメージです。

SWELLのボックスメニュー-1
SWELLのボックスメニュー-2

公式サイトの以下ページにボックスメニューブロックを設定している動画が載っているので見てみてください。

>>

ボックスメニューブロックで設定できることを簡単に箇条書きで書いておきます。

  • 設定できるアイコンの種類がとても豊富
  • アイコンは画像も設定できる
  • アイコンやテキストのカラーを変更できる
  • アイコンのサイズを調整できる
  • ボックス同士の余白を調整できる

これまで、リッチカラムブロックでナビゲーション用のボックスメニューを作っていた方もいると思いますが、ボックスメニューブロックが追加されたことで、よりシンプルに作れるようになりました。

実際にボックスメニューをサイドバーなどに設置する手順は、記事後半の「ボックスメニューをサイドバーなどウィジェットで表示する方法」で紹介します。

ボックスメニューブロックの使い方

ボックスメニューブロックの使い方も紹介しておきます。

基本的に各項目をサイドバーから設定します。直感的に設定できるので細かい説明は不要かと思います。

さとしん

直感的に設定できるのもSWELLのすばらしい点です…!

まずは、エディターにボックスメニューブロックを呼び出しておきましょう。

STEP
メインコンテンツエリアで+ボタンをクリック
SWELLのボックスメニュー-3
STEP
「ボックスメニュー」を探してクリック
SWELLのボックスメニュー-4
ちなみに…

ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

ボックスメニューブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /box-menu
  • /ボックスメニュー
さとしん

「/」の操作は覚えておくと便利ですよ…!

詳しくは「ブロックエディターの記事執筆を快適にするショートカットまとめ!」で紹介しています。

STEP
サイドバーから細かい設定をする
SWELLのボックスメニュー-5

ボックスメニューブロックの細かい設定は後述します。

それぞれのボックス(リンクボックス)にリンクを漏れなく設定しておきましょう。

SWELLのボックスメニュー-6
みにしん

ナビゲーション用のボックスなので、全てのボックスに忘れずにリンクを貼らないと…!

では、ボックスメニューブロックの細かい設定を紹介していきます。

ボックスメニューのスタイルとカラーを選択する

ボックスメニューブロックはサイドバーの「スタイル」から見た目を変えることができます。

SWELLのボックスメニュー-7

設定できるスタイルは以下2種類です。

  1. 標準
  2. 塗り
SWELLのボックスメニュー-7
「標準」スタイル
SWELLのボックスメニュー-8
「塗り」スタイル

「標準」の場合のアイコンやテキストカラー、「塗り」の場合の背景カラーは、サイトのメインカラーがデフォルトで適用される仕様になっています。

カラーを個別に変更したい場合は以下の手順で変更できます。

ボックスメニュー全体のカラーを一括で変える場合

ブロック全体を選択して「カラー設定」から変更する

SWELLのボックスメニュー-9
一部のボックスだけカラーを変える場合

変更したいリンクボックスを選択して「カラー設定」から変更する

SWELLのボックスメニュー-10

アイコンとテキストの配置を設定する

ボックスメニューブロックは、サイドバーの「設定」でボックスのレイアウトを変更できます。

SWELLのボックスメニュー-11

変更できる項目は以下です。

  • アイコンとテキストの並び
  • ボックス間の余白
  • アイコンサイズ
  • 列数

それぞれ簡単に紹介します。

アイコンとテキストの並び

アイコンとテキストの配置を以下の2種類から選べます。

  1. 縦並び
  2. 横並び
SWELLのボックスメニュー-12
縦並び
SWELLのボックスメニュー-13
横並び

ボックス間の余白

また、ボックス間の余白を変更することもできます。

SWELLのボックスメニュー-14
ボックス間の余白1px
SWELLのボックスメニュー-15
ボックス間の余白10px

アイコンサイズ

表示されるアイコンのサイズの調整も可能です。

SWELLのボックスメニュー-16
アイコンサイズ3em
SWELLのボックスメニュー-17
アイコンサイズ10em

列数

ボックスメニューを並べる列の数も設定できます。

リッチカラムブロック同様に、閲覧者のデバイス(PC、タブレット、スマホ)に合わせて個別に列数を設定できるので便利です。

SWELLのボックスメニュー-14
列数3列
SWELLのボックスメニュー-18
列数6列

リンクボックスのアイコンの設定

それぞれのボックスに表示するアイコンは以下の2種類から選択できます。

  1. SVGアイコン
  2. 画像
SWELLのボックスメニュー-19

画像の場合の設定方法は、通常の画像ブロックと同様です。

「アイコン選択」をクリックすると、選択できるアイコンを表示されます。

SVGアイコンは数えきれないほどたくさんの種類から選択できます。

SWELLのボックスメニュー-20
さとしん

タブを切り替えながらお好みのアイコンを探してください…!

SVGのアイコンは選択肢に無くても使用できるものもあるので、その方法を紹介します。

選択肢に無いSVGアイコンを使用する方法

リンクボックスのサイドバー「アイコン設定」の中に以下の入力欄があります。

  • アイコン名
  • HTMLで<svg>を記述する

上記2つを活用することで、選択肢にないアイコンも一部使うことができるので、それぞれの使い方を紹介しておきます。

使用できるアイコン

使用できるアイコンは以下です。

以下の画像の部分をクリックするとサイトのリンクが表示されるので覚えておきましょう。

SWELLのボックスメニュー-21

アイコン名の入力方法

以下のようにアイコン名を入力するとアイコンが表示されます。

SWELLのボックスメニュー-19

各サイトのアイコン名の取得方法を簡単に紹介しておきます。

Font Awesome Free

設定したいアイコンを選択すると表示される以下の部分をコピペして貼り付ければOK。

SWELLのボックスメニュー-22

“fa-xxxx fa-yyyy”という部分です。

Ionicons v5、Feather

設定したいアイコンをクリックすると、アイコン名がコピペされるのでそのまま貼り付ければOK。

SWELLのボックスメニュー-23

“Io*****”や”Fi*****”という部分がアイコン名です。

HTMLでsvgを記述する方法

HTMLで記述することもできます。

自分で記述する場合は、「HTMLで<svg>を記述する」のチェックをONにしましょう。

入力欄が表示されるので、ここにコードを入力します。

SWELLのボックスメニュー-22

Font Awesome Freeでコードを取得する方法を紹介しておきます。

設定したいアイコンを選択すると表示される以下赤枠部をクリックすると自動でSVGコードがコピーされます。

SWELLのボックスメニュー-25

コピーしたコードを入力欄に貼り付ければ完了です。

SWELLのボックスメニュー-24
さとしん

興味がある方はぜひ試してみてください…!

ボックスメニューをサイドバーなどウィジェットで表示する方法

ボックスメニューブロックをサイドバーやフッターなどのウィジェットで表示させたいという方が多いと思います。

ウィジェットにはブロックをそのまま配置できないので、SWELLのブログパーツ機能を活用することで表示できるようになります。

以下の手順でボックスメニューブロックをウィジェットに配置できます。

STEP
ボックスメニューをブログパーツで作成して公開する
SWELLのボックスメニュー-26

ブログパーツの使い方は「SWELLブログパーツの使い方!記事内でもウィジェットでも大活躍の便利機能!」を参考にしてください。

STEP
ブログパーツの呼び出しコードをコピーする
SWELLのボックスメニュー-27
STEP
ボックスメニューを配置したいウィジェットにカスタムHTMLを配置して呼び出しコードを貼り付ける
SWELLのボックスメニュー-28

上記手順で、サイドバーなどのウィジェットにボックスメニューブロックを配置できます。

SWELLのボックスメニュー-29
さとしん

適切に活用すると回遊率があがったりなど効果があると思うので、いろいろ試してみましょう…!

SWELLのボックスメニューブロックまとめ

SWELLのボックスメニューブロックについて紹介しました。

サイドバーなどにボックスメニューを配置しておくと、読者にとって良いナビゲーションにもなると思います。

工夫しつつ、自分のサイトに合ったボックスメニューの活用方法を探していきましょう。

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

SWELLのブロックエディターを使いこなすためのガイドを作りました!

当サイトWebNote+では、SWELLのブロックエディターで快適に記事を書くために知っておきたい内容をまとめたガイドを作成しています。

WordPress標準の機能とSWELLオリジナルの機能をフルに活用して、記事執筆の効率を上げて楽しくブログ運営をしていきましょう。

SWELLのボックスメニューブロック|ナビゲーション用のボックスが簡単に作れる!

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

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