Loop Grid 製品カードレイアウトガイドライン：価格、評価、セールフラッシュを一括で設定

支出ループグリッド製品リストページの作成において、真の難点は「表示できるかどうか」ではなく、「どこで設定し、どう整列させるか」です。以下、実際の操作手順に沿って説明します：Elementor内で価格、評価、プロモーションタグをそれぞれどこに配置するか、そしてよくある質問（FAQ）をどう処理するかについて解説します。

1. まず編集対象が「ループアイテム」であり、ページ自体ではないことを確認してください

製品カード内の価格、評価、プロモーションタグのレイアウトは、ほぼすべて「Loop Item（ループアイテム）」で実現されています。

操作パス（2つの一般的なエントリポイント）：

入口：テンプレートライブラリから

ワードプレスバックステージ テンプレート → テーマビルダー

見つける ループ項目
使用中のものを開いてください

ループアイテムに入るかどうかを判断：表示されているのは「単一商品カード」であり、ページ全体のレイアウトではありません。

2. 価格はどこに加算されますか？どのコンポーネントを使用しますか？

価格表示には WooCommerce のツール。

操作手順：

ループアイテム内で価格を表示する位置を選択してください
左上隅をクリック + コンポーネントを追加する
検索して追加 製品価格

一般的な配置方法：

タイトルの下に評価を配置し、評価の下に価格を配置する
価格を「底値転換ゾーン」に設定し、ボタンに近づける

価格スタイル設定位置：

候補者を決める 製品価格
左側 → スタイル
調整：フォント、サイズ、色、下線付き元のスタイル

もし「割引後の価格をより目立たせたい」なら：

Sale price の文字サイズを大きくする
通常価格文字サイズを小さくし、取り消し線を保持

3. 評価はどこに追加されますか？星の数と評価数はどのように表示されますか？

評価も同様に WooCommerce コンポーネント。

操作手順：

ループアイテム内でクリック +
検索して追加 製品評価

タイトルの下または価格付近までドラッグ

評価スタイル設定位置：

候補者を決める 製品評価
右側 → スタイル
調整：星の大きさ、文字の大きさ

推奨位置：

タイトルの下に配置：口コミを強調するのに適している
価格の下に配置：成約を強調するのに適している

評価に関するよくある質問：

評価がない商品は表示されないため、カードの高さが不揃いになる
解決策：評価モジュールに固定間隔を確保するか、またはカスケーディングスタイルシートコンテナの高さを固定する

4. プロモーションラベルの作り方？最も確実なのは「画像角標」です。

プロモーションラベルは画像上に角注として配置するのが最も推奨されます。これにより価格表示とスペースを奪い合うことがありません。

方法 A：セールフラッシュ（プロモーション表示）を使用する

操作手順：product ウィジェットをクリック

パススタイル → セールフラッシュ → セールフラッシュ（スイッチ）

2）添え字の位置を調整する方法（Absoluteを使わない場合）

パススタイル → セールフラッシュ → ポジション
スクリーンショットのPositionの右側に2つの小さなアイコンがあります：

左側のアイコン：通常は～を表す左上（または左側）
右側のアイコン：通常は～を表す右上（または右側）

これをタップするとアイコンの位置を左寄せ/右寄せに変更できます（スキンによって若干異なりますが、この位置で制御します）。

角注スタイル設定：

スタイル → 背景色、角丸、フォント、内マージン

5. おすすめのカード配置（この通りに並べれば乱れない）

ループアイテム内でコンポーネントを次の順序で配置してください：

商品画像（画像コンテナ）
- 重ねて表示：Sale Flash またはカスタム角標
製品名（タイトル、2行で切断）
製品評価（評価）
製品価格（価格）
(オプション）短いプロモーション文案（送料無料／クリスマスセール）
カートに入れる もしかしたら 製品を見る ボタン

アライメントの提案：

すべて左揃えの方が安定する
価格、評価、ボタンが同じ視覚軸上に配置されている

6. リストページの列数、間隔、レスポンシブ設定はどこで調整しますか？

これらは以下に属するループグリッド設定自体は、ループ項目には含まれません。

操作手順：

製品一覧ページに戻る
候補者を決める ループグリッド
左側 → レイアウト
列数を調整する

レスポンシブ設定：

あるエレメンタトップでタブレット/モバイルに切り替える
列数を個別に設定する
よくあるおすすめ：
デスクトップ：3–4列
タブレット：2列
携帯電話：1–2列

7. 最もよくある3つのレイアウト問題と解決策

7.1 カードの高さが一致しない

原因：タイトル行数の違い、評価の有無の違い、プロモーション文の長さの違い

解決策

タイトル制限 2行で切り詰め
評価領域に固定の高さを確保する
プロモーション文案は一行に収める

7.2 角注記が画像を隠すか位置がずれる

解決策

角標は画像コンテナ内に配置する
絶対位置指定 + 上端/左端を固定
角注の内側の余白を制御し、大きくなりすぎないようにする

7.3 価格とボタンが揃っておらず、見た目が乱れている

解決策

「評価＋価格＋ボタン」を1つのコンテナで囲む
コンテナを列に設定
コンテナに均一な間隔を設定する

巻き上げる

ループグリッド価格、評価、プロモーションタグ、重要なのはすべて ループアイテムテンプレート完成：価格はProduct Price、評価はProduct Ratingを使用。プロモーションラベルは画像の角注（Sale Flashまたはカスタムテキスト）を優先。列数と間隔はLoop Grid本体で調整。本文のコンポーネント順に配置し、レスポンシブ列数を個別設定すれば、商品リストページは即座にすっきりとした見栄えでコンバージョン率向上を実現します。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み