SWELLボックスメニューブロックの使い方｜サイドバーに画像リンクを設置できる！

「ボックス型の画像リンクを設置したい…」

「ボックスメニューブロックの設定方法は？」

「ボックスメニューをサイドバーなどウィジェットに設置するには？」

この記事では、そんな方に向けて、SWELLでボックスメニューブロックの使い方を解説します。

ボックスメニューブロックとは…アイコン(画像)とテキストがセットになったボックス型リンクを作成できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• サイドバーなどウィジェットにおしゃれなボックス型アイコン(画像)リンクを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、サイト内の回遊率を上げることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

本記事に挿入されているボックスメニューは、リンクを設定していないのでクリックしても飛びません。

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

SWELLのボックスメニューブロックでは以下のようなことができます。

SWELL公式サイトでもボックスメニューがどういうものかを動画で視聴できるので見てみてください。

公式サイト：【SWELL – ver. 2.6.1 アップデート情報】

では、ボックスメニューブロックで設定できることをそれぞれ詳しく解説します。

1000種類以上のアイコンから設定できる

SWELLのボックスメニューに以下のようなアイコンを設定できます。

アイコンの種類は、ザッと数えただけでも1000種類以上！

どれを選べばいいか迷ってしまうくらいアイコンの種類が豊富にあります。

使いたいアイコンが見つからない…ということはなさそうですね。

オリジナル画像を設定できる

SWELLのボックスメニューに、自分で作成または用意したオリジナル画像も設定できます。

他サイトと差別化を図ったり、デザインにこだわりたい人にとって便利な機能ですよ。

アイコンとテキストのカラーを変更できる

ボックスメニューに設定したアイコンとテキストは、色も選べます。

自分の好きな色を指定できるので、ユーザーがそのアイコンに連想させるカラーを選んだり、統一感を出すためにサイトカラーを選ぶこともできますよ。

ボックスメニューの表示列数をデバイスごとに指定できる

SWELLでは、ボックスメニューの表示列数をPC・タブレット・スマホごとに指定できます。

例えば、以下のように4つあるボックスメニューをPC4列、タブレット2列、スマホ1列というふうに設定できますよ。

PCとスマホでは表示画面の大きさが全く違うので、PCと同じ列数をスマホでも設定すると、コンテンツが小さくなりすぎて見えない…ということが起こります。

ですが、デバイスごとの表示画面の大きさに合わせて列数を変えることができるので、見ずらいということが起きなくなりますよ。

内部リンクと外部リンクを設定できる

SWELLのボックスメニューには内部リンクだけではなく、外部リンクも設定できます。

※左に内部リンク、右に外部リンクを設定

𝕏（旧Twitter）やInstagram、YouTubeなどのSNSの設置もできますよ。

SWELLボックスメニューブロックの使い方とカスタマイズ設定8つ

SWELLのボックスメニューブロックの使い方は下記のとおりです。

ちなみに、ボックスメニューブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

ボックスメニューブロックで設定可能な項目は8つあります。

それぞれ詳しく解説します。

2種類からスタイルを選ぶ

まずは親ブロックでカスタマイズできる項目から説明していきます。

SWELLでは、ボックスメニューブロックのスタイルを以下の2種類から選べます。

「標準」スタイルの白の部分と色がついている部分の色を交換したのが「塗り」スタイルになります。

「標準」は目立ちすぎず記事に溶け込んでいるようなデザインで、「塗り」は目線が集まるような目立つデザインですね。

ボックスメニュー全体のカラーを設定する

ボックスメニュー全体のテキストカラーとアイコンカラーを設定できます。

サイトの統一感を出すために、デフォルトであるメインカラーと同じ色にすることをおすすめです。

もし別の色を使いたい場合や好きな色を指定して使いたい場合は、カラーピッカーで調べたカラーコードを入力しましょう。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

_{＼クリックで開く／}

後ほど紹介しますが、ボックスメニューごとのカラー設定もできますよ。

アイコンとテキストの並びを変える

SWELLのボックスメニューブロックでは、アイコンとテキストの並びを変えることができます。

縦並びだと1つのボックスメニューの縦の長さが大きくなる、つまり画面占有率が高くなります。

一方、横並びはよりコンパクトになるので、ボックスメニューの数が多くなって1画面に収まり切れないときに使用すると便利ですよ。

ボックス間の余白を調整する

ボックスメニューブロックで各ボックス間の余白を細かく調整できます。

余白はデフォルトである0pxのままでいいと思います。

アイコンサイズを調整する

ボックスメニューブロックでアイコンのサイズも細かく調整できます。

アイコンのサイズもデフォルトである3emのままでいいでしょう。

デバイスごとに表示列数を指定する

SWELLのボックスメニューブロックでは、デバイスごとに表示列数を指定できます。※上の画像にあるアイコンを上から順番にPC、タブレット、スマホです。

以下で列数を変えてボックスメニューを表示してみました。

ボックスメニューをどこに配置するかによって設定する列数は変わってきますが、基本は2や4などの偶数がおすすめです。

ボックスメニューごとのカラーを設定する

ここからは子ブロックでカスタマイズできる項目を説明していきます。

ボックスメニューごとのテキストカラーとアイコンカラーを設定できます。

色がバラバラでサイトの統一感がなくならないよう、メインカラーと類似の色を設定することをおすすめです。

類似の色は「WEB色見本 原色大辞典」で自サイトのメインカラーのカラーコードを入力検索すると調べられますよ。

カラーコードを調べる方法はこちら 

アイコンもしくは画像を設定する

SWELLのボックスメニューに設定するアイコンもしくは画像を選びます。

アイコンを設定したい場合は、アイコンタイプ「SVG」⇒「アイコン選択」の順にクリックすると、設定できるアイコンが表示されます。

画像を設定する場合は、アイコンタイプ「画像」をクリックし、ボックスメニューに表示された「メディア」から画像を選びましょう。

【実体験】SWELLボックスメニューをサイドバーウィジェットに配置してみた

SWELLのボックスメニューブロックはブログパーツ機能を使うことで、記事内だけではなくサイドバーなどウィジェットに配置できます。

ボックスメニューをサイドバーに設置する方法は下記のとおりです。

サイドバー以外のウィジェットにも配置してみた

ボックスメニューはサイドバー以外で以下のウィジェットにも配置することをおすすめです。

上記ウィジェットに設定する方法は、先ほどボックスメニューをサイドバーに設置した手順と同様に、「カスタムHTML」を上記3つでウィジェットを追加すればOKです。

SWELLにないアイコンをボックスメニューで使う方法

SWELLには1000種類以上ものアイコンが標準搭載されてますが、使いたいアイコンがない場合は「Font Awesome5」を利用しましょう。

Font Awesome5とは…webサイトに記号やアイコンを誰でも無料で利用できるサービスのこと

ボックスメニューに「Font Awesome5」のアイコンを設定する方法は下記のとおりです。

SWELLボックスメニューに設定する画像はCanvaで作ろう

SWELLのボックスメニューにはオリジナル画像を挿入することもできます。

もし設定したい画像を自分で作りたい場合は「Canva」というデザインツールがおすすめですよ。

Canvaとは…オンラインで画像や動画の作成・編集を誰でも無料でできるグラフィックデザインツール

では、画像の作成方法をかんたんに紹介します。

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

今回は、SWELLでボックスメニューブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。