WordPressの画像カルーセルをウェブサイトに埋め込みたいですか？
WordPressを10年以上使ってきて、画像カルーセルはどんなウェブサイトでもエンゲージメントを高める視覚的に印象的な方法だとわかりました。しかし、WordPressのカルーセルプラグインは、初心者には使いやすく、パワフルなものがなかなか見つからない。
この記事では、WordPressウェブサイトに画像カルーセルを簡単に作成する方法を紹介します。必要に応じて、レスポンシブ画像カルーセル、シンプルなスライダー、または完全な製品ギャラリーの作り方をご覧いただけます。
クイックまとめ：WordPress画像カルーセルの作り方
- SeedProdの使用🧩 - 画像カルーセルブロックを使用して、任意のページにカルーセルを追加する
- Jetpackを試す📸 - 投稿とページでフルスクリーンギャラリーカルーセルを有効にする
- 商品カルーセルの追加WooCommerce の画像スライダーを作成する無料のプラグインを使用します。
WordPressカスタムページに画像カルーセルを作成する方法
SeedProdは、100万人以上のユーザーを持つ最高のWordPressウェブサイトビルダーです。WordPressカルーセルプラグインを内蔵しており、コードなしで簡単に画像スライダーを追加できます。そのドラッグアンドドロップページビルダーを使用すると、コーディングせずにあなたのサイトの任意のページに複数の画像カルーセルやスライダーを追加することができます。
また、SeedProdを使って次のようなこともできる：
- カスタムWordPressテーマの作成
- オプトインフォームでEメールリストを増やす
- グーグルマップで現在地を表示
- カウントダウン・タイマーを使って緊急性を高める
- ソーシャルメディアへの埋め込みでエンゲージメントを高める
- アニメーション見出しで注目を集める
- 動画埋め込みで訪問者を引き込む
- 証言で信頼と信用を築く
これを念頭に置いて、SeedProdを使ってウェブサイトに画像カルーセルを追加する方法を見てみましょう。
ステップ1: SeedProdプラグインのインストールと有効化
最初のステップは、SeedProdプラグインのコピーをダウンロードすることです。SeedProdには、シンプルなランディングページを作成するための無料版がありますが、高度な機能をすべて利用するためにPro版を使用します。
次に、WordPressウェブサイトにプラグインをアップロード、インストール、有効化します。この作業で助けが必要な場合は、WordPressプラグインのインストール方法をご覧ください。
プラグインを有効化した後、SeedProd " Settingsにアクセスして、SeedProdのライセンスキーを入力してください。ライセンスキーはSeedProdアカウントエリアのダウンロードセクションにあります。
ステップ2：WordPressランディングページの作成
次のステップは、SeedProd " Pagesに移動して新しいランディングページを作成することです。
このページの上部には、ワンクリックで起動できる4つの異なるページモードがあります：
- 近日公開-近日公開のページを有効にして、訪問者（とGoogle）に新しいウェブサイトを知らせましょう。
- メンテナンスモード- メンテナンスのために一時的に停止していることを訪問者に知らせます。
- ログイン- WordPressのカスタムログインページを有効にして作成します。
- 404- WordPressサイトのカスタム404エラーページを有効にします。
ページモードのセクションには、SeedProdプラグインで作成したランディングページが表示されます。WordPressのカスタムページは好きなだけ作ることができます。
新しいページを作成するには、 新しいランディングページを作成ボタンをクリックします。そうすることで、SeedProdのレスポンシブランディングページテンプレートのライブラリが表示されます。
好きなランディングページのデザインを選ぶことができますが、あなたのページをどのように見せたいかに近いテンプレートを選ぶことをお勧めします。そうすれば、あまり多くの変更を加える必要はありません。
この投稿では、画面上部のウェビナー・タブをクリックすると表示されるトラベル・ウェビナー・ページのテンプレートを使用しました。
このテンプレートを選択するには、サムネイルの上にマウスを置き、オレンジ色のチェックマークをクリックしてください。
次に、ページ名を追加するポップアップが表示されます。ページ名はランディングページのデザインには表示されませんが、ページのURLを設定します。そのため、訪問者があなたのページを訪問したときに意味のある名前を選んでください。
保存してページの編集を開始する」ボタンをクリックします。
ステップ3：ランディングページのコンテンツをカスタマイズする
テンプレートを起動すると、SeedProdのページビルダー画面が表示されます。ドラッグ＆ドロップのインターフェイスで、テンプレートのあらゆる部分を編集できます。
左側のサイドバーには、ページにドラッグ＆ドロップできるブロックが豊富に揃っています。ブロックがページに表示されたら、そのブロックをクリックしてコンテンツ、テンプレート、高度なカスタマイズ設定を表示することができます。
例えば、ランディングページにロゴを追加したい場合は、左側のパネルから画像ブロックをドラッグしてページにドロップするだけです。
そこから、新しい画像をアップロードするか、WordPressのメディアライブラリからロゴを選ぶことができます。また、サイズや配置を調整したり、リンクを追加することもできます。
ページの色、フォント、背景をカスタマイズしたい場合も、同様に簡単です。ページビルダーの左下にある歯車のアイコンをクリックすると、グローバル設定パネルとカスタマイズオプションが表示されます。
フォント、色、または背景タブをクリックして、ランディングページをカスタマイズできます。例えば、「背景」タブをクリックすると、カスタム背景画像をアップロードしたり、グラデーションやカラーオーバーレイを変更することができます。
また、ビデオ背景や背景スライドショーを使用するオプションもあります。
ステップ4：WordPress画像カルーセルブロックを追加する
しかし、あなたがここにいる理由は、あなたのページにカルーセルを簡単に追加するためです。これを行うには、SeedProdの画像カルーセルブロックを使用することができます。
この例では、メインのヒーロー画像をスライド式のカルーセルに置き換えます。まず、既存の画像にカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。
次に、Advanced BlocksパネルからImage Carouselブロックを選択し、ページにドラッグします。
ページ上のブロックをクリックすると、カルーセルの設定が表示されます。例えば、「画像1 」のセクションをクリックすると、コンピューターやメディア・ライブラリから自分の画像を使用するか、ロイヤリティ・フリーのストック画像を選択するオプションが表示されます。
画像カルーセルのカスタマイズ
カルーセルに画像を追加した後、画像のキャプションを入力し、画像の追加ボタンをクリックすると、カルーセルスライダーにさらに写真を挿入することができます。
カルーセルがどんなデバイスでも美しく見えるように、SeedProdはデスクトップ、タブレット、スマートフォン用に画像を自動的に調整します。
カルーセル設定パネルでは、画像スライダーをさらに調整することができます。例えば
それでも足りない場合は、「テンプレート」タブをクリックすると、少ないクリック数でギャラリー画像のスタイルを変更することができます。例えば、私は画像のドロップシャドウがあるスタイルを選択しました。
詳細設定タブでは、キャプションのタイポグラフィ、ボーダー、スペーシングをカスタマイズし、あなたのブランドに合った色やスタイルを選ぶことができます。
ランディングページのカルーセルの外観に満足したら、画面右上の緑色の保存ボタンをクリックします。
ステップ5：ランディングページの設定
ランディングページのデザインが完成したら、いくつかの設定を行います。
まず、画面上部の「接続」タブをクリックし、お気に入りのメールマーケティングサービスに接続します。これは、新しいリードが自動的にメールリストに追加されるようにする優れた方法です。
SeedProdは、以下のような主要なメールマーケティングプロバイダーと統合しています：
- メーラーライト
- センディ
- コンスタント・コンタクト
- GetResponse
- マッド・ミミ
- さらに
Eメールリストとの接続については、Eメール統合のドキュメントをご覧ください。
次に、ページ設定タブをクリックすると、SeedProdで設定できるその他の設定が表示されます。設定ページには通常5つのセクションがありますが、これは構築するページのタイプやSeedProdのプランによって異なります。
例えば、一般設定を編集し、ページに新しい名前とURLをつけたり、下書きや公開に設定することができます。
また、Google Analyticsプラグインや WordPress SEOプラグインを接続して、ページのパフォーマンスを追跡し、改善することもできる。
また、スクリプトエリアでは、クッキーやトラッキングピクセルなどのカスタムスクリプトやコードスニペットを追加することができます。
最後に、カスタムドメインセクションでは、WordPressをインストールすることなく、あなたのページを好きなドメイン名に接続することができます。
ページ設定が完了したら、忘れずに「保存」ボタンをクリックしてください。
ステップ6：画像カルーセルページの公開
ランディングページを公開する前に、モバイルでプレビューし、モバイルユーザーにとって見やすいデザインであることを確認しましょう。そうしないと、ユーザーエクスペリエンスが損なわれる可能性があります。
ページのプレビューを見るには、画面下のモバイルプレビューアイコンをクリックしてください。
そして、モバイルデバイスから閲覧している人に見えるようにページを表示し、ビジュアルエディターで変更を加えることができます。
また、タイポグラフィ設定により、どのブロックでもデスクトップとモバイルのテキスト要素を素早く行き来できます。これにより、ビューモードを切り替えることなく、モバイルページまたはデスクトップページのいずれかに変更を加えることができます。
モバイル版とデスクトップ版の両方のランディングページに満足したら、緑色の保存ボタンのドロップダウン矢印をクリックし、公開を選択します。
次に、次の画面で「ライブページを見る」ボタンをクリックして、ランディングページをプレビューすることができます。
テストサイトでの画像カルーセルの様子です：
あなたのページは、一度に複数の画像を表示するための完全に応答WordPressの画像カルーセルを完了し、ライブです。
WordPressの投稿に画像カルーセルを追加する方法
Jetpackは使いやすく、WordPressの投稿やページに画像スライダーが内蔵されているので、初心者の方によくおすすめしています。
Jetpackは、WordPressサイトに便利な機能を追加する無料のプラグインです。
例えば、サイトのセキュリティ問題をスキャンし、ボットやハッカーからブルートフォースで保護することができます。また、画像の遅延読み込みやソーシャルメディアでのコンテンツ共有などにも利用できます。
さらに重要なことに、Jetpackには 投稿とページの両方でフルスクリーンのカルーセルギャラリーを表示できる機能がある。この機能はブロックエディタ（Gutenbergエディタ）と完璧に連動し、投稿やページに直接カルーセルを簡単に追加できる。
Jetpackの無料WordPress画像カルーセル機能の使い方はこちらをご覧ください。
ステップ1: Jetpackプラグインのインストールと有効化
最初のステップは、Jetpackをインストールして有効化することです。これを行うには、WordPressの管理エリアに移動し、[プラグイン " 新規追加]をクリックします。
そこから、Jetpackプラグインが表示されるまで下にスクロールし、「今すぐインストール」をクリックし、次に「有効化」をクリックします。
ステップ 2: フルスクリーンカルーセルギャラリーを有効にする
次のステップは、左側のナビゲーションパネルからJetpack " 設定に移動し、書き込みタブをクリックします。
次の画面の上部に、メディアパネルが表示されます。このエリアで、Display images in a full-screen carousel galleryのトグルをクリックしてオンの位置にします。
を選択することもできる：
- カルーセルに写真のExifメタデータを表示する
- カルーセルにコメントエリアを表示する
そして白か黒の配色を選ぶ。
次に進む前に、必ず「変更を保存」ボタンをクリックしてください。
ステップ3：WordPressの投稿やページにスライドショーを追加する
これで、WordPressの投稿やページに画像カルーセルを無料で作成する準備が整いました。
WordPressの投稿にカルーセルを簡単に追加するには、新しい投稿を作成するか、既存の投稿を編集します。ブロックエディター内のプラスアイコンをクリックして新しいWordPressブロックを追加し、スライドショーブロックをクリックして投稿に追加します。
次に、アップロードボタンをクリックして、コンピュータからギャラリーへの画像のアップロードを開始することができます。または、メディアライブラリボタンをクリックして、すでにWordPressのメディアライブラリにある画像を挿入することもできます。
ここで、追加したい画像を選択し、「新しいギャラリーを作成」ボタンをクリックします。
次の画面では、写真にキャプションを追加して、各画像の内容を説明することができます。そして、ギャラリーを挿入ボタンをクリックするだけで、投稿に追加されます。
ステップ4：WordPressの画像カルーセルを公開する
これで、WordPressの投稿に画像カルーセルのプレビューが表示されるはずです。写真間を移動できる矢印と、ギャラリー内の画像数を示すページネーションのドットが表示されます。
右側のスライドショー設定パネルでは、トランジション効果で視聴者を魅了することができます。様々なアニメーションで画像間をスライドさせたり、フェードさせたりすることができ、訪問者を魅了するダイナミックなビジュアル体験を作り出します。
また、画像サイズの変更、スライドの自動再生、トランジションの遅延も可能です。
画像カルーセルの見た目に満足したら、「公開」または「更新」ボタンをクリックします。これで、投稿をプレビューして画像カルーセルギャラリーの動作を確認することができます。
WooCommerce商品画像カルーセルの作り方
WooCommerceを使用しているオンラインショップをお持ちの場合、商品写真を魅力的な画像スライダーで簡単に表示することができます。これには、無料のProduct Gallery Slider WordPressプラグインを使います。
プラグインをインストールし有効化したら、WordPressダッシュボードからCodeixer " Product Galleryに移動します。ここでは、スライダーのタイプ、サイズ、ナビゲーションオプション、スタイルなどを選択することができます。
次に、画像カルーセルを追加したい商品ページに移動します。右側のサイドバーに、Product Galleryという新しいパネルが表示されます。
ここでは、商品カルーセルの画像を追加します。画像を追加]をクリックして、メディアライブラリから画像を選択するか、コンピュータから画像をドラッグ＆ドロップしてください。
そこから商品を更新してください。これでページが表示され、WooCommerceの画像カルーセルが動作しているのを見ることができます。
このプラグインは、WordPressの商品ページに画像スライダーを追加する最も簡単な方法の一つです。
WordPressの画像カルーセルに関するその他の質問
次に、WordPressの画像に関するヒント
この記事が、WordPressで画像カルーセルを作成する方法を学ぶのに役立てば幸いです。
SeedProdを使ったWordPressページの作成とカスタマイズはとても簡単です。コードは一切不要で、開発者を雇う必要もなく、トラフィックをリードや販売に変換することに焦点を当てたランディングページが出来上がります。
それで、何を待っているんだい？
WordPressの画像を改善するための以下のガイドもお勧めです：
- WordPressに注目画像を追加する方法
- WooCommerceで商品画像ギャラリーを作成する方法
- WordPressのページにギャラリーを追加する方法
- WordPressにホットスポット画像を追加する方法
- WordPressで画像にテキストを追加する方法
- WordPressで画像用のライトボックスを作成する方法
- CSSを使わずにWordPressの背景画像を薄暗くする方法
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
