「SWELL
のボックスメニューって、どう使えばいいの？」
そんな疑問を持っていませんか？
サイドバーや記事下におしゃれなナビゲーションを設置したいのに、設定方法やデザインの工夫がよく分からず、作業が止まってしまった経験はありませんか？
でも安心してください。
本記事では、初心者でもわかるようにSWELLボックスメニューの使い方をステップごとに解説します。
この記事を読むことで、あなたは迷わずボックスメニューを設置でき、サイト全体のデザインと機能性を一段レベルアップさせられるでしょう。
ぜひ最後まで読んで、あなたのサイトにぴったりのボックスメニューを作ってください。
SWELLボックスメニューブロックとは？
SWELLボックスメニューとは、WordPressテーマ「SWELL」に標準搭載されている便利なデザインパーツで、アイコン(画像)とテキストがセットになったボックスリンクを作れるブロックです。
例1
例2
このボックスメニューは、訪問者に視覚的なわかりやすさを提供します。
たとえば、サイドバーにカテゴリーやジャンル一覧をまとめたり、記事下部に関連記事や人気記事をボックス形式で並べたりできます。
SWELLのボックスメニューは、誰でも簡単に使える視覚的ナビゲーション機能です。
管理画面の操作だけで設置でき、コード知識は不要。初心者でも手軽にサイトデザインを整えられます。これは他テーマに比べ大きな魅力でしょう。
実際の操作では、SWELL専用のブロックエディターで必要な項目を選ぶだけ。
アイコン、テキスト、リンク先、カラーなどを自由に設定できます。カテゴリボックスやジャンルボックスを使えば、ユーザーは自分の興味に合う記事群を簡単に見つけられ、回遊性がぐっと高まります。
さらに、応用すれば告知ボックスやキャンペーン用ボックスなど、商用・個人ブログを問わず幅広い用途に活用できます。シンプルな見た目からおしゃれなデザインまで柔軟に変えられるので、目的に合わせた活用が広がります。
公式サイトの以下ページにボックスメニューブロックを設定している動画が載っているので見てみてください。
>> SWELL – ver. 2.6.1. アップデート情報
SWELLボックスメニューブロックの使い方
ボックスメニューブロックの使い方も紹介します。
基本的に各項目をサイドバーから設定します。直感的に設定できるので細かい説明は不要かと。
まずは、エディターにボックスメニューブロックを呼び出しましょう。
段落ブロック内に、
- /box-menu
- /ボックスメニュー
と入力するでもOK。
各ボックスを選択して、赤枠のリンクボタンをクリックして、リンクを設定します。
以上が大まかな手順です。
では、ボックスメニューブロックの細かい設定を見ていきましょう。
ボックスメニューのスタイルとカラーを選択する
ボックスメニューブロックはサイドバーの「スタイル」から見た目を変えることができます。
- 標準
- 塗り
カラーを個別に変更したい場合は、「カラー設定」で変更できます。
アイコンとテキストの配置を設定する
ボックスメニューブロックは、サイドバーの「設定」でボックスのレイアウトを変更できます。
- アイコンとテキストの並び
- ボックス間の余白
- アイコンサイズ
- 列数
リンクボックスのアイコンの設定
それぞれのボックスに表示するアイコンを変更する場合は、「アイコン設定」から変更できます。
- SVGアイコン
- 画像
上記のカスタマイズをすることで、以下のようなボックスメニューを作成できます。
例1
例2
SWELLボックスメニューをサイドバーに配置する方法
ボックスメニューブロックをサイドバーやフッターに表示させる方法を紹介します。
方法としては、
- SWELLのブログパーツでボックスメニューブロックを作成し、
- そのブログパーツの呼び出しコードをコピーし、
- ウィジェットに呼び出しコードを貼りつける
という流れ。
詳細の手順を見ていきましょう。
「ブログパーツ」をクリックし、「投稿を追加」をクリックします。
タイトルには任意の名前をつけ、本文にボックスメニューを作成します。
最後に「公開」ボタンをクリックします。
呼び出しコードをコピーします。
「外観」 > 「ウィジェット」を開き、カスタムHTMLを配置したいウィジェットにドラッグアンドドロップします。ここでは例として「共通サイドバー」に設置します。
カスタムHTMLに、さきほどコピーしたブログパーツの呼び出しコードをペーストして保存します。
以上でOK。
するとサイドバーなどのウィジェットにボックスメニューブロックを配置できます。
こんな感じ
ボックスメニューの設置に関する注意点
サイドバーにボックスメニューを設置する理由
サイト運営者にとって、サイドバーはとても重要なスペースです。ここにボックスメニューを設置することで、訪問者が目的の情報に素早くたどり着けるようになります。
たとえば、人気記事一覧やおすすめカテゴリーをサイドバーに配置すれば、記事間移動がスムーズになり、回遊率が高まります。
サイドバーにボックスメニューを置く最大の理由は、ユーザー体験の向上と滞在時間の延長にあります。 情報が整理されていないサイドバーは、見づらく利用されません。
しかし、ボックスメニューで視覚的にまとめると、自然と目が向き、クリックされやすくなります。
具体例としては：
- 人気記事のランキングボックス
- メールマガジン登録案内ボックス
- 外部SNSアカウントへの誘導ボックス
- カテゴリやジャンル別の記事リンクボックス（例：旅行カテゴリ、レシピカテゴリ）
特に「カテゴリ」や「ジャンル」を示すボックスは、訪問者が自分の興味に直結する記事群を探しやすくなるので非常に有効です。たとえば「旅行」カテゴリボックスなら、旅行好きな人がまとめて関連記事を閲覧できます。
さらに、SWELLのボックスメニューは視覚的な統一感を保ちつつ、簡単に編集できるのが魅力です。設置後も頻繁に内容を更新し、最新情報を反映させることが重要です。
ボックスメニューとナビゲーションの違い
ボックスメニューとナビゲーションは、どちらも訪問者の移動を助ける仕組みですが、役割が異なります。
ナビゲーションはサイト全体の構造を示すもので、主にヘッダーやフッター、グローバルメニューで使われます。
一方、ボックスメニューは特定のページやコンテンツを目立たせるための補助的ツールです。
つまり、ボックスメニューはナビゲーションを補完し、訪問者が特定の情報にたどり着きやすくなる役割を果たします。 たとえば、カテゴリー内の人気記事一覧をサイドバーに表示したり、記事末におすすめ記事を並べたりするのに使えます。
ナビゲーションは全ページ共通の設計が基本ですが、ボックスメニューはページ単位で表示・非表示が調整できます。これにより、ページの目的や内容に応じた情報提供が可能となります。
具体例を挙げると：
- ナビゲーション：サイト全体の「ホーム」「ブログ」「お問い合わせ」
- ボックスメニュー：記事内の「関連記事一覧」「今週のおすすめ」
このように、両者を組み合わせることでサイトはさらに使いやすくなります。
ボックスメニューを使うメリット・デメリット
ボックスメニューの大きなメリットは、特定の情報を視覚的に強調できる点です。
シンプルなテキストリンクよりも目立つため、訪問者の注意を引きやすくなります。
たとえば、重要なお知らせや特集記事、会員登録ページなどをアピールするのに最適です。
一方で、デメリットとしては設置のしすぎによる情報過多や、ページの見た目が散らかるリスクがあります。
サイドバーや記事内に複数のボックスを配置しすぎると、訪問者が混乱し、目的の情報が見つけにくくなるおそれがあります。
また、画像や装飾を多用したボックスは、ページの読み込み速度に影響を与える場合があります。
これを避けるためには、必要最小限の要素に絞り、表示スピードを意識した設計が大切です。
以下のリストにまとめます：
- メリット：目立つ・クリック率が上がる・柔軟にカスタマイズできる
- デメリット：多用しすぎると逆効果・ページ速度低下のおそれ
こうした点を踏まえて、ボックスメニューは適切な数と場所で活用することが成功の鍵です。
設置前に知っておきたい準備事項
ボックスメニューを設置する前に、いくつかの準備をしておくと作業がスムーズになります。
まず、表示したいリンク先の一覧を整理しておきましょう。
固定ページ、カテゴリー、タグ、外部サイトなど、必要なものを書き出すと混乱が減ります。
次に、設置場所の決定も重要です。
サイドバー、記事下、トップページなど、設置場所によって表示内容やデザインの最適解が変わります。
設置場所が決まれば、どんなボックスデザインが合うのか、色やフォントサイズなどのデザイン方針も決めやすくなります。
たとえば：
- サイドバー用：コンパクトでクリックしやすいデザイン
- 記事下用：視覚的インパクトが強いデザイン
また、スマホ表示への最適化も意識してください。
モバイルからのアクセスが多い場合、画面幅に応じた表示確認は必須です。設置後のテストを事前に計画しておくと安心です。
最後に、SWELLのバージョンが最新かどうかも確認しておきましょう。
テーマやプラグインの互換性が原因で表示不具合が起きる場合があるため、常に最新状態を維持することが大切です。
ナビゲーション用にボックスメニューを活用する方法
ボックスメニューは、ナビゲーション補助として非常に効果的です。
訪問者が特定の情報に簡単にたどり着けるように、サイト内の動線を整理できます。特に、カテゴリーごとや人気記事、特集コンテンツを目立たせる際に役立ちます。
ナビゲーションを強化するために、ボックスメニューは目的に応じた配置が重要です。
たとえば、記事下では関連記事をまとめ、サイドバーではカテゴリー一覧を表示するなど、ユーザー行動を意識した設計が求められます。
具体例としては：
- サイドバーに「今週の人気記事」ボックスを配置する
- 記事下に「このカテゴリーのおすすめ記事」を並べる
- フッターに「サイトマップ」や「お問い合わせ先」ボックスを設置する
また、色やデザインを用途によって変えることで、視覚的なわかりやすさが向上します。
強調したいボックスは濃い色、一般ナビ用は控えめな色に設定すると良いでしょう。
さらに、設置後はGoogleアナリティクスを使って各ボックスのクリック数を計測し、効果が低いものは削除・改善を繰り返すと、サイト全体のパフォーマンスが向上します。
カスタマイズで失敗しないポイント
ボックスメニューは自由にカスタマイズできる半面、失敗もしやすい部分です。
まず注意したいのは、装飾の盛りすぎです。
色、影、枠線、角丸などを加えすぎるとデザインが雑多になり、ユーザーにとって逆効果になります。
失敗を防ぐためには、シンプルで統一感のあるデザインを意識することが大切です。
サイトのテーマカラーに合わせ、文字サイズやフォントも一貫性を持たせましょう。特にサイドバーは他の要素が多いため、派手すぎない方が好まれます。
チェックポイントの例：
- 使用色は3色以内に抑える
- 重要な情報は上段に配置する
- モバイル表示の間隔や文字サイズを確認する
- 装飾画像は圧縮してページ速度を保つ
加えて、カスタマイズ後は複数端末で確認を行いましょう。
自分のパソコンではきれいでも、スマホで見たときに崩れてしまうことがあります。必要なら知人に見てもらい、客観的な感想をもらうのも有効です。
ボックスメニューのSEO効果はある？
ボックスメニュー自体が直接SEO順位を引き上げるわけではありませんが、間接的な効果は大いにあります。
内部リンク構造を整え、ユーザー回遊を促進することで、検索エンジンの評価向上につながります。
特に、関連性の高いリンクをボックスメニューに配置することで、検索エンジンがサイト内のつながりを理解しやすくなります。 これは、クローラビリティの向上やインデックス促進に寄与します。
具体的なSEO強化ポイント：
- ボックス内リンクは実際に関連性のあるページにする
- リンクテキストは具体的かつ内容を反映させる
- 過剰なリンク設置は避け、ユーザー体験を優先する
さらに、モバイル対応のデザインはGoogleのモバイルファースト評価に直結します。
PageSpeed Insightsや Search Consoleなどを使い、定期的に改善点をチェックするのがおすすめです。
最終的には、SEOを意識しすぎるあまりユーザー目線を欠かさないことが、最も重要なポイントになります。
ナビゲーション改善でアクセス数は増える？
ナビゲーションを改善すると、ユーザーの回遊率が上がり、滞在時間が延び、結果としてアクセス数の増加につながります。
ボックスメニューは、このナビゲーション強化に欠かせないツールのひとつです。
具体的な効果は、重要ページへの導線を増やし、ユーザーが迷わず次の行動に進めるようにする点です。
たとえば関連記事ボックスを設置すれば、1記事読了後に別記事へ移動しやすくなり、直帰率が下がります。
改善例：
- 人気記事や新着記事のボックスで目を引く
- 特集記事や期間限定キャンペーン用のボックスで興味を引く
- サイトマップ型のナビゲーションで全体の見通しを良くする
さらに、効果を確認するためにはGoogleアナリティクスやヒートマップを使いましょう。
データを分析し、効果が薄い部分は改善、成果が出ている部分はさらに強化するのが賢い戦略です。
最後に、ナビゲーション改善は一度で終わらず、定期的に見直すことが重要です。
季節やトレンドによって見せる情報を調整することで、常に新鮮な魅力を提供できます。
まとめ｜SWELL ボックスメニュー 使い方をマスターしてサイトを強化しよう
- SWELLのボックスメニューは初心者でも簡単に設置・カスタマイズできる
- サイドバー、記事下、フッターなど多彩な場所に設置可能
- ナビゲーション改善や内部リンク強化でSEO・アクセス数アップに貢献
- デザイン統一や表示速度への配慮で、見た目と性能の両立が重要
- 公式マニュアルやサポート活用でトラブルも安心対応
SWELLのボックスメニューは、ただの装飾要素ではなく、サイト運営を強化する重要なツールです。
今回ご紹介した設置方法やカスタマイズのコツ、応用テクニックを活用すれば、訪問者が快適にサイト内を移動できるようになります。
公式のSWELLマニュアルなどの信頼できる情報源も、ぜひ活用してください。
あなたのサイトを次のレベルに引き上げるため、今すぐボックスメニューの最適化に取り組んでみましょう。
