[WordPress.com] 記事にサムネイル画像つきのリストを貼る

最終更新日:2015-12-24

[WordPress.com] 記事にサムネイル画像つきのリストを貼る | comemo

カスタム CSS で以下の CSS を追加し、

/* サムネイル画像をリスト状に並べる(「display-posts」ショートコード対応版)*/

.boxlist ul.display-posts-listing {
	padding-left: 0!important;
	text-align: left;
}

.boxlist ul.display-posts-listing li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: normal;
	font-size: 12px;
	line-height: 1.2;
	margin: 0;
	padding: 2px;
}

.boxlist ul.display-posts-listing li a {
	font-weight: bold;
}

#ie7 .boxlist ul.display-posts-listing li {
	display: inline;
	position: relative;
	width: 500px;
}

.boxlist ul.display-posts-listing li img {
	display: block!important;
	border: 1px solid #d0a600!important;
	height: 65px!important;
	width: 80px!important;
	float: left!important;
	margin: -2px 4px 4px 2px!important;
	padding: 2px!important;
}

例えば、記事に以下のように記述すると、

<div class="boxlist">[display-posts category="ツイッター" image_size="thumbnail" posts_per_page="5"]</div>

以下のような、サムネイル画像つきの記事のリストを表示することができます。

「ツイッター」のところを自分の使っているカテゴリーと差し替えれば、そのカテゴリーの記事のリストが表示されると思います。
なお、記事には、あらかじめ、アイキャッチ画像を設定しておく必要があります。

参考

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。