[WordPress.com] ショートコード「display-posts」を使うなどしての、大きい画像をきれいに表示する方法についての検討

現在、ショートコード「display-posts」を使って、投稿記事のカテゴリーと連動させて、記事のリスト等を表示する方法について検討しているのですが、今回は、ショートコード「display-posts」を使って、大きめの画像を表示させる方法について検討してみました。
sfgsfgsfd
フォトブログ向け WordPress.com テーマ のピックアップ

ショートコード「display-posts」で画像の大きさ(容量)を指定するところ(表示上の画像の大きさは、CSS で調整可能)は、「image_size」という部分です。試しに「large」というのを「thumbnail」に変更してみると、

sfgsfgs-1

rect3015

dsfgsfgsf

ちょっとわかりにくいかもしれませんが、こんなふうに画像がぼやけてしまいます。

adgsfdgsfd

ブックマークレット「イメージ一覧|ブックマークレット – Static Flower」で、どんな画像が抽出されているか確認してみると、案の定、小さくなっています。

adfafad

rect3015

fsgsfdgsfd

「large」と「thumbnail」は、何の値に対応しているか確認してみると、どうやら「設定」→「メディア」のところの

dfgadfadfads

「サムネイルの大きさ」に「thumbnail」が、「大サイズ」に「large」が対応しているようです。記事「Gallery — Support — WordPress.com」によると、おそらく、「中サイズ」は「medium」で OK かと思います。

fgsdfgsdfg

ただし、カスタム CSS のコンテンツ幅の値(たぶん、この値が「full」)も影響しているようで、

adgasdgsdfgf

たとえば、この値を「100 px」にしてみると、

sdgsgsdfg

こんなふうに画像がぼやけてしまいます。

fhsfdhgsfgs

抽出されている画像を確認してみると、かなりちっちゃくなっているので、コンテンツ幅の設定値に縛られていることが推察されます。

sfgsfgsdf

このようにコンテンツ幅に縛られるているのは、ショートコード「display-posts」を通じて抽出される画像だけではなく、記事等に貼り付けられている画像でも同様のようで、例えば、添付ファイルで幅 1600px のものを貼り付けても、

sdfgsfgsfgsd

ブログ上では、コンテンツ幅の設定値である、730 px に縮小されていました。

sfgsdfgsdfg

以上から、WordPress.com における画像の大きさは、「「メディア」のところで、画像を抽出するとき(ショートコードで画像を抽出するときや画像を貼り付けるときのサイズ指定のとき)の大きさを指定できるが、コンテンツ幅で上限が定められ、その上限は、カスタム CSS にアップグレードすることで解除できる」ものと推察されます。

参考

記事「フォトブログ向け WordPress.com テーマ のピックアップ」での画像の出力部分の記述と、

<div class="boxline large">[display-posts category="フォトログ向けテーマのピックアップ" image_size="large" posts_per_page="-1" ]</div>

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: normal;
	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;
}

/* 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 img {
	width: 95%!important;
	max-width: 100%;
	height: auto!important;
	box-shadow: none!important;
}

/** ---------- **/

投稿者: comemo

mac & iPad で情報をインテグレートする

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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