[WordPress.com] ショートコード「display-posts」を使って、大きな画像+抜粋(概要文)をブログ中の任意の場所に表示する方法

以前、記事「[WordPress.com] ショートコード「display-posts」を使うなどしての、大きい画像をきれいに表示する方法についての検討」において、ショートコードを使って、記事中等にアイキャッチ画像を大きく表示する方法について検討しました。

sfgsgsf

記事「[WordPress.com] ショートコード「display-posts」を使って、ある特定の記事の内容を任意の場所に表示する」では、特定の記事の内容をブログ中の任意の場所に表示する方法について検討してみました。

sdfgsfgsf-1

記事「WordPress.com のショートコード「display-posts」で作成した最近の投稿リストに抜粋(概要文)を入れる」では、抜粋(概要文)を表示する方法について検討してみました。

dfgsfgsfd

ここでは、以上の検討を踏まえ、大きな画像+抜粋(概要文)をブログ中の任意の場所に表示する方法について検討してみました。

sdfgsdfgsdfgsfd

任意の場所に追加する記述は以下のとおりです。「category」のところには、任意のカテゴリー名(日本語可)を入力します。

<div class="boxline large">
[display-posts posts_per_page="-1" category="twenty eleven" include_excerpt="true" image_size="large"]
</div>

また、表示の体裁を整えるために CSS スタイルシートエディターの方に以下の CSS を追加しました。「large 版」という部分の一部が今回、修正したところで、その他の部分は、これまで作成した CSS をそのまま流用してあります。

/** サムネイル画像をタイル状に並べる(「display-posts」ショートコード対応版)**/
.boxline ul.display-posts-listing {
	padding-left: 0!important;
	text-align: left;
	margin: 0 0 15px;
}

.boxline ul.display-posts-listing li {
	width: 92px;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: break-word;
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
	padding: 6px;
}

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

.boxline ul.display-posts-listing li img {
	display: block!important;
	border: 1px solid #d0a600!important;
	height: 70px!important;
	width: 90px!important;
	margin: 4px!important;
	padding: 2px!important;
}

/* mini 版 */
.boxline.mini ul.display-posts-listing li {
	width: 72px;
}

#ie7 .boxline.mini ul.display-posts-listing li {
	width: 70px;
}

.boxline.mini ul.display-posts-listing li img {
	height: 50px!important;
	width: 70px!important;
}

/* large 版 */
.boxline.large ul.display-posts-listing li {
	font-size: 16px;
	line-height: 1.7;
	margin: 1em 0;
	width: 100%;
}

.boxline.large ul.display-posts-listing li a.title {
	font-weight: bold;
}

.boxline.large ul.display-posts-listing li a.title:before {
	color: #b97722;
	content: '●';
	padding-bottom: 0;
	padding-right: 5px;
	display: inline-block;
	vertical-align: baseline;
	margin-left: -10px;
}

.boxline.large ul.display-posts-listing li img {
	width: 95%!important;
	max-width: 100%;
	height: auto!important;
	box-shadow: none!important;
}

.boxline.large ul.display-posts-listing li .excerpt {
	float: right;
	width: 70%;
	border: 5px solid #eee;
	padding: 7px;
	border-radius: 7px;
	margin: .3em 4% 0 0;
	background-color: #f9f9f9;
}

.boxline.large ul.display-posts-listing li .excerpt a {
	float: right;
}

ちょっとした内容の引用であれば、記事「[WordPress.com] ショートコード「display-posts」を使って、ある特定の記事の内容を任意の場所に表示する」の方法でいいと思うのですが、ボリュームが多くなると、そういうわけにもいかなくなるので、そういうときには、以上のような形で抜粋版を引用先に表示すればいいのではないかと思いました。

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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