【WordPress-com】ショートコード「display-posts」をカスタム CSS なしにそれなりに表示させる

以前、「「[WordPress.com] CSS の追加なしにサイドバー等にサムネイル画像つき最新記事リストを表示する方法についての検討 | comemo|2013-09-07」という記事において、カスタムデザイン等にアップグレードすることなく、ショートコード「display-posts」を使わなくてもそれなりにサムネイル画像つきリストを表示する方法について検討しましたが、

ストア_‹__c_demo_—_WordPress

最近、ショートコード「display-posts」自体に CSS が追加されていることに気づいたので、その覚え書きです。

以前は、ショートコード「display-posts」で表示される画像を含む要素に左寄せを定義していなかったので、記事のリストを表示しづらかったのですが、最近、以下のように「alignleft」という CSS クラスが追加されていることに気づきました。

WordPress_com_への投稿手段いろいろ___comemo

そういうわけで、カスタムデザインで CSS を追加することなく、

CSS_‹_comemo_—_WordPress

例えば、以下のような記述を記事に追加するだけで、

以下のようにそれなりの体裁でサムネイル画像付きの記事リストを表示することができるようになりました。

ショートコード「display-posts」でのリンクリストの表示テスト____t_demo

カスタムデザインによる CSS の追加なしにショートコード「display-posts」を使って、サムネイル画像付きの記事リストを表示させているようす(テーマ「Hemingway Rewritten」)

それなりに表示させるポイントをざっくりと説明すると、まず、サムネイル画像の大きさを調整する「設定 → メディア → 画像サイズ」のところで、幅よりも高さ方向の制限値を大きくして、記事リストの画像の幅が揃うようにすること。

メディア設定_‹__t_demo_—_WordPress

各記事にアイキャッチ画像を設定すること。

投稿の編集_‹_comemo_—_WordPress

さらに言えば、「抜粋」のところに文章を追加すると、

投稿の編集_‹__t_demo_—_WordPress

記事の説明部分の体裁がよくなります。

ショートコード「display-posts」でのリンクリストの表示テスト____t_demo

comemoarrow

ショートコード「display-posts」でのリンクリストの表示テスト____t_demo

ただし、CSS を追加しない場合、たとえば、iPhone 等では以下のように窮屈に表示されたりするので、このあたりのある程度の妥協は必要です。

貼り付けた画像_2015_02_15_10_39

なお、レンタルサーバ等にインストールして使うタイプの WordPress では、プラグイン「Display Posts Shortcode」をインストール・有効化すれば、ショートコード「display-posts」を使えるようになるわけですが、2015-02-15現在、CSS の追加はなされていないようなので、

comemo_demo_lolipop___Just_another_WordPress_site

例えば、以下のような CSS を追加すれば、WordPress.com と同じような体裁になると思います。

.listing-item {
    clear: both;
}

.listing-item .image {
    float: left;
}

その他、ショートコード「display-posts」の使い方については、「Display Posts Shortcode — Support — WordPress.com」や拙作「記事をタイル状に表示したりすることのできるショートコード「display-posts」 | comemo」をご参照ください。

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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