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

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

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

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

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

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

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

>>SWELL – ver. 2.6.1 アップデート情報

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 標準
2. 塗り

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

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

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

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

一部のボックスだけカラーを変える場合

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

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

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

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

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

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

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

1. 縦並び
2. 横並び

ボックス間の余白

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

アイコンサイズ

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

列数

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

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

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

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

1. SVGアイコン
2. 画像

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

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

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

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

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

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

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

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

アイコン名の入力方法

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

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

Font Awesome Free

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

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

Ionicons v5、Feather

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

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

HTMLでsvgを記述する方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

SWELL公式サイトはこちらからどうぞ…！

SWELLブロックエディターの関連記事

SWELL全般の関連記事