Dressing 
ブログをもっとおしゃれに見せたい、読者が迷わず記事を探せるようにしたい…
そんなときに役立つのが、WordPressテーマ「SWELL」のボックスメニューです。
アイコンや画像とテキストを組み合わせて、パッと目に入るおしゃれなリンクボタンを簡単に作れます。
カテゴリーごとに整理したり、人気記事やSNSへの導線を作ったり…工夫次第でブログ全体の印象がグッと華やかに、読みやすく変わります。
この記事では、初心者でも迷わず作れる基本の作り方から、活用アイデアまで、順を追ってわかりやすくご紹介します。
ぜひ、あなたのブログにも取り入れてみてくださいね！
ボックスメニューとは？
下の画像のように、アイコンとテキストを組み合わせて、ボックス状に並べたリンクメニューです。
視覚的にまとまるので、見やすくて読者がクリックしやすくなります。
デザイン性があって、ページのアクセントとしてしっかり目立つのがいいですよね。
SWELLなら、このボックスメニューをとても簡単に設定できます。
- アイコンは好きなものを選ぶだけ
- 縦や横のレイアウトもワンクリックで切り替え可能
- アイコンの色やサイズ、メニュー数も自由に調整
アイコンだけじゃなく画像も使えるので、下図のように
あなたの雰囲気に合わせたオリジナルのメニューも手軽に作れちゃいます。
それでは、ここから実際にボックスメニューを作る手順をご紹介していきます。
【SWELL】ボックスメニューの作り方
ここでは、下のような、基本のボックスメニューを作る手順を解説します。
投稿や固定ページで「＋」をクリックして「ボックスメニュー」を選択します。
初期状態では4つのボックス（2列×2列）が空欄で表示されます。
4つのリンクボックスの中から 1つをクリックして選択 し、サイドバーの設定で「SVG」または「画像」を選択します。
アイコンを使う場合は「SVG」を選びます。
※SVG…拡大しても画像がボヤけないアイコンやイラストのファイル形式のこと
- SVGを選ぶ場合：アイコンライブラリから好きなアイコンを選びます。
- アイコンのスタイルを選ぶ
SWELLにはいくつかの「アイコンスタイル」が用意されています。
角ばったデザインや丸みのあるデザインなど、少しずつ雰囲気が異なります。 - 太さを選ぶ
アイコンの線の太さも調整できます。
細めにすると軽やかな印象に、太めにすると存在感が増して目立ちます。
2. 画像を選ぶ場合：PNGやJPGをアップロードするか、メディアライブラリから選択します。
「画像を正方形にトリミング」をオンにすると形がそろって見やすくなります。
ボックス内のテキスト部分に、分かりやすいラベルを入力します。
リンクボックスをクリックして選択した状態で、リンク先URLを設定します。
ステップ２〜4の手順を必要な数のボックスに繰り返して設定します。
ボックスの数を調整したいときは、以下の手順で操作してください。
ボックスを増やす場合
下にある「＋」ボタンをクリックすると、新しいボックスが追加されます。
ボックスを減らす場合
不要なボックスをクリックして選択し、上部の「︙」メニュー から「削除」を選ぶか、キーボードの Deleteキーを押して削除します。
中身の設定が終わったら、全体の見た目を調整していきましょう。
ボックスメニュー全体を選択して、サイドバーで全体の見た目を調整します。
※ページ下部の「ボックスメニュー」をクリックすると、全体を選択しやすくなります
- スタイルを選ぶ
「標準（枠線のみ）」または「塗り」から選べます。 - カラーを選ぶ
標準の場合は「テキストカラーとアイコンカラー」
塗りの場合は「テキストカラーと背景カラー」を選べます - 列数を設定する
PC・タブレット・スマホごとに列数を調整可能です。例：PCは4列、スマホは2列。 - 配置やサイズを調整する
アイコンや画像の大きさを調整したり、縦並び／横並びの切り替えができます。 - 色や効果を設定する
テキスト・背景・アイコンカラーを設定して統一感を出します。
ホバー時に色が変わるなどの効果を加えると、見た目がぐっと引き締まります。
「標準（枠線のみ）」または「塗り」から選べます。
▼標準
→ ミニマルな印象にしたいときに。
▼塗り
→ ボックスメニューをしっかり目立たせたいときに。一般的なブログではこちらがおすすめです。
標準の場合は「テキストカラー」「アイコンカラー」
塗りの場合は「テキストカラー」「背景カラー」を選べます。
背景色と文字色の明暗をしっかりつけると見やすくなります。
最後に、レイアウトの設定を行います。
縦並び／横並びの切り替えや、アイコンの大きさ、デバイスごとに表示する列数などを設定できます。
- アイコンとテキストの並び
アイコンとテキストを縦並びにするか、 横並びにするか選択します。
▼縦並び（アイコンが上、テキストが下）
→ ボックスをスッキリ見せたいときや、アイコンを大きく見せたいときにおすすめ。
▼横並び（アイコンとテキストが横に並ぶ）
→ ボックスをコンパクトに並べたいときや、テキストを目立たせたいときに向いています。
- ボックス間の余白
ボックス同士の間隔を調整できます。
余白を広げると、ゆったりとした印象になり、各ボックスが独立して見えやすくなります。
▼例：塗りボックス間の余白を10pxに設定
▼例：標準ボックス間の余白を20pxに設定
余白を0にすると、ボックス同士がぴったりとくっつき、リンクメニューのような見た目になります。
▼例：ボックス間の余白を0pxに設定
- アイコンサイズ
アイコンの大きさを調整できます。
アイコンを大きくすると目立ちやすくなり、アイコンを小さくするとすっきりした印象になります。
- 縦並びの場合：アイコンを大きめ（3.5em〜5em）にすると、視覚的に華やかで分かりやすいメニューになります。
- 横並びの場合：アイコンを小さめ（2em〜3em）にすると、テキストとのバランスが取れて読みやすくなります。
▼例：縦並びでアイコンサイズを5emに設定
▼例：横並びでアイコンサイズを2emに設定
▼例：画像でアイコンサイズを10emに設定（画像は丸くトリミングしたものを使用）
- 列数
PC・タブレット・スマホそれぞれで、横に何列並べるかを設定できます。
- PCは3〜4列がバランス良く見えておすすめ。メニュー数が8個以上なら4列、4〜6個なら2〜3列にするとバランスが取れます。
- タブレットは2〜3列が見やすいです。PCより1列少なめにすると窮屈に見えません。
- スマホは1〜2列が基本。メニュー数が少なければ1列で縦に並べると、タップしやすくなります。
▼例：PC（3列）
▼例：タブレット（2列）
▼例：スマホ（1列）
これで、基本のボックスメニューは完成です。
さらに、以下のような応用も可能です。
- 特定のボックスだけ色を変えて強調する
- サイドバーに配置してナビゲーションとして活用する
順番に詳しく解説していきますね。
SWELLのボックスメニュー設定【応用編】
個別のボックスごとに色を変える
ボックスメニュー全体ではなく、1つずつ違う色を設定することもできます。
個別ボックスをクリックして選択した状態で、サイドバーの設定から色を変更します。
- 塗りスタイルの場合：テキストカラーと背景色を設定できます。
- 標準スタイルの場合：テキストカラーとアイコンカラーを個別に変更できます。
カテゴリーごとにテーマカラーを決めている場合などに便利です。
メニューの並び順を変える
メニューの並び順を変えたいときは、移動させたいボックスを選んで、上下の矢印（▲▼）をクリックします。
サイドバーにボックスメニューを配置する
ボックスメニューをサイドバーに表示したい場合は、SWELLのブログパーツ機能を使います。
▼完成イメージ
「ブログパーツ」→「投稿を追加」から新しいブログパーツを作成します。
わかりやすいタイトルをつけて、ボックスメニューを作成し、「公開」します。
サイドバーは幅が狭いので、列数は1〜2列に設定するのがおすすめです。アイコンサイズも少し小さめ(2em〜2.5em)にすると収まりが良くなります。
▼アイコンとテキスト「横並び」で1列にすると見やすいメニューに
画面左上の「W」ロゴをクリックして、ブログパーツ一覧画面に戻ります。
[blog_parts id=”123″]のような呼び出しコードが表示されるので、コピーしておきます。
「外観」→「ウィジェット」を開き、「カスタムHTML」ウィジェットを「共通サイドバー」に追加します。
「カスタムHTML」ウィジェットの内容欄に、先ほどコピーしたブログパーツの呼び出しコードを貼り付けて「保存」します。
サイドバーにボックスメニューが正しく表示されているか確認しましょう。
お疲れさまでした！これでサイドバーの作成と設置は完了です。
ボックスメニューは設置場所や使い方次第で、いろんな活用ができます。
ここからは、すぐに真似できる具体的な活用例をいくつかご紹介しますので、ぜひ参考にしてみてください。
SWELLボックスメニュー実際の活用例
1. カテゴリーメニューとして
ボックスメニューの最も基本的な使い方が、カテゴリーメニューです。
ブログのカテゴリーをアイコン付きで並べると、読者が「知りたいジャンル」ををひと目で見つけやすくなります。
▼画像を使ったカテゴリーメニューの例
画像を使う場合は、そのカテゴリーの雰囲気に合った写真を選ぶと、より華やかで目を引きます。
トップページや固定ページに設置すると、サイト全体の導線として効果的です。
2. サイト内ナビゲーションとして
ボックスメニューは、「初めての方へ」「人気記事」など、サイト内の重要なページへの案内にもぴったりです。
アイコンを使ってシンプルにまとめると、どのページからでもアクセスしやすくなります。
▼サイト内ナビゲーションの例
設置場所としては、トップページの下部やサイドバー、フッターなどがおすすめです。
特に、記事を読み終えたあとやページの下の方に配置すると、「次にどこを見ればいいか」が分かりやすくなり、回遊率アップにつながります。
3. 人気記事・おすすめ記事への導線
「ぜひ読んでほしい！」という記事を、ボックスメニューで分かりやすく目立たせることができます。
記事のアイキャッチ画像を使えば、内容もすぐに伝わるのでクリック率もアップ。
サイドバーや記事下に設置すると、自然に次の記事へ誘導できます。
4. SNSやお問い合わせへのリンク
Instagram、X（旧Twitter）、お問い合わせフォームなど、読者との接点をまとめて案内できます。
▼公式のブランドカラーを取り入れる：それぞれのSNSだとひと目でわかりやすく、クリックしてもらいやすい。
▼サイトのテーマカラーにそろえる：全体の世界観を崩さず、統一感のある仕上がりに。
プロフィールページやフッター付近に設置するのがおすすめです。
5. アクション誘導メニューとして
記事を読み終えた読者に、次の行動を促すためのメニューです。
1列に並べたシンプルなボタン型にして、アイコンや色を工夫すると、自然にタップしたくなる導線が作れます。
ここまでで、5つの活用例をご紹介しました。
作ったボックスメニューは、パターンとして登録しておくと、次からすぐに呼び出せてとても便利です。
パターンの登録方法については、こちらの記事をご覧ください。
まとめ：あなたのブログにぴったりのメニューを作ろう
今回は、SWELLのボックスメニューの作り方から、実際の活用例までご紹介しました。
クリック操作だけで簡単に目を引くメニューが作れるので、初心者の方でも手軽に導入できるのがポイントです。
アイコンや画像の使い方次第で、さまざまな用途に使えるので、記事の内容を参考に、あなたのブログに合ったボックスメニューを作ってみてくださいね。
もし設定に迷ったときは、WordPress無料サポートでもお手伝いできますので、気軽にメッセージを送ってくださいね。
