SWELLボックスメニューの使い方｜設定方法から活用例まで解説

SWELLのボックスメニューは、リンクを見やすく整理しながらデザイン性の高いメニューを作成できる便利なブロックです。この記事では、基本的な使い方から設定方法、活用例まで分かりやすく解説します。

それではご覧ください。

SWELLボックスメニューとは？

SWELLのボックスメニューは、リンク先をカード形式で分かりやすく表示できるSWELL独自のブロックです。

カテゴリー一覧や人気記事、おすすめ記事などへの導線を見やすく設置できるため、読者の回遊率向上にも役立ちます。

例えば、以下のような場面で活用できます。

• カテゴリー一覧の表示
• 人気記事への導線設置
• おすすめ記事の紹介
• 関連コンテンツへの誘導
• サイトマップの作成

テキストリンクだけでは目立ちにくい情報も、ボックスメニューを使うことで視覚的に分かりやすく伝えられます。

通常のテキストリンクとの違い

通常のテキストリンクは文章の一部として設置するため、読者に気付いてもらえないことがあります。

一方、ボックスメニューはカード型で表示されるため、リンク先を目立たせやすいのが特徴です。

また、

• アイコンを表示できる
• 説明文を追加できる
• 複数のリンクを整理できる
• デザイン性が高い

といったメリットもあります。

記事内の導線強化やサイト回遊率の向上を目指す場合に活躍するブロックです。

ボックスメニューの表示例

ボックスメニューを使うと、以下のようなレイアウトを作成できます。

SWELL関連ガイド（サンプル）

このように関連コンテンツをまとめて紹介できるため、読者が目的の記事へ移動しやすくなります。

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

ボックスメニューの挿入手順と、挿入後に行えるカスタマイズ（表示設定）について解説します。
基本設定は親ブロックと子ブロックの2つに分けて紹介します。

それでは順番に見ていきましょう。

❶ ボックスメニューの挿入手順

• 投稿（エディター）画面での作業になります。

ボックスメニューの挿入手順をご紹介します。

❷ ボックスメニューの設定（親ブロック）

まずは、投稿（エディター）画面右側に表示される「設定 ＞ ブロック」タブの設定項目を確認していきましょう。

各設定は、投稿（エディター）画面右側の「設定 ＞ ブロック」タブから確認できます。

設定パネルが表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。

ボックスメニューの設定方法（親ブロック）

ボックスメニューブロックを追加すると、最初は親ブロックが選択されています。
ここでは、列数やボックスメニュー全体のカラーを設定できます。

ツールバー

リンクボックス（子ブロック）をクリックすると、ボックスメニュー（親ブロック）から子ブロックの選択状態に切り替わり、各リンクボックスの設定を行えるようになります。

詳細設定項目（親ブロック）

❸ リンクボックスの設定（子ブロック）

リンクボックスをクリックすると、子ブロック用のツールバーが表示され、各種設定を行えるようになります。

• リンクボックスの設定（子ブロック）が選択された画面

設定メニューは、投稿（エディター）画面の右側にある「設定 ＞ ブロック」タブから確認できます。

リンクボックスの設定方法（子ブロック）

リンクボックスでは、各項目を個別にカスタマイズできます。アイコンや画像を活用して、リンク先の内容がひと目で伝わるデザインにしましょう。

ツールバー

• リンク先は、ツールバーのリンクアイコンから設定します。

ツールバーのリンクアイコンをクリックすると、リンク先のURLを設定できます。
また、画像アイコンをクリックすると、アイコンを任意の画像に変更できます。

詳細設定項目（子ブロック）

SWELLボックスメニューの活用例

ボックスメニューは、記事内の導線強化や回遊率向上に役立つブロックです。

例えば、カテゴリー一覧や人気記事の紹介、関連記事への導線として活用できます。

また、トップページやサイドバーのナビゲーションとして設置すれば、読者が目的のコンテンツへアクセスしやすくなります。

さらに、アイコンや背景画像を設定することで、リンク先の内容をひと目で伝えられるのも魅力です。

記事内で読者に見てほしいコンテンツがある場合は、ボックスメニューを活用して分かりやすく案内しましょう。

以下のサンプルを参考に、活用イメージを確認してみましょう。

これらは、ブログパーツで作成したボックスメニューをウィジェットに設置した表示例です。

SWELLボックスメニューを使う際の注意点

ボックスメニューは便利なブロックですが、設置しすぎると読者が迷う原因になることがあります。

そのため、リンク先は本当に読んでほしい記事やページに絞るのがおすすめです。

また、アイコンや背景画像、カラー設定を多用しすぎると統一感が失われるため、サイト全体のデザインに合わせて設定しましょう。

記事公開前には、スマートフォンでの表示も確認しておくと安心です。

見やすさと使いやすさを意識して活用することで、ボックスメニューの効果を最大限に発揮できます。

SWELLボックスメニューに関するよくある質問

ボックスメニューは記事内でも使えますか？

はい。記事内の関連記事紹介や、おすすめ記事への導線として活用できます。

ボックスメニューのアイコンは変更できますか？

はい。各リンクボックスごとにアイコンを設定できるため、リンク先の内容に合わせて変更できます。

ボックスメニューに画像を設定できますか？

はい。画像やアイコンを設定できるため、視覚的に分かりやすいメニューを作成できます。

ボックスメニューはどのような場面で活用できますか？

カテゴリー一覧、人気記事一覧、関連記事の紹介、サイト内ナビゲーションなど幅広く活用できます。

ボックスメニューを多用しても問題ありませんか？

便利なブロックですが、多用しすぎると読者が迷いやすくなります。重要なコンテンツへの導線として活用するのがおすすめです。

まとめ！SWELLボックスメニューの使い方｜設定方法から活用例まで解説

SWELLのボックスメニューは、リンクをカード形式で見やすく表示できる便利なブロックです。

この記事で紹介したポイントをまとめると、次のとおりです。

• ボックスメニューはSWELL独自のブロック
• カテゴリー一覧や関連記事紹介に活用できる
• アイコンや説明文を設定できる
• トップページのナビゲーションとしても使える
• 回遊率向上に役立つ
• リンクを設置しすぎないことが大切

ボックスメニューを活用すれば、読者が目的の記事へ移動しやすくなり、サイト全体の使いやすさ向上にもつながります。

まずはカテゴリー一覧や関連記事紹介など、使いやすい場面から試してみてください。