WordPressテーマ「SWELL」では、トップページのメインビジュアルに複数の画像を設定することで、ヘッダー部分をスライダー表示できます。
この記事では、SWELLでヘッダー画像を複数枚登録し、トップページにスライダー表示するまでの手順をまとめます。
SWELLのメインビジュアルは2枚以上でスライダーになる
SWELLのメインビジュアルは、画像が1枚の場合は1枚画像として表示され、2枚以上の有効な画像を設定するとスライダーとして表示されます。
設定画面を開く
- WordPress管理画面へログインします。
- 「外観」→「カスタマイズ」を開きます。
- 「トップページ」→「メインビジュアル」を開きます。
- メインビジュアルの表示内容を「画像」に設定します。
スライド画像を登録する
「各スライドの設定」で、スライド1、スライド2、スライド3、スライド4などに画像を設定します。
- スライド画像［1］（PC）
- スライド画像［2］（PC）
- スライド画像［3］（PC）
- スライド画像［4］（PC）
スマートフォン専用画像を用意する場合は、それぞれの「SP」画像も設定します。PC画像と同じ画像を使うこともできますが、文字入り画像はスマートフォンで左右が切れやすいため、実機確認がおすすめです。
スライダーの動きを設定する
画像を2枚以上登録すると、SWELLの「画像スライダー設定」が利用できます。主に次の項目を調整します。
- スライドの切り替えアニメーション：フェード / スライド
- スライドの表示中アニメーション：なし / ズームイン / 左から右へ
- スライドの切り替わり速度
- スライドが切り替わる間隔
- 矢印ナビゲーション
- ページネーション
文字やリンクもスライドごとに設定できる
SWELLでは各スライドに、メインテキスト、サブテキスト、リンク先URL、ボタンテキスト、文字位置、文字色などを設定できます。
ただし、画像そのものに文字を入れている場合は、SWELL側でも同じテキストを重ねると読みにくくなるため、どちらか一方に統一すると見やすくなります。
画像が表示されず no_img.png になる場合
スライド画像が未設定、または有効な画像IDが取得できない場合、SWELLの標準画像「no_img.png」が表示されることがあります。
この場合は、メインビジュアル設定で各スライドの画像を一度確認し、メディアライブラリから正しい画像を再選択します。
設定後に確認するポイント
- PCで画像が正しく表示されるか
- 2枚以上が自動で切り替わるか
- スマートフォンで文字や主要被写体が切れていないか
- 画像の読み込みが遅くないか
- リンクを設定した場合、正しいページへ遷移するか
まとめ
SWELLのヘッダー画像をスライダー表示するポイントは、「有効な画像を2枚以上設定する」ことです。画像を複数設定したうえで、切り替え速度やアニメーション、PC・スマートフォンでの見え方を調整すれば、トップページの印象を大きく変えることができます。
筆者プロフィール｜DXジュン（Apice Technology 代表）
「tecn」を運営している DXジュン です。
Apice Technology株式会社の代表として、20年以上にわたり Web制作・業務システム開発・業務改善支援に携わっています。
普段は中小企業向けに、在庫管理・予約管理・受発注管理など、業務を効率化するためのシステム開発やDX支援を行っています。
tecnでは、業務改善のヒントやWebシステムの仕組み、「技術が暮らしを少し便利で楽しくする」をテーマに、現場目線で分かりやすく情報発信しています。
最近は在庫管理のDX化に力を入れており、SKU・JAN・棚卸・バーコード運用など、現場で役立つ実践的なノウハウを発信しています。
また、小規模事業者向けの無料ツール 「アピスminiシリーズ」も公開しています。
🔗 Apice Technology（会社HP）
🔗 音を楽しむ【耳スタ】
🔗 在庫管理システムの機能紹介
記事が皆さまの仕事や日常のヒントになれば幸いです。
コメント