SWELLのボックスメニューの作り方

2024年5月22日2024年12月21日

当ページのリンクには広告が含まれています。

これで解決！　SWELLのボックスメニューの作り方

－本記事の要約－

ブログ記事が増えてくると、せっかくの良記事が埋もれてしまい、読者の目に触れる機会が減ってしまうことがあります。そんなときに活躍するのが、WordPressテーマ「SWELL」のボックスメニューです。

ボックスメニューを使えば、洗練されたデザインで読者の目を引きつつ、カテゴリーを整理してユーザーに見やすく配置できます。サイドバーに設置すれば視認性が向上し、ブログ全体の回遊性をアップさせることが可能になります。

当サイトでも、サイドバーの目立つ位置にボックスメニューを配置しており、その効果を実感しています。

この記事では、初心者でも簡単にできるSWELLのボックスメニューの設定方法をわかりやすく解説します。この機能を活用して、読者が迷わず記事を楽しめるブログ運営を目指しましょう！

メチャじじ

最近、読者がすぐサイトから離れてしまうのが悩みでのう…。

チョイジジ

わかる！せっかく書いた記事が埋もれてしまうのは悲しいよね。何とか回遊してもらいたいな～。

ひろおじ

それなら、SWELLのボックスメニューがおすすめだよ！簡単に作れて見た目もバッチリ。これで読者が記事を見つけやすくなるんだ。

この記事では、SWELLのボックスメニューの作り方についてお話をしていきます。

この記事はこんな方にオススメ

ブログの回遊率が悪くて悩んでみえる方
ブログのサイドバーがいまいちしっくりこない方
SWELLのボックスメニューの作り方を知りたい方
ブログのサイドバーをおしゃれにしたい方

早く希望の記事箇所に到達したい方はコチラ

SWELLのボックスメニューとは？
SWELLのボックスメニューの特徴
SWELLのボックスメニューの作り方
SWELLのボックスメニュー作成の際の注意点
よくある Q＆A

＼シェアNo.1のレンタルサーバー／

エックスサーバー

＼シェアNo.1のWordPressテーマ／

SWELL

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

SWELLのボックスメニューがどんなものかは、文章で説明するより、そのまま見てもらったほうが分かりやすいと思いますのでご覧ください。

このサイトの右のサイドバーにあります、メニューボックスです。結構視覚的にわかりやすく目立っているのではないでしょうか？

SWELLでは、このようなボックスメニューが簡単に設置できます。

SWELLのボックスメニューの特徴

SWELLのボックスメニューはとても有効

ブログって記事数が増えてくるとユーザーの目に触れない記事が出てきますよね。だんだんと埋もれていってしまうということです。それを避けるためには、カテゴリーや分かりやすい見出しを作ってうまく回遊させる仕組みを作ることが有効です。

カテゴリーが最新記事だけだと、当然古い記事は目にする確率が低くなりますし、デフォルトのカテゴリー表示だけでは、全然目立たなくてどんどんと回遊率が悪くなります。

メチャじじ

そんな時、SWELLのボックスメニューはとても有効なのじゃ・・・

視覚的に目立つのでクリック率が上がる
自分の推したいカテゴリーなどを推すことができる
装飾や配置を自由にできる

チョイジジ

ユーザーがブログを回遊するためにとても有効な手段になります。

SWELLのボックスメニューは設置がとても簡単

SWELLのボックスメニューは、とにかく設置が簡単。

記事が増えてくるとカテゴリーの再構築をすることがありますが、そういった時もストレスなく対応が可能です。見栄えもよくて修正もさっと簡単にできますので、こういうときはSWELLを使っていて良かったなと感じます。

リンク先は自由

SWELLのボックスメニューは、単にカテゴリー別が形の変わったものではありません。

リンク先は自由に設定できます。カテゴリー別にしてもいいですし、特定の記事に飛ばしてもいいですよね。自由度が高い使い方ができるのです。

先ほど、当サイトのサイドバーの説明をしましたけど、正確には上下のボックス型の部分はボックスメニューですが、真ん中の部分はSWELLボタンです。

SWELLのボックスメニューの作り方

では、早速サイドバーに貼り付けるためのボックスメニューを作っていきましょう。

今回は、このボックスメニューをサイドバーに貼ってみましょう。

サイドバーに貼り付けるためのボックスメニューを作ります.

作り方は簡単！概要は以下の通りです。

ブログパーツで作成します
ウィジェットでサイドバーに表示させます

クリックすると該当記事までジャンプします。

①ブログパーツでボックスメニューを作成します

STEP

ブログパーツで新規投稿

「ダッシュボード」「ブログパーツ」「新規投稿を追加」

STEP

タイトル入力

タイトルを入力します（ここではサイドバーと入れました）
左のブロックツール挿入から「ボックスメニュー」をクリックします

STEP

ボックスメニューが現れます

STEP

右の設定部分を拡大

今回は下のような設定にしてあります
カラーはデフォルトになっていますので、ご自身のサイトカラーで表示されます

STEP

アイコンを設定します

本文のイラスト部分をヒットします
右にアイコン設定部分が表示されます
アイコン選択から好きなアイコンを選びます

