※本記事はアフィリエイト広告を含む記事へのリンクを含みます。
人気ブログのトップページで、画像付きのバナーがずらりと並んでいるのを見たことはありませんか。読んでほしい記事へ自然に誘導できる便利なパーツですが、どこから設定するのか迷う方も多いはずです。SWELLならピックアップバナーで、この見せ方が簡単に作れます。
この記事では、SWELLのピックアップバナーの設定方法を手順付きで解説します。私が実際につまずいたポイントもあわせてお伝えしますね。読み終えるころには、トップページから収益記事へ読者を案内できるようになりますよ。
※まだSWELLを導入していない方へ:SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。
デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。
ニャフィトップページに画像のバナーを並べたいにゃ。



おしゃれに見えますよね。SWELLなら標準機能で作れますよ。



メニューを使うって聞いたけど、難しくないかにゃ?



メニュー作成から表示確認まで、順番にご案内しますね。
▼あわせて読みたい:画像の多いトップページほど、サーバーの速さが表示の快適さを左右します。ブログの土台になるサーバー選びはこちらで解説しています。


SWELLのピックアップバナーとは?設定前に知っておきたい基本


ピックアップバナーは、トップページのヘッダー下などに画像付きのリンクを並べて表示できる機能です。特に読んでほしい記事やカテゴリーへ、読者を自然に案内できますよ。
設定は「メニュー」と「カスタマイザー」の2か所で行います。中身はメニュー、見た目はカスタマイザーと覚えておくと迷いません。
ピックアップバナーで得られる効果
トップページを訪れた読者に、ブログの「顔」となる記事をひと目で見せられるのが最大の魅力です。私も収益記事へのバナーを置いてから、トップページ経由でレビュー記事が読まれる回数が目に見えて増えました。導線づくりの第一歩として、とても効果的です。
バナー画像は「メニューの設定」で決まる
リンク先が投稿や固定ページなら、その記事のアイキャッチ画像がバナーに使われます。カスタムリンクの場合は、メニュー項目の「説明」欄に画像のURLを入れて指定する仕組みです。以前使っていた別のテーマではバナー専用のウィジェットを作り込む必要があり、SWELLの手軽さには驚きました。
SWELLでピックアップバナーを設定する方法


ここからは、実際にピックアップバナーを表示させる手順を見ていきましょう。最初にメニューを作り、そのあとで見た目を整える流れです。
バナーに並べる記事は、あらかじめ3〜4本に絞っておくと作業がスムーズですよ。先に「何を見せたいか」を決めるのがコツです。
「説明」欄が表示されないときは表示オプションを確認する
メニュー画面に「説明」欄が見当たらないときは、画面右上の「表示オプション」から「説明」にチェックを入れてください。私はこれを知らずに、画像を指定できないと30分ほど悩みました。最初に確認しておけば、つまずかずに済みますよ。
アイキャッチ画像は先に整えておく
バナーには記事のアイキャッチがそのまま表示されるため、文字が小さすぎる画像だと内容が伝わりません。設定前に、各記事のアイキャッチが見やすいかチェックしておきましょう。画像のテイストをそろえると、統一感がぐっと増します。
管理画面の「外観」→「メニュー」を開き、「新しいメニューを作成」をクリックします。名前は「ピックアップバナー」など、わかりやすいものにしましょう。
左側の一覧から投稿や固定ページを選び、「メニューに追加」をクリックします。並べたい順番にドラッグで調整しておきましょう。
画面下の「メニュー設定」で、メニューの位置に「ピックアップバナー」をチェックし、「メニューを保存」をクリックします。
「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」を開き、レイアウトや表示する場所を調整します。
設定を公開したら、トップページをスマホとパソコンの両方で開き、バナーがきれいに並んでいるか確認して完了です。
ピックアップバナーで成果を出すための活用のコツ


バナーを表示できたら、次は「何を、どう並べるか」を考えていきましょう。同じピックアップバナーでも、並べる記事しだいでクリックのされ方は大きく変わります。
ポイントは、読者に最初に読んでほしい記事を厳選すること。設置して終わりではなく、反応を見ながら育てていく意識が大切です。
並べる記事は3〜4本に絞る
私は最初、紹介したい記事を6本並べたのですが、1枚ずつのバナーが小さくなり、かえってどれも目立たなくなってしまいました。収益記事やまとめ記事を中心に3〜4本に絞ってからは、トップページからのクリックが明らかに増えています。欲張らないことが一番のコツです。
アイキャッチのデザインをそろえて統一感を出す
バナーは横に並ぶため、画像の色やフォントがバラバラだと雑然とした印象になります。以前使っていた別のテーマではバナー用に画像を別で作り直していましたが、SWELLはアイキャッチがそのまま使えるので、アイキャッチのテンプレートを統一するだけで見栄えが整いますよ。
▼あわせて読みたい:バナーで目立たせる記事も、検索で読まれる記事であることが大切です。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。


SWELLのピックアップバナー設定でよくある質問


【当サイト限定特典】:今月中に下記の公式特設ページから申し込むと、最大30%OFF(月額693円〜)の圧倒的コスパで国内シェアNo.1の超高速環境が手に入ります。
設定さえ終われば、今日からすぐにブログを書き始められます。この機会にぜひ一歩踏み出してみてください。
まとめ:ピックアップバナーで読んでほしい記事へ案内しよう
SWELLのピックアップバナーは、メニューで中身を作り、カスタマイザーで見た目を整えるだけで設置できます。並べる記事は3〜4本に絞り、アイキャッチのデザインをそろえるのが成果につながるコツでした。
トップページは、ブログの第一印象を決める大切な場所です。まずは一番読んでほしい収益記事を1本選んで、バナーに置くところから始めてみてください。



トップページが一気にプロっぽくなったにゃ!



お疲れさまでした!これで読者を迷わず案内できますね。



バナーで目立つ記事ほど、文章のミスが心配だにゃ。



手頃な料金で使える校正ツールのレビューもぜひどうぞ。
▼あわせて読みたい:多くの人に読まれる記事こそ、誤字脱字はなくしておきたいもの。お手頃価格で始められる日本語校正ツール「Shodo」を実際に使ってみた感想をまとめています。


おすすめ記事
-
SWELL


SWELLのカスタマイザーが反映されない時の原因と対処法
-
SWELL


SWELLのアップデート後に表示崩れした時の原因と対処法
-
SWELL


SWELLで追加CSSを追加する方法と反映されない時の対処
-
SWELL


SWELLで構造化データを設定する方法と確認のコツ
-
SWELL


SWELLでnoindexを設定する方法と注意点
-
SWELL


SWELLでOGP画像を設定する方法と反映されない時の対処
-
SWELL


SWELLでサーチコンソールの所有権を確認する方法
-
SWELL


SWELLにGA4を設置する方法と設置後にやるべき設定
-
SWELL


SWELLでブログ型とサイト型を切り替える方法と選び方
-
SWELL


SWELLでランディングページを作る方法と成果を出すコツ
-
SWELL


SWELLで企業サイト・ホームページを作る方法と手順
-
SWELL


SWELLで人気記事を表示する設定方法とPV集計の仕組み










コメント