WordPressでレスポンシブスライダーを簡単に作成する方法

スライダーは、優れたコンテンツを紹介するための一般的な方法ですが、すべてのデバイスで見栄えを良くするのは難しいことがよくあります。デスクトップでうまく表示されるスライダーは、モバイル画面では完全に壊れたり、タッチジェスチャーに反応しなかったりして、訪問者を遠ざけてしまいます。

WPBeginnerでは、さまざまな画面サイズを正しく処理できるスライダープラグインを数多くテストしてきました。機能、パフォーマンス、モバイル応答性の適切なバランスを提供する特定のツールを見つけました。

このガイドでは、WordPressでレスポンシブスライダーを作成し、すべてのデバイスで完全に機能させるための最も簡単な方法を共有します。

ウェブサイトにレスポンシブWordPressスライダーを追加する理由

コンテンツスライダーまたはスライドショーは、最も人気のあるWooCommerce製品、最新のYouTube動画、顧客レビューなどを強調するのに最適な方法です。

一部のスライダーは自動再生されるため、スライドが自動的に移動します。これにより、限られたスペースに多くの情報を表示でき、他のコンテンツのための十分なスペースが確保されます。

素晴らしいスライダーの鍵は、高品質でありながら最適化された画像をうまく使用することであることを忘れないでください。これにより、ウェブサイトを遅くすることなく、スライダーをシャープに見せることができます。👍

このため、多くのウェブサイトでは、ランディングページ、ホームページ、または販売ページなどの最も重要なページにスライダーを使用しています。

スライダーが自動再生に設定されていても、通常はナビゲーションボタンを使用して訪問者が手動でスライドを移動できます。このように、スライダーは訪問者にサイトとの対話を促し、より魅力的なものにします。

下のGIFで、動画スライダーがページをどれだけダイナミックにできるかを確認できます。

それでは、WordPressでレスポンシブスライダーを簡単に作成する方法を見てみましょう。下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

方法1. プラグインを使用してレスポンシブWordPressスライダーを作成する（迅速かつ簡単）

デスクトップとモバイルでうまく表示されるシンプルなスライダーを作成したい場合は、Soliloquyプラグインの使用をお勧めします。

このWordPressスライダープラグインを使用すると、メディアライブラリの画像を使用してスライドを作成でき、YouTubeのようなサードパーティプラットフォームでホストされている動画を表示することもできます。

SEOフレンドリーなコンテンツを作成するのに役立つ、各スライドに代替テキストとキャプションを追加することもできます。

まず、Soliloquyアカウントにサインアップする必要があります。その後、ウェブサイトにSoliloquyプラグインをインストールして有効化できます。詳細については、WordPressプラグインのインストール方法に関するガイドに従ってください。

有効化したら、WordPressダッシュボードのSoliloquy » 設定に移動し、ライセンスキーを入力してください。

キーは、Soliloquyのウェブサイトでアカウントにログインすることで見つけることができます。この情報を入力したら、「キーを検証」ボタンをクリックします。

次に、動画やモバイル固有の機能を使用したい場合は、それらのアドオンを有効にする必要があります。単に Soliloquy » Addons に移動し、「Video」と「Mobile」のアドオンをインストールしてください。

これが完了したら、Soliloquy » Add Newに移動して、WordPressウェブサイトに新しいスライダーを追加できます。

タイトルを入力することから始めることができます。これは参照用ですので、WordPressダッシュボードでスライダーを識別するのに役立つものであれば何でも使用できます。

次に、スライダーに画像や動画を追加します。ファイルをエディタにドラッグアンドドロップするか、「他のソースからファイルを選択」をクリックします。

画像を使用したい場合は、WordPressブロックエディタに画像を追加するのと同じ方法でファイルをアップロードできます。

