レビューフィードの外観をカスタマイズする

レビューのフィードを、ウェブサイトの他の部分と同じデザインに合わせたいですか？

このガイドでは、フィードエディタの「カスタマイズ」タブについて、セクションごとに順を追って解説します。フィードのテンプレート、レイアウト、ヘッダー、レビュー、「さらに表示」ボタン、色を変更し、保存する前にプレビューで各変更内容を確認することができます。

作業を始める前に、WordPressサイトに「Reviews Feed」がインストールされ、有効化されていることを確認してください。

また、フィードも必要になります。まだフィードをお持ちでない場合は、レビューフィードの作成方法に関するガイドをご覧ください。このガイドは、前のガイドの「フィードのカスタマイズと保存」のステップの続きから始まります。

• フィードのテンプレートを変更する
• レイアウトの選択
  • 石積みのレイアウトを使う
  • カルーセルレイアウトの使用方法
• ヘッダーのカスタマイズ
  • 見出しの変更
  • ヘッダーボタンの設定
• レビューのカスタマイズ
  • 投稿スタイルの選択
  • レビュー要素の表示・非表示
• 「さらに読み込む」ボタンのカスタマイズ
• 変更の保存
• よくある質問

フィードのテンプレートを変更する

まず、このガイドで説明するすべての変更を行う「フィードエディタ」を開く必要があります。

WordPressの管理画面のサイドバーから、「レビューフィード」→「すべてのフィード」に移動します。次に、カスタマイズしたいフィードの名前をクリックします。

フィードは、フィードエディタの「カスタマイズ」タブで開きます。このタブには、次の順で5つのセクションがあります。「テンプレート」、「レイアウト」、「ヘッダー」、「レビュー」、「さらに読み込むボタン」です。

右側のプレビューは、変更を加えるたびに更新されます。そのため、保存する前にそれぞれの変更内容を確認することができます。

まずはフィードのテンプレートから始めましょう。次に、「テンプレート」をクリックしてください。

テンプレートとは、フィードのデザインをすぐに始められる既成のテンプレートです。「テンプレート」セクションには、現在フィードで使用されているテンプレートが表示されます。

別のものを選択するには、「変更」をクリックしてください。

「別のテンプレートを選択」ウィンドウが開き、7つのテンプレート（「デフォルト」、「シンプルカード」、「メイソンリー」、「単一レビュー」、「ショーケースカルーセル」、「カルーセル」、「グリッドカルーセル」）が表示されます。

新しいテンプレートを適用すると、レイアウト、ヘッダー、ボタンの設定が、そのテンプレートの設定に置き換えられます。そのため、他の設定をカスタマイズする前に、まずテンプレートを選択しておくのが最善です。

リストから、「Simple Cards」など、ご希望のテンプレートをクリックしてください。その後、「更新」をクリックしてください。

プレビューには、新しいテンプレートが適用されたフィードが表示されます。たとえば、「Simple Cards」では、各レビューが個別のカードとして表示されます。

セクションの一覧に戻るには、サイドバーの上部にある「カスタマイズ」をクリックしてください。

テンプレートの設定が完了しました。次に、レビューの表示方法を微調整していきます。

レイアウトの選択

レイアウトは、ページ上でレビューがどのように配置されるかを決定します。

[カスタマイズ] タブのセクション一覧から、[レイアウト] をクリックします。

「レイアウト」セクションの上部では、3つのレイアウトの中から1つを選択できます：

• リスト：レビューを1列に並べて、上下に表示します。
• Masonry：レビューを列ごとに表示し、各レビューの高さはそのテキストの高さだけになります。
• カルーセル：訪問者がスライダーを動かして閲覧できる形式で、レビューを表示します。

レイアウトの下には、各レイアウトごとにさらにいくつかのオプションがあります：

• 間隔：レビュー同士の間隔（ピクセル単位）。
• 表示するレビュー数：フィードに最初に表示されるレビューの数。デスクトップ、タブレット、スマートフォンごとに個別の数値を設定できます。
• コンテンツの長さ：フィードに表示される各レビューの本文の最大文字数です。それより長いレビューは「…」で切り詰められます。この数値が大きいほど、各レビューの表示範囲が広がります。

