要約：WordPress画像カルーセルを作成する方法
WordPressでは、構築中のものや既に使用しているプラグインによって、画像カルーセルを追加する方法が複数あります。
- SeedProd – 画像カルーセルブロックを任意のカスタムページにドラッグし、画像をアップロードし、約5分で自動再生速度を設定します。
- Jetpack – WordPressの投稿やページで、無料のフルスクリーンギャラリーカルーセルを有効にします。
- プラグインなし（Gutenberg） – ネイティブのギャラリーブロックとカスタムCSSを使用して、基本的なカルーセル効果を実現します。
- WooCommerce – 無料のProduct Gallery Sliderプラグインを使用して、任意の製品ページに製品画像スライダーを追加します。
ほとんどのWordPressカルーセルプラグインはデモでは印象的ですが、設定に時間がかかり、人気のあるものはページの負荷を増やすことで悪名高いです。
ポートフォリオ、WooCommerceストア、またはランディングページを構築している場合でも、セットアップに適したWordPress画像カルーセル方法があります。ここでは、最も速い3つのオプションを紹介します。
WordPressの画像カルーセルを作成するにはどうすればよいですか？
最も速い方法はSeedProdの画像カルーセルブロックです。任意のページにドラッグし、画像をアップロードし、約5分で自動再生速度を設定します。
WordPressの投稿には、Jetpackが無料のスライドショー機能を追加します。WooCommerceの製品ページでは、無料のProduct Gallery Sliderプラグインを使用できます。
カスタムWordPressページ用の画像カルーセルを作成する方法
SeedProdは、100万人以上のユーザーを持つ最高のWordPressウェブサイトビルダーです。コードなしで画像スライダーを簡単に簡単に追加できる、組み込みのWordPressカルーセルプラグインが含まれています。ドラッグアンドドロップのウェブサイトビルダーを使用すると、コーディングなしでサイトの任意のページに複数の画像カルーセルやスライダーを追加できます。
これを念頭に置いて、SeedProdを使用してウェブサイトに画像カルーセルを追加する方法を見てみましょう。
ステップ1：SeedProdプラグインをインストールして有効化する
最初のステップは、SeedProdプラグインのコピーをダウンロードすることです。SeedProdには簡単なランディングページを作成するための無料バージョンがありますが、高度な機能すべてにアクセスするにはProバージョンを使用します。
次に、プラグインをWordPressウェブサイトにアップロード、インストール、有効化します。これにヘルプが必要な場合は、WordPressプラグインのインストールに関するこれらの手順に従ってください。
プラグインを有効化したら、SeedProd » 設定に移動して、SeedProdライセンスキーを入力します。ライセンスキーは、SeedProdアカウントのダウンロードセクションで見つけることができます。
ステップ2：WordPressランディングページを作成する
次のステップは、SeedProd » ページに移動して、新しいランディングページを作成することです。
このページの先頭には、ワンクリックで有効化できる4つの異なるページモードがあります。それらは次のとおりです。
- 近日公開 – 新しいウェブサイトについて訪問者（およびGoogle）に知らせるために、近日公開ページを有効にします。
- メンテナンスモード – 訪問者に、一時的にメンテナンスのためにダウンしていることを知らせます。
- ログイン – カスタムWordPressログインページを有効化して作成します。
- 404 – WordPressサイトでカスタム404エラーページを有効にします。
ページモードセクションの下には、SeedProdプラグインで作成したランディングページが表示されます。好きなだけカスタムWordPressページを作成できます。
新しいランディングページを作成ボタンをクリックして、新しいページを作成します。これにより、SeedProdのレスポンシブなランディングページテンプレートライブラリが表示されます。
好きなランディングページデザインを選択できますが、ページの見た目に近いテンプレートを選択することをお勧めします。そうすれば、あまり多くの変更を加える必要がなくなります。
この投稿では、Travel Webinar Pageテンプレートを使用しました。これは、画面上部のWebinarタブをクリックすることで見つけることができます。
このテンプレートを選択するには、サムネイルの上にマウスをホバーし、オレンジ色のチェックアイコンをクリックします。
次に、ページ名を追加できるポップアップが表示されます。ページ名はランディングページデザインには表示されませんが、ページのURLを設定します。したがって、訪問者がページにアクセスしたときに意味がわかるような名前を選択してください。
次に、保存してページ編集を開始ボタンをクリックします。
ステップ3：ランディングページのコンテンツをカスタマイズする
テンプレートがロードされたら、SeedProdのドラッグアンドドロップウェブサイトビルダーが表示されます。カルーセルを追加するには、ステップ4に進んでください。
ステップ4：WordPress画像カルーセルブロックを追加する
スタンドアロンのカルーセルプラグインとは異なり、SeedProdの画像カルーセルブロックはウェブサイトビルダーに直接組み込まれています。個別のプラグインをインストールする必要はなく、ページに追加のJavaScriptをロードする必要もありません。
しかし、あなたがここにいる理由は、簡単にページにカルーセルを追加することです。これを行うには、SeedProdの画像カルーセルブロックを使用できます。
この例では、既存のヒーロー画像をスライドするカルーセルに置き換えます。まず、既存の画像の上にホバーし、ゴミ箱アイコンをクリックして削除します。
次に、高度なブロックパネルから画像カルーセルブロックを選択し、ページにドラッグします。
ページ上のブロックをクリックすると、カルーセル設定が表示されます。たとえば、画像1セクションをクリックすると、コンピューターまたはメディアライブラリから独自の画像を使用するか、ロイヤリティフリーのストック画像を選択するオプションが表示されます。
画像カルーセルのカスタマイズ
カルーセルに画像を追加した後、画像キャプションを入力し、画像を追加ボタンをクリックして、カルーセルスライダーにさらに写真を追加できます。
SeedProd は、カルーセルがどのデバイスでもすばらしく見えるように、画像デスクトップ、タブレット、スマートフォン用に自動的に調整します。
カルーセル設定パネルでは、画像スライダーをさらに調整できます。たとえば、次のことができます。
- ナビゲーションの色をダークまたはライトから選択する
- カルーセルギャラリーを自動再生するように選択する
- 自動再生速度を秒単位で選択する
- 画像キャプションを表示または非表示にする
- ギャラリーの配置を選択する
それでも十分でない場合は、テンプレートタブをクリックして、クリック数を減らしてギャラリー画像のスタイルを変更できます。たとえば、画像のドロップシャドウ付きのスタイルを選択しました。
詳細設定タブでは、キャプションのタイポグラフィ、境界線、スペーシングをカスタマイズし、ブランドに合った色とスタイルを選択できます。
ランディングページカルーセルの見た目に満足したら、画面右上にある緑色の保存ボタンをクリックします。
ステップ5：ランディングページの設定を構成する
ページ設定をクリックして、ページに名前を付け、公開するように設定します。
ステップ6：画像カルーセルページを公開する
ランディングページを公開する前に、モバイルでプレビューして、デザインがモバイルユーザーにとって見栄えが良いことを確認してください。そうしないと、ユーザーエクスペリエンスを損なう可能性があります。
ページのプレビューを表示するには、画面下部にあるモバイルプレビューアイコンをクリックします。
次に、モバイルデバイスから閲覧している場合と同じようにページを表示し、ビジュアルエディターで変更を加えることができます。
また、タイポグラフィ設定を持つ任意のブロックのデスクトップとモバイルのテキスト要素間をすばやく移動することもできます。これにより、表示モードを切り替えることなく、モバイルまたはデスクトップページのいずれかに変更を加えることができます。
モバイルとデスクトップの両方のランディングページバージョンに満足したら、緑色の保存ボタンのドロップダウン矢印をクリックし、公開を選択します。
次に、次の画面のライブページを表示ボタンをクリックして、ランディングページをプレビューできます。
テストウェブサイトでの画像カルーセルの表示は次のとおりです。
これで、ページが公開され、複数の画像を一度に表示するための完全にレスポンシブなWordPress画像カルーセルが完成しました。
WordPress投稿に画像カルーセルを追加する方法
初心者には、使いやすく、WordPressの投稿やページ用の組み込み画像スライダーが付属しているため、Jetpackをよくお勧めします。
Jetpackは、WordPressサイトに多くの便利な機能を追加する無料のプラグインです。
たとえば、サイトのセキュリティの問題をスキャンし、ボットやハッカーからのブルートフォース保護を提供できます。また、画像を遅延読み込みしたり、ソーシャルメディアでコンテンツを共有したりするためにも使用できます。
さらに重要なことに、Jetpackには、投稿とページの両方でフルスクリーンのカルーセルギャラリーを表示できる機能があります。この機能はブロックエディター（Gutenbergエディター）で完全に機能するため、カルーセルを投稿やページに直接簡単に追加できます。
Jetpackの無料WordPress画像カルーセル機能の使用方法については、読み続けてください。
ステップ1：Jetpackプラグインをインストールして有効化する
最初のステップは、Jetpackをインストールしてアクティブ化することです。これを行うには、WordPress管理エリアに移動し、プラグイン » 新規追加をクリックします。
そこから、Jetpackプラグインが表示されるまで下にスクロールし、インストール、次に有効化をクリックします。
ステップ2：フルスクリーンカルーセルギャラリーを有効にする
次のステップは、左側のナビゲーションパネルからJetpack » 設定に移動し、作成タブをクリックすることです。
次の画面の上部には、メディアパネルが表示されます。この領域で、画像をフルスクリーンカルーセルギャラリーに表示トグルをオンの位置にクリックします。
また、次のことも選択できます。
- カルーセルに写真のExifメタデータを表示する
- カルーセルにコメント領域を表示する
白または黒の配色を選択します。
続行する前に、必ず変更を保存ボタンをクリックしてください。
ステップ3：WordPressの投稿またはページにスライドショーを追加する
これで、WordPressの投稿またはページに画像カルーセルを無料で簡単に作成できるようになりました。
WordPressの投稿にカルーセルを簡単に追加するには、新しい投稿を作成するか、既存の投稿を編集します。次に、ブロックエディター内のプラスアイコンをクリックして新しいWordPressブロックを追加し、スライドショーブロックをクリックして投稿に追加します。
次に、アップロードボタンをクリックしてコンピューターからギャラリーに画像をアップロードを開始するか、メディアライブラリボタンをクリックしてWordPressメディアライブラリに既にある画像を挿入します。
次に、追加したい画像を選択し、新規ギャラリーを作成ボタンをクリックします。
次の画面で、各画像が何であるかを説明するキャプションを写真に追加できます。次に、ギャラリーを挿入ボタンをクリックして投稿に追加します。
ステップ4：WordPress画像カルーセルを公開する
これで、WordPressの投稿に画像カルーセルのプレビューが表示されるはずです。写真間を移動するための矢印と、ギャラリー内の画像の数を示すページネーションドットが表示されます。
右側のスライドショー設定パネルでは、トランジション効果で視聴者を魅了できます。さまざまなアニメーションにより、画像をスライドまたはフェードさせることができ、訪問者を引き付けるダイナミックなビジュアルエクスペリエンスを作成できます。
画像サイズを変更したり、スライドを自動再生したり、トランジションを遅延させたりすることもできます。
画像カルーセルの見た目に満足したら、公開または更新ボタンをクリックします。これで、投稿をプレビューして、画像カルーセルギャラリーが機能していることを確認できます。
WooCommerce製品画像カルーセルを作成する方法
WooCommerceを使用するオンラインストアをお持ちの場合は、製品写真を魅力的な画像スライダーで簡単に表示できます。このために、無料のProduct Gallery Slider WordPressプラグインを使用します。
プラグインをインストールして有効化した後、WordPressダッシュボードからCodeixer » Product Galleryに移動します。ここで、スライダーの種類、寸法、ナビゲーションオプション、スタイリングなどを選択できます。
次に、画像カルーセルを追加したい製品ページに移動します。右側のサイドバーに、 Product Gallery という新しいパネルが表示されます。
ここで、製品カルーセルの画像を追加します。 画像を追加 をクリックしてメディアライブラリから画像を選択するか、コンピューターからドラッグアンドドロップします。
そこから、製品を更新すれば完了です。これで、ページを表示して、WooCommerceの画像カルーセルが機能していることを確認できます。
このプラグインは、WordPressの商品ページに画像スライダーを追加する最も簡単な方法の1つです。ライトボックス対応の完全な商品ギャラリーについては、WooCommerceの商品画像ギャラリーを作成するガイドをご覧ください。
WordPress画像カルーセルに関するその他の質問
プラグインなしでWordPressにカルーセルを追加するにはどうすればよいですか？
WordPressのネイティブギャラリーブロックを使用すると、複数の画像を1か所にまとめることができます。また、WordPressページにギャラリーを追加するガイドでその手順を説明しています。自動再生とナビゲーションコントロールを備えた完全なカルーセルについては、SeedProdの画像カルーセルブロックの方が適しており、個別のプラグインは不要です。
WordPressの画像スライダーとカルーセルの違いは何ですか？
スライダーは、全幅表示領域で一度に1つの画像を表示します。カルーセルは、ユーザーがスクロールできる複数の画像を横並びに表示します。スライダーは、ヒーローセクションや注力したいメッセージに適しています。カルーセルは、一度に複数のアイテムを表示したい商品ギャラリー、ポートフォリオ、コレクションに適しています。
WordPressの画像カルーセルに最適なサイズは？
最も一般的なサイズは1200x600ピクセルで、画質と読み込み速度のバランスが取れています。カルーセルがページ全体の幅に及ぶ場合は、最大1600ピクセルまで大きくしてください。カルーセル内のすべての画像の寸法を同じにして、ギャラリーを切り替えるときに画像がずれたり切り取られたりしないようにしてください。
SeedProdには無料のカルーセル機能がありますか？
SeedProdの画像カルーセルブロックは有料プランで利用できます。SeedProdの無料バージョンには画像カルーセルブロックは含まれていません。無料のオプションが必要な場合は、JetpackがWordPressの投稿やページに無料でカルーセル機能を追加します。
画像カルーセルがWordPressサイトを遅くする原因は何ですか？
最も一般的な原因は、画像サイズが大きすぎることです。カルーセルが800ピクセルで表示される場合に3000ピクセル幅の画像をアップロードすると、WordPressは必要以上のデータを読み込むことになります。カルーセルがないページでも、すべてのページでJavaScriptとCSSを読み込むカルーセルプラグインも、不要な負荷を追加します。SeedProdの画像カルーセルブロックは、使用されているページでのみ読み込まれます。
次へ：その他のWordPress画像ヒント
WordPressの画像カルーセルを作成するために、コードや開発者は必要ありません。SeedProdの画像カルーセルブロックを使用すれば、数分で完了します。
WordPressの画像を改善するために、以下のガイドも役立つかもしれません。
- WordPressにアイキャッチ画像を追加する方法
- WooCommerceで商品画像ギャラリーを作成する方法
- WordPressページにギャラリーを追加する方法
- WordPressにホットスポット画像を簡単に追加する方法
- WordPressで画像にテキストを追加する方法
- WordPressで画像用のライトボックスを作成する方法
- CSSなしでWordPressの背景画像を暗くする方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