動画を含めたい場合は、YouTubeやVimeoのような動画ホスティングサイトにアップロードすることをお勧めします。動画を直接ウェブサイトにアップロードすると、サーバー帯域幅を消費し、バックアップサイズが増加する可能性があるため、お勧めしません。

一方、YouTube のようなプラットフォームは動画用に最適化されているため、ウェブサイトに悪影響を与えることなく、スライダーで高解像度の動画を表示できます。

動画ホスティングプラットフォームを選択した後、WordPressスライダーに含めたいすべての動画をアップロードする必要があります。動画のアップロード方法がわからない場合は、選択した動画プラットフォームの公式ドキュメントまたはユーザーマニュアルを読むことをお勧めします。

これが完了したら、「他のソースからファイルを選択」ボタンをクリックし、「ビデオスライドを挿入」を選択してください。

これで、動画のURLを「Video URL」フィールドに貼り付けることができます。

Soliloquyは、サポートされているすべてのリンク形式を右側に表示するため、リンクがこれらの形式のいずれかを使用していることを確認してください。

それが完了したら、「タイトル」フィールドにタイトルを入力できます。これは参照用ですので、好きなものを何でも使用できます。代替テキストを追加することもできます。これは、検索エンジンがこのスライドの内容を理解するのに役立ちます。

その後、「キャプション」フィールドにオプションのキャプションを入力できます。これは、訪問者が「再生」を押す前に、動画の下部に表示される灰色のバーに表示されます。

このバーを表示したくない場合は、「キャプション」フィールドを空のままにします。

入力した情報に満足したら、「別の動画スライドを追加」をクリックして、さらにスライドを作成できます。

この新しいスライドを設定するには、上記と同じ手順に従ってください。

すべてのスライドを作成したら、「スライダーに挿入」をクリックしてください。

これで、「現在スライダー内」セクションにすべてのスライドが表示されます。

次に、「設定」タブをクリックして、スライダー設定を使用してカスタマイズできます。たとえば、新しいスライダーテーマを選択したり、画像サイズを変更したり、スライダーとキャプションの位置を変更したりできます。

スライダーの矢印や再生/一時停止ボタンをカスタマイズしたり、トランジション速度を調整したり、遅延時間を変更したりすることもできます。

次に、スライダーがコンピューターやラップトップと同じくらいモバイルデバイスでも見栄えが良いことを確認する必要があります。

それを踏まえて、「モバイル」タブをクリックし、「モバイル スライダー画像を作成」の横にあるボックスをチェックします。

次に、モバイルデバイスの画像と動画に使用したいサイズを入力できます。これらの決定を下す際には、デスクトップでWordPressサイトのモバイルバージョンを表示すると役立つ場合があります。

デフォルトでは、Soliloquyはモバイルユーザーのキャプションを非表示にします。これは、スマートフォンやタブレットで一般的に使用される小さな画面にスライドがより快適に収まるようにするためです。

そのため、この設定は無効のままにすることをお勧めしますが、好みに応じて「モバイルでキャプションを表示」の横にあるチェックボックスをオンにすることができます。

これが完了したら、「その他」タブをクリックします。ここでは、スライダーにカスタムCSSを追加したり、スライダーのタイトルとスラッグを編集したり、スライダーをエクスポートしたりできます。

スライダーの設定に満足したら、「公開」ボタンをクリックします。

Soliloquyは、任意のページ、投稿、またはウィジェット対応領域に追加できるショートコードを自動的に作成します。

ショートコードの配置方法の詳細については、WordPressにショートコードを追加する方法に関するガイドをご覧ください。

上級ユーザーの場合、SoliloquyはWordPressテーマファイルに直接追加できるコードスニペットも提供します。この方法はより正確な制御を提供しますが、コードの編集に慣れている場合にのみ推奨されます。ほとんどのユーザーにとっては、ブロックまたはショートコードを使用するのが最も簡単で安全な方法です！

ステップバイステップの説明については、WordPressにカスタムコードを簡単に追加する方法に関するガイドを参照してください。