「Masonry」と「Carousel」には、それぞれ独自のオプションが用意されています。まずは「Masonry」から見ていきましょう。

石積みのレイアウトを使う

レビューを列ごとに表示するには、「Masonry」をクリックしてください。「Spacing」オプションに、列間の間隔を設定する「Horizontal」フィールドが追加されました。

また、「列数」オプションも表示され、デスクトップ、タブレット、スマートフォンでフィードを何列で表示するかを選択できます。

プレビュー画面では、レビューが列ごとに並んで表示されるようになりました。

レビューをスライダー形式で表示したい場合は、次に「カルーセル」レイアウトについて見ていきましょう。

カルーセルレイアウトの使用方法

レビューをスライダー形式で表示するには、「カルーセル」をクリックしてください。

「Carousel」レイアウトでは、3つのオプショングループが追加されます：

• カルーセルのブレークポイント：カルーセルでどの列を使用するかを決定する画面幅（ピクセル単位）です。デスクトップの幅を下回ると、デスクトップ用の列は適用されなくなります。タブレットの幅を下回ると、タブレット用の列は適用されなくなります。
• 列と行：デスクトップ、タブレット、スマートフォンでレビューが並べて表示される数、および各スライドに表示されるレビューの行数。
• ページネーション：スライダーの移動方法。ループタイプは、最後のスライドの後にどう動作するかを設定します。表示間隔は、各スライドの表示時間をミリ秒単位で設定します。下のチェックボックスでは、ナビゲーション用の矢印やドットの表示・非表示を切り替えたり、自動再生のオン・オフを設定したりできます。

プレビューでは、レビューがカルーセル形式で表示され、その下にはスライド間を移動するためのドットが表示されます。

レイアウトが決まりましたら、レビューの上にあるヘッダーをカスタマイズいたします。

ヘッダーのカスタマイズ

ヘッダーはレビューの上部に表示されます。

次に、「カスタマイズ」タブのセクション一覧に戻ります。その後、「ヘッダー」をクリックします。

「ヘッダー」セクションには、ヘッダー全体を表示または非表示にする「有効」スイッチがあります。その下には、ヘッダーを構成する3つの要素があります：

• 見出し：フィードの上部に表示されるタイトル。
• ボタン：訪問者にレビューを投稿するよう促すボタン。
• 平均レビュー評価：フィードに表示される総合評価で、星の数とレビュー数が併記されます。

各要素の横にあるチェックボックスをオンまたはオフにすると、ヘッダーにその要素を表示または非表示にできます。要素の名前をクリックすると、その要素の設定画面が開きます。

まずは見出しから始めましょう。

見出しの変更

フィードのタイトルを変更するには、「見出し」をクリックしてください。

デフォルトでは、見出しには「レビュー」と表示されます。

変更するには、[ ] に希望の見出しを入力してください。 目次 フィールド、例えば What Our Customers Say. プレビューでは、新しい見出しがすぐに表示されます。

「コンテンツ」フィールドの下では、見出しのフォントの太さ、サイズ、行間も変更できます。

色は、各セクション内で、変更対象となる要素の隣に設定されます。

見出しの色を変更するには、「色」セクションの「テキスト」の横にある色ボックスをクリックします。カラーピッカーで色を選択してください。また、「Hex」フィールドに16進数のコードを入力して、Enterキーを押すこともできます。

カラーピッカーの下部にある「リセット」ボタンを押すと、選択した色がクリアされます。

見出しの設定が完了しました。次に、ヘッダーボタンを設定します。

ヘッダーボタンの設定

ヘッダーにあるボタンは、訪問者にレビューを投稿するよう促すものです。

設定を行うには、サイドバー上部の「ヘッダー」リンクをクリックして、ヘッダーセクションに戻ってください。その後、「ボタン」をクリックしてください。

デフォルトでは、このボタンをクリックすると、訪問者があなたのフィードの最初のソースに対してレビューを投稿できるページに移動します。

訪問者を別の場所に誘導するには、[外部リンク] を選択してください。 リンク先 ドロップダウンメニュー。次に、その下の欄にウェブアドレスを入力してください。アドレスは、 https:// 冒頭で。

