Views で記事ダイジェストの一覧を作成する

  • 2014-01-28 (火) 17:39 初版作成
    2014-05-30 (金) 21:15 最終更新

下のような画像入りの記事ダイジェストを Views モジュールで作成した。各行の float 解除には clearfix を使用。Views に若干のスタイル設定が必要になるので、備忘録として設定内容をメモしておく。

記事ダイジェスト一覧の例

フィールドの設定

  1. Views の UI で記事ダイジェスト用の view を作成する。ここでは名前を articles とする。
  2. 表示対象のフィールドとして、記事のタイトル、投稿日、画像ファイル、本文を追加する。
  3. タイトル フィールドを見出しにするため、フィールドの [スタイルの設定] の [HTML 要素] を H2 に指定する。
  4. 画像ファイルはサムネイル表示するので、[フォーマッタ―] を "画像"、[画像のスタイル] を "Thumbnail (100x100)" などに、[画像へのリンク] を "コンテンツ" に設定する。

  5. 本文は冒頭部分だけを表示するので、[REWRITE RESULTS] の [最大文字数でこのフィールドをトリミング] チェックボックスをオンにし、[最大長] およびオプションを適宜指定する。また、ダイジェストとして内容テキストのみを抽出するため、[HTML タグを除去] チェックボックスをオンにする。

レイアウト設定

画像を左寄せし、右側に余白を設けて本文の冒頭部分を回り込ませるため、次のような指定をスタイルシートに追加する。

.view-id-articles .views-field-field-image {
 float: left;
 margin-right:10px;
}

view-id-articles はこの Views 全体(外枠)のコンテナ div 要素の class 属性、views-field-field-image は画像フィールドのコンテナ div 要素の class 属性である。これらは Views の名前やフィールド名に応じて変わるので、環境に合わせて変更する。

次に、float をリセットする clearfix をスタイルシートに追加する。なお、Artisteer が生成するテーマでは通常 style.css 内に同等の指定が最初から用意されている。

.clearfix:after {
   clear: both;
   font: 0/0 serif;
   display: block;
   content: " ";
}

上記のセレクタ .clearfix を Views の各行の class 属性に設定するため、Views の [フォーマット] の下にある [フォーマット] の [環境設定] をクリックし、[行のクラス] に "clearfix" と入力して保存する。

体裁の調整

以上で、Views の各行は中身を囲む高さを持つボックスになるので、あとは必要に応じて体裁を追加する。たとえば、上のスクリーンショットのように、各行の下にマージンとパディングを設定し、境界に破線を表示させるには、次のような指定を追加する。

.view-id-articles .views-row {
 margin-bottom:15px;
 border-bottom:1px dashed #ccc;
 padding-bottom:10px;
}
関連コンポーネント: 

更新履歴

  • 2014-05-30 (金) 21:15

DISQUS コメント