連載記事一覧の新着記事を大きく表示する方法

サンプル:新着記事4件はサムネイルありで大きく表示し、それ以降の記事はテキストのみを表示している

bingo!CMSの連載記事は、同じラベルがつけられた記事を昇順または降順の一覧で表示する機能です。

連載記事の一覧を表示するには「連載記事用一覧ユニット」を使用しますが、このユニットの「表示開始件数」と「表示情報件数設定」という設定を使用し、複数の連載記事用一覧ユニットを組み合わせると、レイアウトにメリハリをつけた一覧をつくることができます。

このマニュアルでは、連載記事一覧用ユニットを2つ使用し、次のような連載記事一覧を作成します。

  • 新着記事4件の見出しはサムネイルありで大きく、それ以降の記事はテキストのみを表示する
  • 記事を公開日の降順に一続きで表示する

表示開始件数 と 表示情報件数設定 とは

設定前

ページに連載記事一覧用ユニットを2つ配置し、同じラベルがついた記事を表示するよう設定します。このとき「表示開始件数」と「表示情報件数設定」を設定しないと、それぞれのユニットには同じ記事が表示されます。

設定後

「表示開始件数」と「表示情報件数設定」を設定すると「1つ目のユニットは1〜4番目の記事まで、2つ目のユニットは5番目の記事から表示する」のように設定でき、記事をメリハリの利いた一続きのコンテンツとして表示させることができます。

設定手順

  1. ページ編集画面を開きます。
    任意の連載記事一覧用ユニットをドラッグ&ドロップでコンテナに2つ(連載記事一覧用ユニットであれば、組み合わせは問いません)配置します。

このマニュアルでは マルチ連載記事リスト1 を使用しました。
マルチ連載記事リスト1 は拡張機能ユニットです。拡張機能管理 からbingo!CMSにインストールすると使用できます(bingo!CMS1.7.2以上)。

  1. 上段に配置した連載記事一覧用ユニットの編集画面を開きます。
    設定ポイントは3つです。
    • 「表示開始件数」… 何番目の記事から表示するか
    • 「表示情報件数設定」… 記事を何件表示するか
    • 「表示順」… 記事を表示する順番
    このマニュアルでは下記のように設定しました。
    • 「表示開始件数」… 1
    • 「表示情報件数設定」… 4
    • 「表示順」… 公開日の降順
    その他の設定については任意です。設定したら 保存 をクリックします。
  1. 上段の連載記事一覧用ユニットの設定ができました。
    このマニュアルでは、1 番目の記事から 降順 に、4 つの記事が表示されるよう設定しています。
  1. 続いて、下段に配置した連載記事一覧用ユニットの編集画面を開きます。
    このマニュアルでは下記のように設定しました。
    • 「表示開始件数」… 5
    • 「表示情報件数設定」… 5
    • 「表示順」… 公開日の降順
    設定したら 保存 をクリックします。
  1. 下段の連載記事一覧用ユニットの設定ができました。
    このマニュアルでは、5 番目の記事から 降順 に、5 つの記事が表示されるよう設定しています。

以上で、2つの連載記事一覧用ユニットを組み合わせ、レイアウトにメリハリをつけた一覧をつくることができました。
レイアウト次第で様々な表現が可能となります。
最新情報を目立たせたいときなどにぜひご利用ください。

  • スマートフォン向けにも設定できます。

ページトップ