「ボタン」オプションでは、ボタンのフォントや色（訪問者がマウスオーバーした際に表示されるテキストの色や背景色など）も設定できます。

ヘッダーの準備は完了しました。次に、各レビューがどのように表示されるかを見ていきましょう。

レビューのカスタマイズ

「レビュー」セクションでは、フィードに表示されるすべてのレビューの表示形式を変更できます。

次に、「カスタマイズ」タブのセクション一覧に戻ります。その後、「レビュー」をクリックします。

「レビュー」セクションには、「投稿スタイル」と「個々の要素の編集」が一覧表示されています。まずは投稿スタイルから見ていきましょう。

投稿スタイルの選択

投稿スタイルによって、各レビューの周囲に枠が表示されます。

スタイルを選択するには、「投稿スタイル」をクリックしてください。

投稿スタイルは2種類あります。「Boxed」では、各レビューがボックス内に表示されます。「Regular」（デフォルト）では、レビュー同士が細い線で区切られます。

レビューを枠で囲むには、「Boxed」をクリックしてください。

「Boxed」スタイルでは、以下の設定も追加されます：

• 背景色：各レビューの背景色。
• ボックスシャドウ：各ボックスの周囲に影を付けます。
• 角の丸み：各ボックスの角がどの程度丸みを帯びているか。

どちらのスタイルにも、線の太さや色を指定する「ストローク」設定があります。

投稿のスタイルが設定されました。次に、各レビューのどの部分を表示するかを選択します。

レビュー要素の表示・非表示

各レビューは、以下の4つの要素で構成されています：

• 著者および日付：レビュアーの氏名と写真、およびレビューが投稿された日時。
• 評価：レビュアーが付けた星の数。
• レビューの段落：レビュアーが書いた文章。
• 画像や動画：写真など、レビュアーがレビューに添付したあらゆるもの。

表示する項目を選択するには、サイドバー上部の「レビュー」リンクから「レビュー」セクションに戻ってください。その後、「個々の要素を編集」をクリックしてください。

フィード内のすべてのレビューから要素を非表示にするには、そのチェックボックスのチェックを外してください。

要素の順序を変更するには、要素の上にカーソルを合わせます。その後、その行の右側に表示されるハンドルを上下にドラッグします。

表示するレビュアーの詳細情報を選択するには、「著者」と「日付」をクリックしてください。

「著者・日付」には、「著者名」、「著者画像」、「日付」の3つの項目があります。たとえば、レビュアーの写真を非表示にするには、「著者画像」のチェックを外してください。プレビューから写真が表示されなくなります。

「色」グループでは、著者の名前と日付にそれぞれ別の色を設定できます。

レビューの設定は完了しました。次に、その下にある「さらに表示」ボタンをカスタマイズします。

「さらに読み込む」ボタンのカスタマイズ

「もっと見る」ボタンはレビューの下にあり、訪問者がクリックするとさらに多くのレビューが表示されます。

次に、「カスタマイズ」タブのセクション一覧に戻ります。その後、「さらに読み込む」ボタンをクリックします。

[有効] スイッチは、ボタンを表示または非表示にします。

ボタンの表示を変更するには、 テキスト フィールド、例えば Show More Reviews.

「テキスト」フィールドの下では、ボタンのフォントや、テキストの色、背景色を変更できます。また、訪問者がボタンにカーソルを合わせたときに表示される色や、ボタンの周囲の色も変更できます。

プレビューには、レビューの下にあるボタンに表示される新しいテキストが表示されています。

「さらに読み込む」ボタンの準備が整いました。次に、変更した内容をすべて保存します。

変更の保存

変更内容はプレビューにすぐに反映されます。サイト上のフィードは、保存するまで変更されません。

フィードの表示に満足したら、フィードエディタの上部にある「保存」をクリックしてください。

これで完了です！レビューフィードが、お選びいただいたデザインになりました。ページにフィードを表示するには、レビューフィードの表示方法に関するガイドをご覧ください。

よくある質問

以下では、レビューフィードの外観をカスタマイズすることに関して、よく寄せられる質問のいくつかにお答えします。