スライダーをサイトに追加する最も簡単な方法は、GutenbergエディターのSoliloquyブロックを使用することです。スライダーを表示したいページまたは投稿に移動し、「+」ボタンをクリックするだけです。

表示されるポップアップで、「Soliloquy」と入力します。

右側のブロックが表示されたら、クリックしてWordPressのブログやウェブサイトに追加します。

その後、Soliloquy ブロックを開き、作成したばかりのスライダーを選択します。

これで、「Update」または「Publish」ボタンをクリックしてスライダーを公開できます。

方法2：ページビルダーを使用してレスポンシブスライダーを作成する（よりカスタマイズ可能）

シンプルな動画または画像スライダーを作成したい場合は、Soliloquyのようなプラグインが最適です。ただし、ランディングページやホームページのような完全にカスタムなページデザインにスライダーをシームレスに統合したい場合は、代わりにページビルダープラグインを使用することをお勧めします。

SeedProdは、最高のドラッグアンドドロップWordPressページビルダーです。コードを一行も書かずに、カスタムランディングページをデザインしたり、カスタムWordPressテーマを作成したりできます。

また、見事なスライダーを作成するために使用できる画像カルーセルブロックもあります。

このすぐに使えるブロックをページ上のどこにでもドロップし、強力なドラッグ＆ドロップエディターを使用してカスタマイズできます。

まず、SeedProdプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインを有効化すると、SeedProdはライセンスキーを要求します。

このライセンスキーは、SeedProdウェブサイトのアカウントの下で見つけることができます。情報を入力したら、「キーを検証」ボタンをクリックしてください。

これが完了したら、WordPress ダッシュボードで SeedProd » ランディングページ に移動します。

1. ページテンプレートを選択する

SeedProdには、カテゴリ別にグループ化された180以上のプロフェッショナルにデザインされたテンプレートが付属しています。上部には、美しい近日公開ページを作成したり、メンテナンスモードを有効にしたり、WordPress用のカスタムログインページを作成したりできるカテゴリが表示されます。

SeedProdのすべてのテンプレートはカスタマイズが簡単なので、好きなデザインを使用できます。気に入ったテンプレートを見つけたら、マウスカーソルを合わせ、チェックマークアイコンをクリックするだけです。

これで、「ページ名」フィールドにランディングページの Свое имя を入力できるようになりました。SeedProd は、ページ名を使用して自動的に「ページ URL」を作成します。

可能な限り、このURLに関連キーワードを含めるのは賢明です。これにより、検索エンジンがページの内容を理解するのに役立ちます。これにより、WordPress SEOが向上することがよくあります。

ページの自動生成URLを変更するには、「ページURL」フィールドに入力するだけです。

入力した情報に満足したら、「保存してページの編集を開始」をクリックします。これにより、SeedProd のページビルダーインターフェイスが読み込まれます。

2. ページレイアウトのカスタマイズ

SeedProd のドラッグ＆ドロップビルダーは、ページデザインのライブプレビューを右側に表示します。左側には、ページに追加できるさまざまなブロックやセクションのメニューがあります。

追加したいブロックを見つけたら、テンプレートにドラッグアンドドロップするだけです。

ブロックをカスタマイズするには、SeedProd エディタでそのブロックをクリックして選択するだけです。左側のメニューが更新され、カスタマイズに使用できるすべての設定が表示されます。

ページを構築する際、ブロックをドラッグアンドドロップしてレイアウト内を移動できます。詳細な手順については、WordPressでランディングページを作成する方法に関するガイドをご覧ください。

3. レスポンシブスライダーの追加とデザイン

SeedProdでレスポンシブスライダーを作成するには、左側のメニューにある画像カルーセルブロックを見つけて、レイアウトにドラッグ＆ドロップするだけです。

次に、ページエディターで画像カルーセルブロックをクリックして選択します。

