Wix ブログ:記事リストを追加・設定する

読了時間:5分
記事リストパーツを使用すると、サイトの他のページにあるブログ記事のスニペットを訪問者に表示することができます。記事リストパーツは自由にカスタマイズでき、さまざまなレイアウトから好みのものを選択し、サイトに合わせてデザインや表示内容を編集することができます。
注意:
この記事では、「クラシック」レイアウトを例に説明します。実際に表示されるオプションは、選択するレイアウトによって異なります。

ステップ 1 | サイトに記事リストパーツを追加する

Wix エディタで使用できる豊富なブログパーツの中から、記事リストパーツを選択してサイトに追加します。
ヒント:
記事リストを追加したいページが表示されていることを確認してください。記事リストは複数のページに追加することができます。

記事リストパーツを追加する方法:

  1. エディタ上部にある「ページを表示」ドロップダウンメニューをクリックします。
  2. 記事リストパーツを追加したいページを選択します。
  3. 追加パネルに移動します:
    • Wix エディタ:エディタ左側で「パーツを追加 をクリックします。
    • Editor X:Editor X の上部で「要素を追加 をクリックします。
  4. ブログ」をクリックします。
  5. 使用したい記事リストをクリックするか、ドラッグしてページ内に配置します。
「追加」パネルと「記事リスト」のオプションが表示されたスクリーンショット。

ステップ 2 | 設定を調整する

サイトに記事リストを追加したら、リストに表示する記事のカテゴリーと記事数を必要に応じてカスタマイズします。

設定を調整する方法:

  1. エディタで記事リストパーツをクリックします。
  2. 設定」をクリックします。
  3. 設定」タブをクリックします。
  4. このリストに表示する記事と記事数を選択します:
    • カテゴリーを選択:ドロップダウンをクリックして、リストに表示するブログカテゴリーを選択します。
    • 記事のタグを指定:ドロップダウンをクリックして、タグで記事をフィルターします。
    • 特集記事のみ表示:トグルをクリックして、表示する記事の種類を選択します:
      • 有効:記事リストに特集記事のみを表示します。
      • 無効:記事リストに特集記事だけでなく、すべてのブログ記事を表示します。
    • 記事の表示方法を選択:記事の表示方法を選択します:
      • 固定の番号:下のスライダーをドラッグして、記事リストに表示する記事数を選択します。
      • ページ番号:下のスライダーをドラッグして、記事リストでページごとに表示する記事数を選択します。
記事リストの「設定」タブとカスタマイズオプションが表示されたスクリーンショット。

ステップ 3 | 表示内容を編集する

記事リストに表示する追加のアイコンや情報を選択します。各記事に執筆者名を表示したり、記事に「いいね!」をした読者の数を示す「いいね!カウンター」を表示したりすることができます。

表示内容を編集する方法:

  1. エディタで記事リストパーツをクリックします。
  2. 設定」をクリックします。
  3. 表示設定」タブをクリックします。
  4. フィードに表示する各項目横のチェックボックスをクリックします。
記事リストの「表示設定」パネルのスクリーンショット。

ステップ 4 | レイアウトを変更する

好みのレイアウトを選択し、利用可能なオプションを使用してレイアウト設定をカスタマイズします。一部のオプションは、選択するレイアウトによって異なります。

レイアウトを変更する方法:

  1. エディタで記事リストパーツをクリックします。
  2. 設定」をクリックします。
  3. レイアウト」タブをクリックします。
  4. 利用可能なオプションからレイアウトを選択します。
  5. カスタマイズするものを選択します。
    • サイズ調整:記事リストで画像のサイズを変更する方法を選択します:
      • クロップ:選択する画像の比率に合わせて画像がトリミングされます。それぞれの画像が同じサイズで表示されるため、画像によっては表示したい部分が途切れてしまうことがあります。その場合は、「画像の比率」でできるだけ画像が収まる縦横比を選択してください。
      • フィット:画像は元の縦横比のまま、画像の表示範囲内に全体が収められます。
    • 追加の画像設定:「追加の画像設定」をクリックし、「画像の配置」と「画像の割合」を選択します。設定を終えたら、「レイアウトに戻る」をクリックして戻ります。
      • 画像の配置:画像を左または右に揃えます。
      • 画像の割合:スライダーをドラッグして、記事リストで画像が占める割合を変更します。
    • テキスト配置:テキストを表示する位置を、中央から選択します。
    • 行ごとのカード数:行ごとの記事のレイアウトを調整します:
      • 画面に合わせる:行ごとの記事数が、記事のサイズと画面の幅によって変化します。「記事のサイズ」スライダーをドラッグして、記事のサイズを調整します。
      • 行ごとの記事数を設定:行ごとに表示する記事数を設定します。「行ごとの記事数」スライダーをドラッグして、各行に表示する記事数を選択します。
    • 記事の間隔:記事の間隔を設定します。
    • 記事の高さ:記事の高さを調整します。
    • 余白:フィードの端から記事までの間隔を設定します。
    • テキストの余白(左・右):テキスト両側の余白を設定します。
    • タイトルの行数:記事タイトルの最大行数を設定します。
記事リストの「レイアウト」パネルのスクリーンショット。

ステップ 5 | デザインをカスタマイズする

記事リストのテキストやパーツなどのデザインをカスタマイズして、好みの見た目に仕上げます。

デザインをカスタマイズする方法:

  1. エディタで記事リストパーツをクリックします。
  2. 設定」をクリックします。
  3. デザイン」タブをクリックします。
  4. カスタマイズするものを選択します。
    • 記事:記事のタイトルと詳細のスタイルと色をカスタマイズしたり、マウスオーバー時のテキストの色を変更したり、枠線と背景の不透明度と色をカスタマイズします。
    • カテゴリーラベル:カテゴリーラベルのレイアウトを選択し、カテゴリースタイルをカスタマイズします。
    • 評価:各記事の評価を示す星の色をカスタマイズし、評価に使用されるフォントのスタイル、サイズ、色を変更します。
    • 動画設定:記事リストでの動画の再生方法を設定します。「自動再生」、「クリックで再生」、「ホバーで表示」のいずれかを選択し、動画の再生スピードやループ再生などの設定をカスタマイズします。
記事リストの「デザイン」パネルのスクリーンショット。
ヒント:
Wix 公式ブログでは、ブログデザインのヒントやコツについて紹介しています。

お役に立ちましたか?

|