「SWELLのボックスメニュー、おしゃれだし使ってみたいけど…設定むずかしそう」
そう思って、ずっと後回しにしてない？俺もまさにそうだった。
SWELLを買って3ヶ月くらい、サイドバーは「最近の投稿」と「カテゴリー」のデフォルトのまま。
他のSWELLユーザーのサイトを見ては「このボックスっぽいメニュー、かっこいいな…」って指をくわえて眺めてたんだよな。
でも、ある日思い切って設置してみたら、拍子抜けするほど簡単だった。
しかもサイドバーにボックスメニューを置いた翌週、回遊率が目に見えて上がって「もっと早くやっとけばよかった…」って本気で後悔した。
この記事では、SWELLのボックスメニューの作り方から、設置場所ごとの活用法、おしゃれなカスタマイズ、やりがちな失敗の回避法まで全部まとめた。
読みながら一緒に手を動かしてもらえれば、今日中にボックスメニューが完成して、サイトが一段レベルアップする。
それくらい簡単な作業だから、安心して読み進めてほしい。
SWELLのボックスメニューとは？
ボックスメニューはSWELLに標準搭載されているオリジナルブロックで、アイコン（または画像）＋テキストを組み合わせたナビゲーションリンクを、コード不要で作れる機能だ。
カテゴリーページへの誘導、人気記事への導線、サービス一覧の表示…使い道はめちゃくちゃ広い。
しかもSWELL v2.6.1から搭載されたから、テーマを最新版にしていれば追加プラグインなしで今すぐ使える。
ちなみにv2.6.1より前は「リッチカラム」+「バナーリンク」+「ブログパーツ」を組み合わせて自作するしかなかったんだよな。あの手間を思うと、公式ブロック化は神アプデだった
ボックスメニューでできることを一覧にすると、こんな感じ。
| 設定項目 | できること |
| スタイル | 「標準」「塗り」の2種類から選択 |
| アイコン | SVG（1,000種類以上）/ オリジナル画像 / SVGタグ直接入力 |
| アイコンサイズ | 0em～10em（デフォルト3em）で自由に調整 |
| レイアウト | 縦並び / 横並びの切り替え |
| 列数 | 1～8列（PC・タブレット・スマホ別に設定可能） |
| カラー | テキスト色・アイコン色・背景色を一括 or 個別に変更 |
| リンク | 内部リンク・外部リンク両方に対応 |
ここまで自由度が高いのに、操作はブロックエディターでポチポチするだけ。CSSの知識がゼロでも全然問題ない。
あと、よく混乱するのが「ボックスナビ」と「ボックスメニュー」の違い。
結論、同じものを指してると思ってOK。
「ボックスナビ」はアイコン＋テキストのボックス型ナビゲーション全般の通称で、「ボックスメニュー」はSWELLの公式ブロック名。
検索するときは「ボックスメニュー」で調べた方が情報が出やすいよ。
ボックスメニューの2つのスタイル（標準 / 塗り）
ボックスメニューには「標準」と「塗り」の2つのスタイルが用意されている。
「標準」スタイルは、背景が白（もしくは透明）でボーダーラインがあるシンプルなデザイン。
記事コンテンツに自然に溶け込むから、サイドバーやコンテンツ内に配置しても主張しすぎない。
落ち着いた雰囲気のサイトにはこっちが合う。
「塗り」スタイルは、背景色がベタ塗りされてボックス全体に色がつくデザイン。
視認性がバチバチに高いから、トップページのメインナビや、スマホメニュー内みたいに「絶対に目立たせたい」場所に置くならこっち一択。
迷ったら「標準」でOK。「塗り」は使い方次第でサイトの雰囲気をガラッと変えるから、慣れてきてからでも遅くないよ
ボックスメニューを設置するメリット【回遊率が変わる】
「ボックスメニューなんて、ただの飾りでしょ？」って思ってるなら、それは大きな間違い。
ボックスメニューの最大のメリットは、読者がサイト内を自然に回遊してくれるようになること。
テキストだけのカテゴリーリストと、アイコン付きのボックスメニューでは、クリック率が全然違う。
なぜかというと、人間の脳は文字情報よりビジュアル情報を圧倒的に速く処理するから。
アイコンや画像がついたメニューは、読者が「あ、ここ気になる」と直感的に判断しやすいんだよな。
俺の実体験を話すと、サイドバーの「カテゴリー」をデフォルトのテキストリストからボックスメニューに変えただけで、サイト内の平均ページビューが1.3倍くらいに増えた。
ぶっちゃけ「たかがメニューの見た目を変えただけで？」って自分でもびっくりした。
しかも回遊率が上がるということは、Googleから見て「ユーザーに価値のあるサイト」と評価されやすくなる。
つまり間接的にSEOにもプラスになる。
ボックスメニューは「見た目をよくする飾り」じゃなくて、サイトの実力を底上げする武器なんだよ。
スマホユーザーが7～8割を占める今の時代、パッと見でタップしやすいボックスメニューの効果はデカい。テキストリンクだとスマホじゃ押しにくいからね。
SWELLボックスメニューの作り方【基本の5ステップ】
ここからは実際にボックスメニューを作っていこう。やることは5ステップだけ。
初めてでも10分もあれば完成するから、一緒に手を動かしながら読み進めてほしい。
ステップ1：ボックスメニューブロックを呼び出す
まずは投稿画面（もしくは固定ページ編集画面）を開こう。
ブロックエディターの本文エリアで「/ボックスメニュー」と入力するか、「/box-menu」と入力する。
すると候補にボックスメニューブロックが表示されるから、それをクリック。
もしスラッシュ入力が苦手なら、画面左上の「＋」ボタン → 検索窓に「ボックスメニュー」と打ち込んでもOKだよ。
挿入すると、デフォルトで2列×4ボックスのメニューがドンと出てくる。ここからカスタマイズしていく感じだね。
もし候補に出てこない場合、SWELLのバージョンがv2.6.1未満の可能性がある。「外観」→「テーマ」でバージョンを確認して、古い場合はアップデートしよう
ステップ2：アイコンを選ぶ（SVG / 画像）
ボックスメニューの顔とも言えるのがアイコン。3つの方法で設定できるよ。
方法①：SVGアイコンから選ぶ（おすすめ）
個別のボックスをクリックして選択 → 右サイドバーの「アイコンタイプ」で「SVG」を選ぶ → 「アイコン選択」をクリック。
するとSWELLに標準搭載された1,000種類以上のSVGアイコンがズラッと出てくる。
カテゴリーに合ったアイコンを選ぶだけでOK。
SVGアイコンのメリットは、拡大縮小しても画質が劣化しないこと。
色もカラー設定から自由に変えられるから、一番手軽で汎用性が高い。
方法②：オリジナル画像をアップロードする
個別のボックスをクリック → アイコンタイプで「画像」を選択 → メディアライブラリから画像を選ぶ。
自分で作ったアイコンやイラストを使いたいならこの方法。
ただし画像サイズを揃えないと表示が崩れるから注意（サイズの話はカスタマイズの章で詳しく解説する）。
方法③：SVGタグを直接入力する
SVGアイコン選択画面の一番下にある「SVGタグを直接入力」欄に、外部のSVGコードを貼り付ける方法。
Font Awesome 5のアイコンなんかもこれで使える。上級者向けだけど、こだわりたい人にはかなり使えるテクニック。
最初は方法①のSVGアイコンで十分。1,000種類もあれば大抵のカテゴリーに合うアイコンが見つかるよ。慣れてきたら画像やSVGタグにも挑戦してみ？
アイコンサイズは右サイドバーの「アイコンサイズ」で調整可能。デフォルトの3emがバランスいいけど、サイドバー用なら2～2.5em、トップページ用なら3～4emくらいが目安だよ。
ステップ3：テキストとリンク先を設定する
アイコンの下にあるテキスト部分をクリックすると、ラベル（表示テキスト）を自由に編集できる。
「WordPress」「ブログ運営」「レビュー」みたいに、カテゴリー名やコンテンツ名を入れよう。
テキストは短ければ短いほどいい。
長すぎると折り返してデザインが崩れるし、読者もパッと見で理解しにくくなる。
目安は2～6文字がベスト。
次にリンク先の設定。
個別のボックスを選択した状態で、上に出てくる「リンクマーク（）」をクリック。
「検索またはURLを入力」欄に遷移させたいページのURLを入力する。
- カテゴリーページ → カテゴリーのURLを入力
- 個別記事 → 記事のURLを入力
- 固定ページ → 固定ページのURLを入力
- 外部サイト → そのままURLを入力
リンクを設定したら、プレビューで実際にクリックして遷移先が正しいか確認しておこう。
ここを怠ると「リンク切れ」で読者の信頼を失うからね。
ステップ4：列数とレイアウトを調整する
ボックスメニュー全体（親ブロック）を選択して、右サイドバーを見てみよう。「列数」の設定がある。
ここがSWELLの素晴らしいところで、PC・タブレット・スマホの3デバイスごとに列数を個別設定できるんだよ。
設置場所別のおすすめ列数はこんな感じ。
| 設置場所 | PC | タブレット | スマホ |
| メインコンテンツ （トップページ等） | 3～4列 | 3列 | 2列 |
| サイドバー | 2列 | 2列 | 2列 |
| スマホ開閉メニュー内 | － | － | 2列 |
| フッター | 3～4列 | 2列 | 2列 |
サイドバーで3列以上にするとテキストが改行されまくって悲惨なことになる。これ、やりがちな失敗だから気をつけて
レイアウトの「縦並び / 横並び」も同じ場所で切り替えられる。
デフォルトの縦並び（アイコンが上、テキストが下）が一番見やすいけど、サイドバーで横幅が狭い場合は横並び（アイコンが左、テキストが右）にすると収まりがよくなることもある。
試してみて好みの方を選んでみ？
ステップ5：カラーを設定して完成！
最後の仕上げ、カラー設定。ここで一気にプロっぽくなるから、適当にやらないでほしい。
ボックスメニュー全体（親ブロック）を選択した状態で、右サイドバーの「カラー設定」を開くと、以下の3つを変更できる。
- テキスト色：ボックス内の文字の色
- アイコン色：SVGアイコンの色（標準スタイルを選択した場合）
- 背景色：ボックスの背景の色（塗りスタイルを選択した場合）
デフォルトではサイトのメインカラーが適用されるんだけど、全部同じ色だとちょっと地味になりがち。
おすすめは、アイコン色だけカテゴリーごとに変える方法。
親ブロックの一括設定じゃなく、個別のボックスを選択すると、そのボックスだけ色を変えられるんだよ。
これだけで見た目のメリハリが段違いになる。
カラー設定のポイントをまとめると、こう。
- サイト全体のカラーと統一感を持たせること
- 使う色は3色以内に抑えるとまとまりが出る
- 背景色を変える場合はテキスト色との読みやすさ（コントラスト）を確認
- 迷ったらアイコン色だけ変えるのが失敗しにくい
ここまでやったら、基本のボックスメニューは完成！プレビューで確認してみよう。思ったよりいい感じに仕上がってるはずだよ。
「え、これだけ？」って思ったでしょ？そう、これだけなんだよ。5分もあればできちゃう。ここまでできたら次は「どこに置くか」が超重要だから、続きも読んでいってほしい
ボックスメニューの設置場所別ガイド【どこに置くかで効果が変わる】
ボックスメニューを作れたら、次に考えるべきは「どこに置くか」。
これ、めちゃくちゃ重要なのに、意外とみんな適当にやってるんだよな。
結論から言うと、設置場所によって効果がまるで違う。
同じボックスメニューでも、置く場所を変えるだけでクリック率が2倍以上変わることもある。
ここでは4つの主要な設置場所と、それぞれの特徴・設置方法を解説していく。
サイドバーに設置する方法【最も人気の定番配置】
ボックスメニューの設置場所として一番人気で、一番効果を実感しやすいのがサイドバー。
常に読者の視界に入るポジションだから、「あ、こんなカテゴリーもあるんだ」って自然に気づいてもらえる。
ただし、サイドバーにボックスメニューを設置するにはワンクッション必要。
ウィジェットエリアにはブロックを直接置けないから、「ブログパーツ」機能を経由する必要があるんだよ。
手順はこの4ステップ。
WordPress管理画面 →「ブログパーツ」→「新規追加」を開いて、先ほど覚えた手順でボックスメニューを作成する。タイトルは「サイドバー用ボックスメニュー」など、自分がわかればOK。
ボックスメニューを完成させたら「公開」ボタンをクリック。その後「ブログパーツ」→「ブログパーツ一覧」に戻ると、作成したパーツの「呼び出しコード」が表示されている。これをコピーする。
「外観」→「ウィジェット」を開いて、「共通サイドバー」（またはトップページ専用サイドバー）に「カスタムHTML」ウィジェットを追加する。
カスタムHTMLの「内容」欄に、コピーした呼び出しコードを貼り付けて「保存」。サイトを表示してサイドバーにボックスメニューが出ていれば成功！
「ブログパーツ？呼び出しコード？なにそれ？」って最初は思うよね。でもやってみると拍子抜けするくらい簡単だから。怖がらずにやってみ？
サイドバーに置くときのおすすめ設定は列数2列、アイコンサイズ2～2.5em。
サイドバーは横幅が狭いから、3列以上にするとテキストが改行されまくって見た目が崩壊する。ここは2列一択で。
トップページに設置する方法【第一印象で読者を誘導】
トップページにボックスメニューを置くと、サイトに来た瞬間に「このサイトにはこんなコンテンツがありますよ」と一発で伝えられる。
いわばサイトの案内板みたいなもの。
設置方法は、トップページの設定によって変わるよ。
固定ページをトップページに設定している場合は簡単。その固定ページの編集画面で、好きな位置にボックスメニューブロックを直接配置するだけ。
ファーストビュー（ヘッダー画像）の直下に置くと、最も目に留まりやすい。
ブログ型のトップページ（最新記事一覧が表示される設定）の場合は、サイドバーと同じくブログパーツ経由で設置する。
「外観」→「ウィジェット」→「トップページ上部」などのウィジェットエリアにカスタムHTMLで呼び出しコードを貼り付ける。
トップページでの推奨設定は列数3～4列、アイコンサイズ3em以上。
メインエリアは横幅が広いから、3～4列でもゆったり配置できる。
画像アイコンを使ってインパクト重視のデザインにすると、トップページの印象が一気にプロっぽくなるよ。
トップページは「サイトの顔」だから、ここにボックスメニューがあるとないとでは、訪問者の印象が全然違う。最初のうちはサイドバーだけでもOKだけど、余裕ができたらトップページにも設置してみて
スマホ開閉メニューに設置する方法【モバイルUX爆上げ】
正直、ここが一番過小評価されてる設置場所だと思う。
今のブログって、アクセスの7～8割はスマホからなんだよ。
なのにスマホの開閉メニュー（ハンバーガーメニュー）の中身がデフォルトのテキストリンクのまま…って人、かなり多い。
もったいなさすぎる。
スマホ開閉メニュー内にボックスメニューを配置すると、スマホユーザーがメニューを開いた瞬間に視覚的でわかりやすいナビゲーションが表示される。
テキストリンクの羅列よりも、アイコン付きボックスの方が圧倒的にタップしやすいから、モバイルUXが一気に上がる。
設置方法はブログパーツ経由。手順はサイドバーとほぼ同じで、ウィジェットの配置先が違うだけ。
ブログパーツでスマホメニュー用のボックスメニューを作成（列数は2列、テキストは短めに設定）。
呼び出しコードをコピーして、「外観」→「ウィジェット」→「スマホ開閉メニュー下」にカスタムHTMLで貼り付け。
スマホメニュー用のポイントは、テキストを極限まで短くすること。
スマホ画面は狭いから、3文字～5文字が理想。
「WordPress」じゃなく「WP」、「ブログ運営」じゃなく「運営」くらいに削ると、スッキリ収まるよ。
記事下・フッターに設置する方法【読了後の回遊を促す】
意外と見落としがちなのが、記事の下とフッター。
記事を最後まで読んでくれた読者って、そのサイトのコンテンツに興味を持ってくれてる可能性が高い。
その瞬間に「他にもこんな記事ありますよ」とボックスメニューで見せてあげると、自然な流れで次の記事に誘導できるんだよ。
設置方法は同じくブログパーツ経由で、ウィジェットの配置先を以下のように変えるだけ。
- 記事下：「外観」→「ウィジェット」→「記事下部」にカスタムHTMLで配置
- フッター：「外観」→「ウィジェット」→「フッター（1）～（3）」にカスタムHTMLで配置
記事下に置く場合は、そのブログのメインカテゴリーや人気記事への導線を作るのがおすすめ。
「まだ読んでない良記事があるかも」って思わせたら勝ちだよ。
全部の場所に一気に設置する必要はないからね。まずはサイドバーから始めて、効果を実感できたら他の場所にも広げていくのがいいよ
ボックスメニューをおしゃれにするカスタマイズ術
基本のボックスメニューが設置できたら、次はデザインをワンランク上に引き上げよう。
デフォルトのままでも十分使えるんだけど、ちょっとした工夫で「おっ、このサイトちゃんとしてるな」って思わせるレベルに持っていける。
ここではカスタマイズのポイントを3つに絞って解説するよ。
おすすめ画像サイズと作り方のコツ
オリジナル画像を使うなら、画像サイズの統一が命。
ここを適当にやると、ボックスの大きさがバラバラになって一気にダサくなる。
おすすめの画像サイズは以下の通り。
| 画像タイプ | 推奨サイズ | 備考 |
| 正方形アイコン（PNG/JPEG） | 96×96px ～ 144×144px | デフォルト48×48の2～3倍で高解像度対応 |
| 横長画像（PNG/JPEG） | 720×96px ～ 1080×144px | 横長レイアウトで使う場合 |
| SVGアイコン | 48×48px（実寸でOK） | 拡大しても劣化しないから実寸で問題なし |
最重要ポイントは「全ての画像を同じサイズに揃えること」。100×100pxと120×80pxが混在していると、ボックスの高さがガタガタになって見た目が崩壊する。
画像を用意するときは、全て同じピクセルサイズでリサイズしてからアップロードしよう。
正直、こだわりがなければSVGアイコンが一番ラク。サイズを気にする必要もないし、色も自由に変えられる。画像を使うのは「他のサイトと差別化したい」ってときだけで十分だよ
無料でアイコン画像を手に入れたいなら、以下のサイトがおすすめ。
- ICOOON MONO：シンプルなモノクロアイコンが6,000個以上。商用利用OK
- Font Awesome：Web定番のアイコンフォント。SVGコードをコピーして直接入力できる
- Canva：自分でオリジナルアイコンを作りたいなら。テンプレートが豊富で初心者でもおしゃれに作れる
CSSコピペでホバーエフェクトを追加する方法
ボックスメニューにマウスを乗せたときの動き（ホバーエフェクト）を追加すると、一気にプロっぽさが増す。
「CSSなんて無理…」って思うかもしれないけど、コピペするだけだから安心して。
CSSの記述場所は、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」。
ここにコードを貼り付けるだけ。
【コピペOK】ホバーで背景色が変わるエフェクト
.swell-block-box-menu__item:hover{background:#f0f0f0;
transition: background-color 0.3s ease;}
マウスを乗せるとボックスの背景がふわっと薄いグレーに変わる。
さりげないけど「あ、これクリックできるんだ」って直感的にわかるようになるから、地味に効果大。
【コピペOK】ホバーでアイコンがズームするエフェクト
.swell-block-box-menu__figure svg{
transition: transform 0.3s ease;
}
.swell-block-box-menu__item:hover .swell-block-box-menu__figure svg{
transform: scale(1.2);
}
アイコンがほんの少し大きくなるエフェクト。
「おっ」ってなるちょうどいい動き。やりすぎ感がなくて、どんなサイトにも合う。
【コピペOK】ホバーで凹むボタン風エフェクト
.swell-block-box-menu__item {
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.swell-block-box-menu__item:hover {
transform: translateY(2px);
box-shadow: none;
}
ボタンを押したみたいに少し沈むエフェクト。
立体感が出て、クリックしたくなる見た目になる。特に「塗り」スタイルと相性がいいよ。
3つ全部入れる必要はなくて、どれか1つだけでOK。個人的には①の背景色変化が一番シンプルで万能だからおすすめ
ちなみに、特定のボックスメニューだけにCSSを適用したい場合は、ブロックの「高度な設定」→「追加CSSクラス」に任意のクラス名（例：my-boxmenu）を入力して、そのクラスに対してCSSを書けばOK。
サイドバー用とトップページ用でエフェクトを変える、なんてこともできるよ。
デザインパターン集【真似するだけでOK】
「おしゃれにしたいけど、センスに自信がない…」って人向けに、真似するだけでサマになるデザインパターンを3つ紹介する。
パターン①：シンプル×統一カラー（ミニマル系サイト向け）
・スタイル：標準
・アイコンタイプ：SVG
・アイコンカラー：サイトのメインカラーで統一
・背景色：白（または透明）
・列数：PC 4列 / スマホ 2列
・アイコンサイズ：3em
余計な装飾を省いた、とにかくスッキリしたデザイン。
「シンプルだけどちゃんとしてる」印象を与えたいサイトに最適。
迷ったらまずこのパターンから始めるのが安全だよ。
パターン②：カテゴリー別カラー分け（情報サイト向け）
・スタイル：標準
・アイコンタイプ：SVG
・アイコンカラー：カテゴリーごとに異なる色を設定（例：ブログ=青、投資=緑、旅行=オレンジ）
・背景色：白
・列数：PC 4列 / スマホ 2列
・アイコンサイズ：3em
アイコンの色だけ変えるシンプルな差別化。でもこれが効くんだよな。
色でカテゴリーを直感的に区別できるから、読者が「あ、この色のジャンルが気になるな」って感じでクリックしやすくなる。
パターン③：オリジナル画像×塗りスタイル（個性派サイト向け）
・スタイル：塗り
・アイコンタイプ：画像（Canvaなどで自作）
・画像サイズ：144×144pxで統一
・背景色：カテゴリーごとにパステルカラーを設定
・列数：PC 3列 / スマホ 2列
・アイコンサイズ：4em
一番手間はかかるけど、「このサイト、おしゃれだな」って言われるレベルのデザインになる。
自分だけのオリジナル画像＋塗りスタイルの組み合わせは、他のサイトと完全に差別化できる。
Canvaのアイコンテンプレートを使えば、デザインスキルがなくても意外といい感じのものが作れるから試してみて。
ボックスメニューでやりがちな失敗5選と対処法
ボックスメニュー自体はシンプルな機能なんだけど、ちょっとしたミスで「なんかダサい」「表示されない」ってなるパターンがある。
俺自身がハマったものも含めて、やりがちな失敗5つとその対処法をまとめたよ。
先に知っておけば回避できるから、設置する前にサッと目を通しておいて。
失敗①：画像サイズがバラバラで表示が崩れる
これ、オリジナル画像を使う人がほぼ全員やる失敗。
「100×100px」「120×80px」「150×150px」みたいにバラバラのサイズの画像を突っ込むと、ボックスの高さがガタガタになって見た目が一気に崩れる。
対処法はシンプル。画像を用意する段階で、全て同じピクセルサイズにリサイズしてからアップロードする。
おすすめは96×96pxか144×144pxの正方形。
一度揃えてしまえば、後から崩れることはないから最初だけ頑張ろう。
失敗②：サイドバーに直接ブロックを置こうとして詰む
これも初心者あるある中のあるある。
「サイドバーにボックスメニューを置きたい！」→ ウィジェット画面を開く → ブロックが追加できない → 「？？？」ってなるパターン。
原因は、ウィジェットエリアにはブロックエディターのブロックを直接配置できないから。
SWELLでは「ブログパーツ」を経由してウィジェットに配置する仕組みになってる。
対処法は、この記事の「サイドバーに設置する方法」で解説した通り。
ブログパーツで作成 → 呼び出しコードをコピー → カスタムHTMLに貼り付けの3ステップ。
一度覚えてしまえば、ボックスメニュー以外のブロックもサイドバーに置けるようになるから、覚えて損はないよ。
失敗③：スマホで表示が崩れる・表示されない
「PCでは完璧なのに、スマホで見たら崩れてる…」ってケース。これは主に2つの原因が考えられる。
原因①：プラグインとの競合
特に「Async JavaScript」などのJS系高速化プラグインがボックスメニューの表示と干渉することがある。
対処法は、一度そのプラグインを無効化してから表示を確認すること。
もし直れば、そのプラグインの設定でSWELL関連のJSを除外設定するか、別のプラグインに乗り換えるのが吉。
原因②：SWELLの設定
SWELL設定の「コンテンツに合わせて必要なCSSだけを読み込む」がONになっていると、ボックスメニューのCSSが読み込まれず表示が崩れることがある。
「SWELL設定」→「機能停止」タブでこの項目を一時的にOFFにして確認してみよう。
表示がおかしいと感じたら、まずは別のブラウザやシークレットモードで確認してみて。キャッシュが原因ってこともあるから
失敗④：列数を欲張りすぎてテキストが読めない
「たくさんカテゴリーがあるから5列にしよう！」→ テキストが改行されまくって何が書いてあるかわからない。
特にサイドバーでこれをやると悲惨。
サイドバーは横幅が約300px程度。ここに3列以上並べると、1ボックスの幅が100px以下になって、5文字以上のテキストはほぼ確実に改行される。
対処法は明快。サイドバーは2列が鉄板。メインエリアでも4列が上限と覚えておこう。
カテゴリーが多い場合は、列数を増やすんじゃなくてボックスの行数を増やす（8個、12個にする）方がデザインは崩れない。
失敗⑤：全部同じ色で地味になる
デフォルトのまま使うと、全てのアイコンがサイトのメインカラー一色で統一される。
統一感はあるんだけど、正直ちょっと地味なんだよな。
読者の視点で考えてみて。全部同じ色だと「どれも同じに見える」→ 視線が止まらない → クリックされにくい、ってなる。
対処法は2つ。
- カテゴリーごとに色を変える：各ボックスを個別選択してアイコン色を変えるだけ。簡単なのに効果絶大
- アクセントカラーを1色だけ入れる：メインカラーを基調にしつつ、一番推したいカテゴリーだけ目立つ色にする。視線誘導テクニック
使う色は多くても3～4色までにしておくと、ゴチャゴチャせずにまとまりのあるデザインになるよ。
色の選び方に迷ったら、自分のサイトのメインカラーを軸にして、同系色の濃淡で変化をつけるとセンスよく仕上がる。色相環とか難しいことは考えなくて大丈夫
SWELLボックスメニューのよくある質問（FAQ）
最後に、ボックスメニューに関してよく聞かれる質問をまとめたよ。設定中に「あれ？」ってなったらここを見返してみて。
- ボックスメニューブロックが見つからないんだけど？
-
まず落ち着け。だいたい原因はSWELLのバージョンが古いだけだ。
「外観 → テーマ」で確認して、古かったら更新しろ。更新後に「/ボックスメニュー」か「/box-menu」で出てくる。
- ボックスの数を増やしたり減らしたりできる？
-
できる。しかもめっちゃ簡単。
「＋」で足せるし、いらないやつは削除でOK。4個でも8個でも、キミのサイトに合わせて組めばいい。
- Font Awesomeのアイコンを使いたいんだけど？
-
使える。ちょい上級だけど、できたら一気に見た目が化ける。
Font Awesome 5でSVGコードを拾って、SWELL側の「SVG直接入力」に貼るだけ。最初はコピペで十分だ。
- 特定のページだけにボックスメニューを表示したいんだけど？
-
できる。方法はあるから安心しろ。
一番ラクなのはページ専用のウィジェットエリアに置くやり方。細かくやるなら表示条件を使えばOK。
- ボックスメニューとリッチカラム、どっちを使うべき？
-
初心者はボックスメニューでいい。むしろそれが正解。
リッチカラムは自由度高いぶん迷いやすい。まずはボックスメニューで形にして、必要になったら広げればいい。
まとめ：ボックスメニューを設置して、サイトを次のレベルへ
ここまで読んでくれてありがとう。最後に、この記事の要点をギュッとまとめておくよ。
- ボックスメニューはSWELL標準搭載のブロック。コード不要、5分で作れる
- 作り方は5ステップ：ブロック呼び出し → アイコン設定 → テキスト＆リンク設定 → 列数調整 → カラー設定
- 設置場所で効果が変わる：まずはサイドバーから。余裕ができたらトップページ・スマホメニューにも展開
- カスタマイズでプロっぽく：画像サイズの統一、CSSホバーエフェクト、カラー分けが効果的
- 失敗は事前に回避：画像サイズ統一、サイドバーは2列、ブログパーツ経由を忘れずに
正直な話、ボックスメニューの設置は「やるかやらないか」だけの問題。難しいことは何もない。
俺もそうだったけど、「いつかやろう」って後回しにしてる時間が一番もったいないんだよな。
設置してみたら「え、これだけ？もっと早くやればよかった」って絶対に思うから。
まずはサイドバーに1つ、ボックスメニューを置いてみよう。
それだけでサイトの印象がガラッと変わるし、読者の回遊率も変わってくる。
小さな一歩だけど、サイト運営のレベルを確実に一段上げてくれるよ。
そして、ボックスメニューはSWELLの便利機能のほんの一部にすぎない。
これをきっかけに、SWELLの他のオリジナルブロックも試してみてほしい。
使いこなせば使いこなすほど、「SWELLにしてよかった」って思えるはず。
さあ、今日からボックスメニューで、サイトを次のレベルに連れていこう。