これで、スライダーに表示したいすべての画像を追加できます。開始するには、SeedProdがデフォルトで作成する「画像1」項目をクリックしてください。

SeedProd の組み込みライブラリから写真を使用するか、「独自の画像を使用」をクリックして WordPress メディアライブラリからファイルを選択できます。

画像を選択した後、その画像の下に表示されるキャプションを追加できます。SeedProdはデフォルトではキャプションを表示しませんが、この投稿の後半で有効にする方法を説明します。

「リンク」フィールドに画像へのリンクを追加することもできます。これは、スライドをクリックしたときに訪問者を特定の製品またはランディングページに送信したい場合に最適です。

スライドの設定が完了したら、「画像の追加」ボタンをクリックして別のスライドを作成します。

スライドをさらに追加するには、上記と同じ手順に従ってください。

スライダーにすべての画像を追加したら、スライダーの外観と動作をカスタマイズする時間です。

左側のメニューで、「カルーセル設定」セクションをクリックして展開します。

開始するには、スライダーのナビゲーションボタンのライトモードとダークモードを切り替えることができます。

これらの異なるモードを試すには、「Navigation Color Mode」の隣にあるボタンをクリックします。ライブプレビューは自動的に更新されるため、どのモードが最適かを確認できます。

デフォルトでは、カルーセルは1つのスライドを表示し、訪問者はナビゲーションコントロールを使用して他のコンテンツを表示する必要があります。

ただし、「表示するスライド」ドロップダウンを開き、リストから番号を選択することで、一度に複数のスライドを表示したい場合があります。スライダーにコンテンツが多く、訪問者がすべてのスライドをクリックしないのではないかと心配している場合に役立ちます。

デフォルトでは、訪問者は次のスライドを表示するためにクリックする必要があります。それを念頭に置いて、自動再生を有効にすることを検討してください。これは、訪問者が見るスライドの数を増やすことがよくあります。

これを行うには、「自動再生」スイッチをクリックして有効にし、各スライドが画面に表示される時間を「自動再生速度」に数値を入力して指定します。

画像にキャプションを追加した場合は、「キャプションを表示」スライダーを「いいえ」から「はい」に切り替えることを確認してください。

キャプションの配置を変更することもできます。

背景色によっては、訪問者に表示される前にキャプションの色を変更する必要がある場合があります。

これを行うには、「高度な設定」タブをクリックし、「キャプションの色」設定を使用します。

「Caption Typography」の隣にある「Edit」ボタンをクリックすると、テキストをさらにスタイル設定できます。

これにより、フォントサイズ、行の高さ、間隔などを変更できる設定が追加されます。

キャプションの外観に満足したら、「スライダー画像スタイル」ドロップダウンを使用して、スライドに異なるボックスシャドウを追加できます。

これらの影はスライドを際立たせることができるので、さまざまな影を試して、ページデザインに合うかどうかを確認する価値があります。

「高度な設定」タブには、境界線を追加したり、間隔を変更したり、さらにはアニメーションを表示したりできる設定もあります。

これらの高度な設定を自由に探索して、作成できるさまざまな効果を確認してください。たとえば、境界線を追加してスライダーを目立たせたり、アニメーションを使用して訪問者の目を引くことができます。✨

4. ランディングページを公開する

スライダーの外観に満足したら、ページの残りの作業を続けることができます。ブロックをデザインにドラッグし、左側のメニューの設定を使用してカスタマイズしてください。

ブロックを削除したい場合は、ブロックにカーソルを合わせると表示されるゴミ箱アイコンをクリックしてください。

確認を求められたら、「はい、削除します」をクリックしてください。

ページの見た目に満足したら、「保存」ボタンをクリックして公開します。最後に、「公開」を選択してスライダーを公開します。

方法3. Smash Balloonを使用してスライダーを作成する（ソーシャル投稿やレビューに最適）