＊「SVG」と「画像」とありますが、「SVG」は用意されているアイコン。「画像」は自分で用意したアイコンを使用することもできます。

STEP

文字入力とリンク

文字の入力とリンク先を入力します

STEP

公開をクリックします

ある程度できましたら公開をします
後から修正・更新ができますのでとりあえず作ってみましょう

STEP

とりあえず終了です。

②ウェジットでサイドバーに表示させます

STEP

ブログパーツから「呼び出しコード」をコピーします

先ほど作成したブロックメニューの「呼び出しコード」をコピーします

STEP

ウィジェットを開きます

「外観」「ウィジェット」開きます

STEP

カスタムHTMLをクリック

STEP

ウィジェットを追加

共通サイドバーを選択します
ウィジェットを追加をクリックします

STEP

「呼び出しコード」を貼り付けて保存します

コピーした「呼び出しコード」を貼り付けます
「保存」します
最後に「完了」をクリックします。

＊タイトルは付けても付けなくてもどちらでもよいです。どう表示されるかは実際に見てみてください。

STEP

画面プレビューしてみましょう。

とりあえずできました。
一旦ウィジェットに登録しておけば、ブログパーツを修正するだけで、表示内容が変更されますのでとても便利。

いろいろなパターンを作ってみよう

アイコンや文字に色を付けることができます。

背景に色を付けることもできます

このように簡単に装飾が可能になりますので、見た目にもおしゃれなボックスメニューを素早く作ることができます。

SWELLのボックスメニュー作成の際の注意点

ある程度サイトにボリュームが必要

ボックスメニューの有効な使い方は、ある程度見てもらいたい魅力的なカテゴリーを指定する使いかたが一番効率がいいような気がします。

よって、まだサイトの記事数が少ないときは、なかなかカテゴリーを複数作ることができない場合もありますので、ある程度記事ができてからの設置が効力を発揮すると思います。

人と被る

意外とこのボックスメニューを使ってる人が多く、アイコンも共通していて似ていることから、他のサイトと似かよってしまうイメージがあります。「あれっ、このサイトもボックスメニュー・・・」「こっちのサイトもボックスメニュー・・」なんてことも・・・・・

こんな時は、自分だけのアイコンを作ることがオススメです。僕も作ったことないので、どのような作り方がいいのかわかりませんが、差別化にはもってこいです。

メチャじじ

おぬし、まず自分でやってから紹介するのじゃ！！

ひろおじ

あ～、ごめん、ごめん・・・・。
じゃあ、簡単にできる別の方法を提案するよ！

これは、ただ背景の色を変えただけですけど、同系のグラデーションをつけると、なんとなくおしゃれっぽく見えるようになります。簡単にできますのでよかったら試してみてくださいね！

SWELLのボックスメニューの作り方でよくある Q＆A

ボックスメニューとは何ですか？: ブログ内でカテゴリーやリンクを整理し、訪問者に視覚的にわかりやすいナビゲーションを提供するためのデザイン要素です。
SWELLのボックスメニューはどこに設置できますか？: サイドバーやフッター、特定のページ内など、自由に配置できます。
ボックスメニューに含めるべき項目は？: 人気記事、カテゴリー、タグ、特集ページリンクなど、訪問者の興味を引きそうな項目を選びましょう。
ボックスメニューはSEOに影響しますか？: 直接的な効果はありませんが、内部リンクが強化されるため回遊性向上に役立ち、結果的にSEOにも良い影響を与えます。
ボックスメニューを設置するメリットは？: 記事の回遊率アップ、ユーザーの即離脱防止、閲覧したい情報へのアクセスを容易にする効果があります。
どのくらいのカテゴリーを表示すればよいですか？: 多すぎず少なすぎず、訪問者にとって重要な情報が見やすい範囲（5〜7項目程度）が理想です。
ボックスメニューで訪問者の滞在時間を増やせますか？: 直感的なナビゲーションが提供できるため、閲覧時間やページビューの増加が期待できます。
モバイル対応のボックスメニューはどうすれば良いですか？: SWELLのレスポンシブデザイン機能を活用すれば、自動的にモバイル対応されます。
ボックスメニューのパフォーマンスへの影響は？: SWELLは軽量化に配慮されているため、適切に設置すればパフォーマンスへの影響は最小限です。

SWELLブログを一番速く、簡単に始める方法【オススメ】

WordPressブログを始めるには、「レンタルサーバー」「ドメイン」「WordPressテーマ」が必要です。当サイトのオススメは・・・・

レンタルサーバーとドメイン

エックスサーバー

WordPress「テーマ」

SWELL

エックスサーバーの「WordPress クイックスタート」を利用するとすぐにSWELLブログを始められます！

👉エックスサーバーの「WordPress クイックスタート」を利用すれば、レンタルサーバーの申し込み時に、SWELLも一緒に購入することができ、ドメインの取得・設定、WordPressのインストール、SWELLのインストールまで、一気に完了させることができます。運用管理も一括ですから本当にオススメです！（SWELLも割引価格で購入可能）