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

ウェブサイトにアクセスした際に、ホームページの美しいスライディングギャラリーに感銘を受けたことはありませんか？それはあなたの最高のコンテンツを掲載するのに最適な方法ですが、あらゆるデバイスで見栄えを良くするのは大変な作業です。

スライダーがコンピューターでは完璧に見えるのに、スマートフォンではぎこちなかったり壊れていたりすると、どれほどイライラするかはわかっています。モバイルでのエクスペリエンスが悪いと、訪問者を簡単に遠ざけてしまいます。

多くのツールを自身のサイトでテストした結果、どこでも完璧に機能するスライダーを作成するための最も簡単な方法を見つけました。訪問者の注意を引くスライダーを作成するためにコーディングスキルは必要ありません。

この記事では、WordPressウェブサイトにレスポンシブスライダーを追加するための簡単な方法をいくつかご紹介します。

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

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

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

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

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

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

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

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

• 方法1. プラグインを使用してレスポンシブWordPressスライダーを作成する（迅速かつ簡単）
• 方法2：ページビルダーを使用してレスポンシブスライダーを作成する（よりカスタマイズ可能）
• 方法3. Smash Balloonを使用してスライダーを作成する（ソーシャル投稿やレビューに最適）
• レスポンシブスライダーに関するよくある質問
• 追加リソース

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

デスクトップとモバイルの両方で見た目が良いシンプルなスライダーを作成したい場合は、Soliloquy プラグインの使用をお勧めします。

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

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

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

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

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

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

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

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

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

動画を含めたい場合は、YouTubeやVimeoなどの動画ホスティングサイトにアップロードすることをお勧めします。WordPressに直接動画をアップロードするのは、ウェブサイトの速度を低下させ、多くのストレージを消費する可能性があるため、お勧めできません。

一方、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のコンテンツを埋め込むことができるプラグインがあります。

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

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

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

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

その他のオプションとして、自身のソーシャルメディアアカウントからコンテンツを表示する方法があります。

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

フォロワーを増やすために、Smash Balloonには、スライダーに追加できる、すぐに使える行動喚起ボタンが用意されています。

WordPressにソーシャルメディアフィードを追加する方法（ステップバイステップ）については、WordPressにソーシャルメディアフィードを追加する方法、およびGoogle、Facebook、YelpのレビューをWordPressに表示する方法については、Google、Facebook、YelpのレビューをWordPressに表示する方法をご覧ください。

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

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

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

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

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

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

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

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

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

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

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

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

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

追加リソース

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。