SOY CMS2でサムネイル付きの記事リストを作る

WordPressでいうところのアイキャッチです。SOY CMS2でサムネイル付きの記事リストを作る方法のメモです。

記事にサムネイルを表示の仕方

SOY CMS2で記事を投稿する場合は、[コンテンツの管理] → [記事の作成]

記事にサムネイルを表示は下記図のようにします。

サムネイル付きの記事リスト

イメージとして下記図のような『神戸ITフェスティバル』のサイトで実装している記事リストです。

個人的にも好きなスタイルです。このようなサムネイル付きの記事リストを作成します。

完成形

テンプレートタグのイメージ

テンプレートタグ

テンプレートタグは、cms:id="thumbnail_image"を使います。以下のようにテンプレートに埋め込みます。

<img cms:id="thumbnail_image" src="" alt="" width="48" height="48">

注意点

サムネイルのサイズを記入しておく
代替用のサムネイルを用意する

表示するサムネイルのサイズを決めておく必要があります。そのため、width属性とheight属性にサイズを指定しておきます。また、記事を投稿したときに、サムネイルが無かった場合に、代替用のサムネイルを指定しとくと良いです。コード例が下記です。（一応、WAI-ARIAとCSS用にclass属性を指定しています。）

<img cms:id="thumbnail_image" src="thumbnail.png" alt="" width="48" height="48" class="border" role="presentation">

HTML

上記のテンプレートタグを使って、記事が投稿された時に、記事のタイトルとそのリンクとサムネイルのテキストを表示させるためのHTMLは下記にようになります。

<!-- block:id="info" -->
<h2 class="second-heading"><!-- cms:id="block_name" --><!-- /cms:id="block_name" --></h2>
<!-- cms:id="entry_list" -->
<div class="info">
<div class="section">
<div class="thumsnails">
<img cms:id="thumbnail_image" src="" alt="" width="48" height="48" class="border" role="presentation">
</div>
<div class="entry-title-box">
<h2><a cms:id="entry_link*"><!-- cms:id="title" --><!-- /cms:id="title" --></a></h2>
<time><!-- cms:id="create_date" cms:format="Y年m月d日" --><!-- /cms:id="create_date" --></time>
</div>
</div><!-- //.section -->
<p cms:id="thumbnail_text" class="thumbnail-text"></p>
<p class="btn_position"><span class="btn"><a cms:id="entry_link*">Read More</a></span></p>
</div>
<!-- /cms:id="entry_list" -->
<!-- /block:id="info" -->

下記が使っているテンプレートタグです。公式サイトからの参照です。

block:id="hoge": ブロックID
cms:id="title": 件名
cms:id="entry_list": 記事一覧
cms:id="entry_link*": 記事リンク
cms:id="create_date": 作成日時
cms:id="thumbnail_image": 一覧用画像
cms:id="thumbnail_text": 一覧テキスト

CSS

CSSは下記のようになっています。（CSS3を使っているのでIEでの表示の保証はありません。）

.info{
	width: 50%;
	float: left;
	padding: 10px;
}

.image{
	padding: 0;
	margin: 0;
}

.border{
	border: 1px solid #E8E8E8;
}

.thumsnails{
	width: 60px;
	float: left;
	border: 1px solid #E8E8E8;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding-top: 5px;
	background: #FFFFFF;
	text-align: center;
}

.entry-title-box{
	float: left;
	margin: 5px;
}

.entry-title-box h2{
	font-size: 1.6em;
	padding: 2px 0 5px;
}

.entry-title-box h2 a, .entry-title-box h2 a:visited{
	color: #164a84;
}

.entry-title-box time{
	font-size: 1em;
	font-weight: bold;
}

.btn_position{
	text-align: right;
}
.btn a,.btn a:visited{
	color: #164a84;

}

.btn a:link{
	text-decoration: none;
}

.btn{
	border: 1px solid #999;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 10px;
	margin: 20px 0;
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0.13, rgb(224,220,224)),color-stop(0.79, rgb(255,255,255)));
	background: -moz-linear-gradient(center bottom,rgb(224,220,224) 13%,rgb(255,255,255) 79%);
}

.thumbnail-text{
	clear: both;
	margin-top: 10px;
	font-size: 1.4em;
}

注意点

SOY CMS2の現行バージョン(2.0.5-1)では、サムネイルを投稿したときに、サムネイルのimg要素の前に<p class="image">が付加されます。Reset CSSを使っていない場合であれば下記の指定はしといたほうが良いです。指定しておくと正方形のサムネイル用のボックスが作成しやすいです。

.image{
	padding: 0;
	margin: 0;
}

完成

以上のことでサムネイル付きの記事一覧を生成できるようになります。何かのご参考になれば幸いです。

E-riverstyle Vanguard