SWELLのメインビジュアルをスライダーにする設定方法

2026年10月25日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

ブログのトップページを開いたときに、おしゃれなスライダーで第一印象をよくしたいと思っていませんか。私は以前、大きな画像を5枚もスライダーに入れてしまい、トップページの表示が目に見えて遅くなった失敗をしたことがあります。

この記事では、SWELLのメインビジュアルをスライダーにする設定方法を、設定画面の名前まで具体的に初心者向けに解説します。実際の失敗談も交えるので、読みながら進めれば、見た目と表示速度を両立したトップページを作れます。

※ブログの作業環境を見直したい方へ：筆者が記事作成に使っているMacBook Air M5は、軽くて持ち運びやすく、デザインの調整や記事作りを快適にこなせるノートPCです。

➡️ AmazonでMacBook Air M5の最新価格を見る

価格は変動するため、最新の情報はAmazonの商品ページでご確認ください。

ニャフィ

トップページに、おしゃれなスライダーを付けたいのにゃ！

たいがブログ

第一印象が良くなると、ブログの雰囲気も変わりますよね。

ニャフィ

でも画像を増やすと、表示が重くならないかにゃ？

たいがブログ

重くしないコツも含めて、5つのステップで解説しますね。

▼あわせて読みたい：トップページの表示速度を左右するサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLのメインビジュアルとは

メインビジュアルは、トップページを開いたときに最初に表示される大きな画像エリアです。SWELLでは、カスタマイザーから画像を設定するだけで、コードを書かずにおしゃれなトップページを作れます。

筆者は以前Cocoonを使っていたころ、スライダーを作るために別のプラグインを探して入れる手間がありました。SWELLはテーマの機能だけでスライダーを作れるので、プラグインを増やさずに済むのが助かっています。

トップページの第一印象を決めるエリア

読者はトップページを開いた数秒で、そのブログを読み進めるかどうかを判断します。メインビジュアルでブログのテーマや雰囲気が伝わると、ほかの記事も読んでもらいやすくなります。

スライダー・1枚画像・動画から選べる

SWELLのメインビジュアルは、スライダー・1枚画像・動画の3種類から選べます。複数のテーマを紹介したいなら、画像が自動で切り替わるスライダーがおすすめです。

メインビジュアルのスライダー設定方法

スライダーは、カスタマイザーの「トップページ」→「メインビジュアル」から設定します。設定を始める前に、使う画像を準備しておくと作業がスムーズに進みます。

筆者が表示の遅さに悩んだ原因は、圧縮していない大きな画像をそのまま使ったことでした。画像を軽くしてから登録し直したところ、トップページの表示がぐっと速くなりました。

画像は事前に圧縮しておく

スライダー用の画像は、登録する前に圧縮して軽くしておくのが基本です。プラグインの「EWWW Image Optimizer」を使えば、アップロードした画像を自動で圧縮できます。

スマホ用の画像も用意する

パソコン用の横長の画像は、スマホでは左右が切れて表示されることがあります。SWELLではスマホ用の画像を別に設定できるので、縦長の画像も用意しておきましょう。

STEP

メインビジュアルの設定画面を開く

WordPressの管理画面から「外観」→「カスタマイズ」を開き、「トップページ」→「メインビジュアル」を選びます。右側にトップページのプレビューが表示されます。

STEP

表示タイプをスライダーにする

表示タイプの項目で「スライダー」を選びます。選ぶと、スライド画像を登録する欄が表示されるので、ここに画像を設定していきます。

STEP

スライド画像を登録する

パソコン用とスマホ用の画像をそれぞれ登録します。筆者はパソコン用だけで済ませて、スマホで画像の文字が切れてしまったので、スマホ用も必ず設定しましょう。

STEP

テキストとボタンを設定する

スライドごとにメインテキストやボタンを設定できます。ボタンのリンク先に読んでほしい記事やカテゴリーを指定すると、読者を案内しやすくなります。

STEP

切り替えの動きを調整して公開する

切り替えのアニメーションや速度を調整し、プレビューで確認します。問題なければ上部の「公開」ボタンを押して、設定を反映させましょう。

スライダーを見やすく軽く保つコツ

スライダーは、設定して終わりではなく見やすさと表示速度のバランスを保つことが大切です。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者はスライダーの画像位置を調整するとき、外部モニターにパソコン表示とスマホ表示のプレビューを並べて作業しています。見比べながら直せるので、文字の切れや画像のずれにすぐ気づけるようになりました。

スライドは3枚程度に絞る

スライドを増やすほど、読み込む画像が増えて表示が重くなります。読者もすべてのスライドを見るとは限らないので、伝えたい内容を3枚程度に絞るのがおすすめです。

PageSpeed Insightsで表示速度を確認する

スライダーを設定したら、Googleの無料ツール「PageSpeed Insights」でトップページの速度を確認しましょう。スマホの点数が大きく下がっていないかを見るのがポイントです。

スライダー設定のチェックポイント

画像は圧縮してから登録している
スマホ用の画像も設定している
スライドは3枚程度に絞っている
設定後に表示速度を確認している

▼あわせて読みたい：パソコンとスマホのプレビューを並べて作業できる、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

スライダーの画像はどんな形がいいですか？: パソコン用は横長、スマホ用は縦長の画像を用意するのが基本です。どちらも圧縮してから登録すると、表示速度を落とさずに済みます。
スライダーを使うとSEOに悪影響がありますか？: スライダー自体が直接悪影響を与えるわけではありません。ただし表示が遅くなると読者が離れやすくなるので、画像を軽く保つことが大切です。
スライダーをやめて1枚画像に戻せますか？: 戻せます。メインビジュアルの表示タイプを「1枚画像」に変更するだけです。登録したスライド画像は残るので、あとからスライダーに戻すこともできます。
スライドごとに別のリンクを設定できますか？: できます。スライドごとにボタンやリンク先を設定できるので、カテゴリーやおすすめ記事へそれぞれ案内することが可能です。