Instagramのフィードをカルーセル形式のスライドショーとして自動再生する

Instagramの投稿を静的なグリッドで表示するのは、サイドバーのウィジェットとしては問題ありませんが、ホームページのヒーローエリアや縦長のランディングページでは、ただそこに静止したままになりがちです。訪問者は1つのフレームを見て、すぐに次のページへ移ってしまいます。 カルーセルモードでは、フィードが自動回転するスライドショーに変わります。投稿が自動的に切り替わり、レイアウトが占める縦方向のスペースが大幅に削減されるため、訪問者はスクロールせずにアカウントのより多くのコンテンツを閲覧できます。Instagram Feed Proでは、この機能を「フィードレイアウト」セクションに組み込んでおり、回転間隔、ナビゲーション矢印、ページネーションドットを個別に制御できます。

このガイドでは、フィードをカルーセルレイアウトに変更し、自動ローテーションを有効にする手順について説明します。

この機能を利用するには、Instagram Feed Proが必要です。自動回転するカルーセルは有料版限定の機能です。無料版のInstagram Feedプラグインでは、フィードは静的なグリッド形式でのみ表示されます。


始める前に

カルーセルモードは、連携したアカウントに少なくとも5~10件の最近の投稿がある場合に最も見栄えが良くなります。投稿数が少ないと、カルーセルが同じ画像を素早く切り替えてしまうため、単調な印象を与えてしまいます。アカウントが新しく開設されたばかりの場合は、カスタマイズツールのプレビューで適切な切り替えが表示されるよう、先に数件投稿してから作業を進めてください。

また、スライドの切り替え速度も決めておく必要があります。デフォルトの間隔は1スライドあたり5秒で、これはほとんどのホームページでの用途に適しています。切り替えが速すぎるとごちゃごちゃした印象を与える可能性がありますが、訪問者が読みたいと思うコンテンツ(キャプションなど)の場合は、ゆっくりとした切り替えでも問題ありません。


ステップ1. 新しいフィードを作成する(または既存のフィードを開く)

まだ「ユーザータイムライン」フィードをお持ちでない場合は、作成してください。WordPressの管理画面サイドバーから、「Instagramフィード」→「すべてのフィード」をクリックし、右上の「新規追加」ボタンをクリックします。

Instagramのフィードをカルーセル形式のスライドショーとして自動再生する — ステップ1
「すべてのフィード」ダッシュボード。「新規追加」をクリックして新しいフィードを作成するか、既存のフィードを開いて編集してください

ステップ2. ユーザーのタイムラインフィードの種類を選択する

フィードタイプのピッカーで「ユーザータイムライン」を選択し、「次へ」をクリックします。次の画面で、ソースとして連携済みのInstagramアカウントを選択し、ウィザードの手順に従って進めると、カスタマイザーにフィードが表示されます。

Instagramのフィードをカルーセル形式のスライドショーとして自動再生する — ステップ2
フィードタイプの選択ツール「ユーザータイムライン」のカルーセルレイアウトは、どのユーザータイムラインフィードでも機能します

すでにフィードがある場合は、「すべてのフィード」ページでその名前をクリックすると、カスタマイザーで直接開くことができます。


ステップ3. 「フィードレイアウト」セクションを開く

フィードがカスタマイザーで開いたら、左側のサイドバーを確認してください。「フィードレイアウト」セクションには、グリッド、カルーセル、メイソンリー、ハイライトなどのレイアウト設定が含まれています。「フィードレイアウト」をクリックしてパネルを開いてください。

Instagramのフィードをカルーセル形式のスライドショーとして自動再生する — ステップ3
カスタマイズ画面のサイドバーにある「カルーセルモード」は、「フィードレイアウト」内にあります

ステップ4. 「カルーセル」に切り替えて、自動再生を有効にする

「フィードレイアウト」パネルの上部には、「グリッド」、「カルーセル」、「メイソンリー」、「ハイライト」の4つのレイアウトオプションが表示されます。「カルーセル」をクリックしてください。プレビューペインが更新され、投稿が1つまたは2つずつ順番に表示されるようになります。また、レイアウトピッカーの下に「カルーセル設定」グループが表示され、そこに「自動再生」の設定があります。

画面を下にスクロールして「自動再生を有効にする」のスイッチをオンにしてください。プレビュー画面では、投稿が「カルーセル設定」→「間隔時間」(デフォルトは5秒)で設定された間隔で自動的に切り替わります。

Instagramのフィードをカルーセル形式のスライドショーとして自動再生する — ステップ4
「カルーセル設定」内の「自動再生を有効にする」トグル。これをオンにすると、スライドショーが自動的に再生されます。

また、その際に「表示時間」(各スライドの表示時間)、「ループタイプ」(カルーセルを最初のスライドから再生し直すか、スムーズにスクロールするか)、「ナビゲーション矢印を表示/ページネーションを表示」(訪問者が矢印ボタンやドットインジケーターを使って手動でカルーセルを進められるようにするかどうか)も設定できます。

フィードを保存するには、 更新 カスタマイザーの右上にあるボタン。フィードが埋め込まれているすべてのページで、カルーセルが自動的に回転します。埋め込むには、Instagramフィードを使用することをお勧めします。 ブロック: クリック エンベッド、そして ページに追加 フィードがすでに挿入された状態でWordPressのブロックエディタを起動します。ショートコード(例: [instagram-feed feed=1])は、クラシックエディタやカスタムテーマテンプレートでも利用可能です。


モバイル端末では、カルーセルは自動的に回転しますか?

はい。自動再生はデスクトップとモバイルの両方で機能します。また、タッチデバイスでは、自動再生がオンになっている場合でも、カルーセルを手動でスワイプすることができます。

訪問者がカルーセルにカーソルを合わせると、自動再生は一時停止しますか?

はい。カーソルを合わせると一時停止するのがデフォルトの動作です。訪問者は、カルーセルが動いてしまうことなくキャプションを読むことができ、カーソルを離すと再び回転が再開されます。

フィードごとに異なる回転速度を設定することはできますか?

はい。各フィードには独自のカルーセル設定があるため、ヒーロー画像のカルーセルは3秒ごとに切り替わり、お客様の声のカルーセルは8秒ごとに切り替わります。

自動再生はSEOやアクセシビリティに影響しますか?

ホバー時に一時停止する自動回転カルーセルは、訪問者が手動でも操作できる場合にアクセシブルであるとみなされます。キーボードユーザー自身がカルーセルを進められるよう、「ナビゲーション矢印を表示」および/または「ページネーションを表示」を有効にしておいてください。

「カルーセルの設定」が表示されないのはなぜですか?

これは、「カルーセル」レイアウトオプションを選択した場合にのみ表示されます。「グリッド」、「メイソンリー」、または「ハイライト」が選択されている場合、「カルーセル設定」グループは適用対象外となるため、非表示のままになります。

サポート

ドキュメントに答えが見つからない?

サポート

この記事は役に立ちましたか?