「最新の記事」、「人気の記事」にサムネイル画像を表示する方法

※この機能はVer.2.01以降で利用できます。

CSM2のウィジェット「最新の記事」や「人気の記事」の記事名の横にサムネイル画像を表示させることができます。

準備:スタイルシートの編集


※サムネイル対応済みのテーマ(デザイン)をご利用の場合この準備は不要です。

管理画面にログインして以下のように進みます。

管理画面 ⇒ デザイン ⇒ デザインの変更 ⇒ CSSの編集

CSS編集部分を一番下までスクロールさせて改行を入力して、以下の命令を付け加えて保存してください。

.thumb-side {
width: 79px;
height: 79px;
padding: 3px;
-webkit-box-shadow: 0 0 5px rgba(50, 50, 50, 0.5);
box-shadow: 0 0 5px rgba(50, 50, 50, 0.5);
background-color: white;
float: left;
margin:0 3px 10px 3px;
}

.thumb-side-inner {
width: 79px;
height: 79px;
overflow:hidden;
}

.thumb-side img {
width: 130px;
height: 79px;
margin:0 0 0 -24px;
border:0px;
}

a:hover img {
opacity: 0.7;
}


最新の記事の場合


手順1


管理画面にログインして以下のように進みます。

管理画面 ⇒ デザイン ⇒ ウィジェットの設定 ⇒ 最新の記事[編集]

手順2


<!-- 内容ここから --> から <!-- 内容ここまで --> の部分を丸ごと以下の命令に置き換えて保存します。

<!-- 内容ここから -->
<ul>
<CSM2NewEntryList>
<li><a href="<CSM2InCategory>../</CSM2InCategory><$CATEGORY_DIR$><$ENTRY_BASENAME$>.html"><CSM2ThumbnailExists><div class="thumb-side"><div class="thumb-side-inner"><img src="<CSM2InCategory>../</CSM2InCategory><$THUMBNAIL_URL$>" class="topics-img" /></div></div></CSM2ThumbnailExists><$ENTRY_TITLE$></a><div style="clear:both;"></div></li>
</CSM2NewEntryList>
</ul>
<!-- 内容ここまで -->


人気の記事の場合


手順1


管理画面にログインして以下のように進みます。

管理画面 ⇒ デザイン ⇒ ウィジェットの設定 ⇒ 人気の記事[編集]

手順2


<!-- 内容ここから --> から <!-- 内容ここまで --> の部分を丸ごと以下の命令に置き換えて保存します。

<!-- 内容ここから -->
<ul>
<CSM2PopularEntryList>
<li><a href="<CSM2InCategory>../</CSM2InCategory><$CATEGORY_DIR$><$ENTRY_BASENAME$>.html"><CSM2ThumbnailExists><div class="thumb-side"><div class="thumb-side-inner"><img src="<CSM2InCategory>../</CSM2InCategory><$THUMBNAIL_URL$>" class="topics-img" /></div></div></CSM2ThumbnailExists><$ENTRY_TITLE$></a><div style="clear:both;"></div></li>
</CSM2PopularEntryList>
</ul>
<!-- 内容ここまで -->