[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 」でのものです。

sgsfsd

なお、以下に他のテーマでの例をいくつか示します。

asdfasfasd
テーマ「Twenty Eleven 」での表示

asdgvafasd
テーマ「Twenty Ten 」での表示

sgfsgsdf
テーマ「Wu Wei 」での表示

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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