【WordPress-com】ショートコード「display-posts」をカスタム CSS なしにそれなりに表示させる -プロパティ「columns」を使って、レスポンシブっぽくする-

先日、記事「【WordPress-com】ショートコード「display-posts」をカスタム CSS なしにそれなりに表示させる | comemo|2015-02-15」において、WordPress.com をカスタムデザイン等にアップロードしなくても、ショートコード「display-posts」を使って、サムネイル画像付きの記事リストをそれなりに表示させる方法について検討しましたが、今回はその改良版です。

以下の記述を記事中に追加すると、

最新記事の一覧が以下のような感じで、記事の幅が広いときには2列、せまくなると1列で表示されます。以下はテーマ「Wilson」での例。

プロパティ「columns」の機能確認テスト | _t demo 2015-02-24 13-31-24

comemoarrow

_t demo 2015-02-24 13-16-42

comemoarrow

プロパティ「columns」の機能確認テスト | _t demo 2015-02-24 13-34-29

なお、Web ブラウザの種類により、記事の幅が広くても記事リストが1列になる場合もあります。しかし、よほど記事の幅が広くない限りは以下のように別段、見苦しいわけでもないので、個人的には許容範囲内と判断しています。

fadfadfasd

インターネットエクスプローラのバージョン9 での表示 (「IETester」での模擬)

また、例えば、テーマ「Twenty Fifteen」の場合は、画像と文字がくっついてしまってイマイチです。

_t demo 2015-02-24 13-06-08

このあたりの体裁はテーマにより異なっているので、今回提案したものは必ずしもすべてのテーマに対して誰しもが満足できる形で適用できるわけではありません。

参考