header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix ブログ:レシピカードを作成する

7分
この記事内
  • ステップ 1 | サイトに「Blog Recipes」アプリを追加する
  • ステップ 2 | レシピを作成する
  • ステップ 3 | レシピを特定のブログ記事にリンクさせる
  • ステップ 4 | アプリの設定をカスタマイズする
  • よくある質問
Wix ブログでレシピカードを作成すると、フードブロガーや企業などが、レシピを読みやすくインタラクティブな形式で共有することができます。レシピカードには、食材、調理手順、および調理風景などの写真が整理されて表示されるため、読者が思わず自分も作ってみたくなるようなブログ記事にすることができます。
ライブサイトのブログ記事に、レシピカードが表示されている様子を示したスクリーンショット。

ステップ 1 | サイトに「Blog Recipes」アプリを追加する

Wix ブログには、記事にプロフェッショナルなレシピカードを簡単に作成して追加できるサードパーティ製アプリが組み込まれています。アプリは、ブログ記事の作成画面から直接追加することができます。

「Blog Recipes」アプリを追加する方法:

  1. サイトダッシュボードの「ブログ」にアクセスします。
  2. +新しい記事を作成」をクリックするか、既存の記事を開きます。
  3. 左側のパネルで「アプリ」をクリックします。
  4. Blog Recipes」アプリまでスクロールダウンし、「アプリを見る」をクリックします。
  5. 同意して追加する」をクリックします。
  6. 左側のパネルで「アプリ」をクリックします。
  7. アプリを管理」をクリックします。
  8. 設定を完了する」をクリックします。
「ブログレシピ」アプリを追加する様子を示したスクリーンショット。

ステップ 2 | レシピを作成する

アプリをインストールしたら、レシピカードの作成を開始することができます。このカードにより、レシピの詳細や調理手順が整理され、読者とって分かりやすく、検索エンジンにとっても理解しやすいものとなります。まず、アプリを開き、レシピカードの各セクションを入力します。

レシピを作成する方法:

  1. 手動でレシピを作成するか、AI を使用してレシピを作成するかを選択します:
    • 手動で作成する:
      1. +Create a Recipe(+レシピを作成する)」をクリックします。
      2. 以下のタブをカスタマイズします:
        注意:上部の「Show tab(タブを表示)」トグルを有効または無効にすると、任意のタブの内容を表示または非表示にすることができます。
        • Header(ヘッダー):このレシピのタイトル、執筆者に関する情報、プロフィールへの URL、レシピの説明を入力します。
        • Ingredients(食材):食材の計量方法を選択し、セクションのタイトルと、各セクションで必要となる食材を追加します。
        • Nutrition(栄養):このレシピの栄養に関する詳細を入力します。
        • Instructions(手順):このレシピの調理手順をステップごとに作成します。各ステップでは、詳細や使用する調理器具などが分かるよう、画像を追加することができます。
        • Notes(備考):調理に役立つメモやヒントを入力します(例:「両面を 2分ずつ焼く」など)。
      3. Save Recipe(レシピを保存する)」をクリックします。
    • AI を使用して作成する:
      1. Create a Recipe using AI(AI を使用してレシピを作成する)」をクリックします。
      2. Describe Recipe(レシピの説明)」の欄に、このレシピに関する情報を入力します。
      3. Generate Recipe(レシピを生成する)」をクリックします。
      4. 各タブの情報を確認し、必要な変更を加えます。
      5. Save Recipe(レシピを保存する)」をクリックします。
各タブをカスタマイズした様子を示したスクリーンショット。

ブログ記事内にレシピを表示するには、レシピカードを特定の記事にリンクさせる必要があります。これにより、レシピが適切な場所に表示されるようになります。このステップをスキップした場合、レシピはレシピリストに保存されたままとなり、ブログ記事には表示されません。

レシピを記事にリンクさせる方法:

  1. サイトダッシュボードの「アプリ管理」にアクセスします。
  2. 「Blog Recipes」アプリ横の「開く」をクリックします。
  3. Blog Posts(ブログ記事)」タブをクリックします。
  4. 各記事の横にある「Recipe Template(レシピテンプレート)」ドロップダウンをクリックします。
  5. 該当するレシピを選択します。
  6. トグルを有効または無効にして、記事でレシピを表示または非表示にします。
  7. Live Preview(ライブプレビュー)」をクリックし、記事内のレシピをプレビューします。
  8. サイトを公開します。
ブログ記事にレシピをリンクさせる様子を示したスクリーンショット。

ステップ 4 | アプリの設定をカスタマイズする

次に、ブログの雰囲気に合わせてレシピカードをカスタマイズします。3種類のレイアウトテンプレートの中から、記事に適したものを選択することができます。
Wix エディタ
Wix Studio エディタ
  1. エディタに移動します。
  2. 記事ページに移動します:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. ブログページ」をクリックします。
    3. 記事」をクリックします。
  3. 記事ページで「Recipe Widget(レシピウィジェット)」をクリックします。
  4. Blog Recipes Settings Panel(ブログレシピ設定パネル)」をクリックします。
Wix エディタで、「ブログレシピ設定パネル」をクリックする様子を示したスクリーンショット。
  1. レシピカードの各セクションのレイアウトをカスタマイズします。
  2. アニメーション・エフェクト」アイコン をクリックします。
  3. 利用可能なオプションからアニメーションを選択します。
  4. カスタマイズ」をクリックし、オプションを使用してアニメーションを調整します:
    • プレビュー:「プレビュー」横の再生アイコンをクリックし、レシピカードに適用したアニメーションがどのように表示されるかを確認します。
    • 時間:スライダーをドラッグし、アニメーションが再生される時間を調整します。
    • 待機時間:スライダーをドラッグし、ページの読み込みからアニメーションが開始するまでの待機時間を調整します。
    • Number of parts(パーツ数):スライダーをドラッグし、画像を分割するパーツの数を調整します。
    • 方向:ドロップダウンをクリックし、アニメーションが開始する方向を選択します。
    • モーションスタイル:ドロップダウンをクリックし、アニメーションの動きを選択します。
    • シェイプ:利用可能なオプションからシェイプを選択します。
    • 回転数:スライダーをドラッグし、アニメーションの回転数を調整します。

よくある質問

ブログ用のレシピカードの作成に関する詳細については、以下の質問をクリックしてください。