【WordPress.com】 ギャラリー機能を使ってグリッド・タイル状の記事リストを作成する方法

私自身は、グリッド・タイル状の記事リストを作成するときには、ショートコード「display-posts」を使って、以下のようなデータを抽出し、

CSS で以下のような形に整形することで実現していますが、CSS に馴染みのない人にとっては使いづらいのではないかと危惧しています。実際、ショートコード「display-posts」を使っている人はまだあまりいないのではないかと推測しています。

そこで、ショートコード「display-posts」よりは普及しているであろうショートコード「gallery」を使って、グリッド・タイル状の記事リストを作成する方法について検討してみました。

実際に表示させてみるとこんな感じになります。

Hemingway Rewritten

Espied

illustratr

Fictive

Quadra

Tonal

[WordPress.com] 最新記事をタイル状（5 列）に並べるための CSS

記事に以下のようなものを貼り（「asazuki508」のところは自分のアカウントと差し替えるか、「先頭に固定表示」を使っていない（もしくは、ここの記述自体の意味がわからない）場合は「author」毎削除してください。また、各記事には、あらかじめ、アイキャッチ画像を設定してください。）、

<div class="boxline medium">
[display-posts author="asazuki508" image_size="medium" posts_per_page="15"]
 </div>

以下の CSS を CSS スタイルシートエディターに追加すると、

/* 記事をタイル状に並べる（中型） */
.boxline.medium {
	margin: 0 auto 2.625em;
}

.boxline.medium ul.display-posts-listing {
	padding-left: 0 !important;
	text-align: left;
	margin: 0 auto;
}

.boxline.medium ul.display-posts-listing > li {
	width: 18%;
	list-style: none;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: break-word;
	font-size: 13px;
	line-height: 1.4;
	margin: 0 1%;
	padding: 7px 0;
}

.boxline.medium ul.display-posts-listing li > a > img {
	display: block !important;
	border: 1px solid #d0a600 !important;
	width: 96% !important;
	max-width: 100% !important;
	height: auto !important;
	float: left !important;
	margin: 5px 0 !important;
	padding: 2px !important;
	background-color: rgba(230,230,230,0.4) !important;
	border-radius: 3px;
}

最新記事をタイル状に表示することができます。以下の例はテーマ「Twenty Twelve 」でのものです。

#2013