他の人が購入、使用、または推奨しているものを見る傾向があります。そのため、ウェブサイトに ソーシャルプルーフ を表示することは良い考えです。これには、顧客レビュー、お客様の声、ソーシャルメディアでの肯定的なコメントなどが含まれます。

サイトにソーシャルプルーフを表示する最も簡単な方法は、Smash Balloonを使用することです。Smash Balloonには、Instagram、Facebook、Twitter、YouTubeのコンテンツを埋め込むことができるプラグインがあります。

また、Facebook、Tripadvisor、Yelp、Trustpilot、WordPress.org、Googleからのレビューを表示するために使用できるレビューフィードプラグインもあります。

ただし、オンラインストアやウェブサイトに多くの肯定的なコメントやレビューを表示すると、多くのスペースを占める可能性があります。

そのため、Smash Balloonには、レスポンシブスライダーの作成に使用できるカルーセルレイアウトとテンプレートが組み込まれています。これにより、数回クリックするだけでソーシャルメディアやレビューのスライドショーを作成できます。

さらに良いことに、Smash Balloonは新しいコンテンツを自動的に取得するため、スライダーには常に最新の投稿が表示されます。

別の選択肢は、自身のソーシャルメディアアカウントからのコンテンツを表示することです。

訪問者が気に入れば、ソーシャルメディアでフォローしてくれるかもしれません。

より多くのフォロワーを獲得するために、Smash Balloonには、スライダーに追加できる既製の行動喚起ボタンが用意されています。

詳細な手順については、WordPressにソーシャルメディアフィードを追加する方法、およびWordPressでGoogle、Facebook、Yelpのレビューを表示する方法に関するガイドをご覧ください。

レスポンシブスライダーに関するよくある質問

私たちのチームは、WordPressでスライダーを使用することについて多くの質問を受けます。以下は、読者からよく寄せられる質問への回答です。

レスポンシブWordPressスライダーとは何ですか？

レスポンシブスライダーは、デスクトップ、タブレット、スマートフォンなど、あらゆる画面にフィットするようにサイズとレイアウトを自動的に調整するスライドショーコンポーネントです。これにより、見た目が良く、使いやすくなります。

スライダーはSEOに悪いですか？

コーディングが不十分なスライダーはサイトの速度を低下させ、SEOに悪影響を与える可能性がありますが、最新のプラグインはパフォーマンスを考慮して構築されています。例えば、Soliloquyのようなプラグインは、遅延読み込みと適切なHTML構造を使用してSEOフレンドリーです。

スライド画像に説明的な代替テキストを追加することも重要です。これは、検索エンジンがコンテンツを理解するのに役立ちます。

スライダーはウェブサイトを遅くしますか？

スライダーに大きくて最適化されていない画像ファイルが含まれている場合、ページの読み込み時間に影響を与える可能性があります。ただし、最高のWordPressスライダープラグインは軽量で速度が最適化されています。

スライダーがサイトの速度を低下させないようにするために、WordPressにアップロードする前に画像を圧縮することをお勧めします。これにより、品質を損なうことなくファイルサイズが縮小されます。

WordPressに最適なレスポンシブスライダープラグインは何ですか？

最適なプラグインは、お客様の特定のニーズによって異なります。Soliloquyは、使いやすさと高速なパフォーマンスから、全体として最良の選択肢としてお勧めします。

カスタムページレイアウトを作成したい場合は、SeedProdの画像カルーセルブロックはより多くのデザインの柔軟性を提供します。ソーシャルメディアフィードや顧客レビューをスライダーで表示するには、Smash Balloonが最適なツールです。

追加リソース

この記事が、WordPressでレスポンシブスライダーを簡単に作成する方法を学ぶのに役立ったことを願っています。当サイトの他のガイドも参照してください。

• WordPress向けの最高のPDFプラグイン（ビューア、埋め込み、＆amp;ダウンロード）
• ビデオと画像のWordPressスライダーを簡単に作成する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。