「[WordPress.com] CSS の追加なしにサイドバー等にサムネイル画像つき最新記事リストを表示する方法についての検討

以前、記事「[WordPress.com] ショートコード「display-posts」を使ってサイドバー等にサムネイル画像つき最新記事リストを表示する」において、サイドバー等にサムネイル画像付きの最新記事リストを表示する方法について検討しました。

fgsfgsdf

しかしながら、上記の方法の場合、CSS の追加が必要となるため、カスタムデザイン等($ 30/年~)にアップグレードする必要があります。

adfasfasd
Custom Design | WordPress.com Store

しかし、また、どこかのブログサービスに引っ越す可能性があったり、ブログ自体になじんでおられない方などにとっては、いきなりの出費には抵抗があるかもしれません。

そこで、CSS の追加をしなくても、サムネイル画像付きの最近記事リストを表示できないか検討した結果、いくつかのテーマについてはある程度可能であることがわかったので、その覚書です。

なお、サムネイル画像付きでなくてもよければ、「最近の投稿ウィジェット」を使えば、最近の投稿のリストをサイドバー等に表示することは可能です(カテゴリー「「最近の投稿」ウィジェット」等参照)。

fgdgsdfg

まず、「設定」→「メディア」の

dfsdfdsa

「画像サイズ」→「中サイズ」のところでサムネイル画像のサイズを調整します。この値はテーマ毎に調整が必要だったりします。なお、サイズを変更してもすぐにブログの表示には反映されませんので、その点、注意が必要です。

fsdfds

「変更を保存」ボタンをクリックして、変更内容を確定させます。

asdfsfds

次にテキストウィジェットに以下の記述をコピー&ペーストします(「先頭に固定表示」を使っている方は、さらに「author=”(ユーザー名)”」を追加)。

<div style="overflow:hidden;">
<div style="margin-left:0;">[display-posts image_size="medium" posts_per_page="1" include_excerpt="true" include_date="true" date_format="Y年n月j日"]</div>
 
<div style="margin-left:0;">[display-posts image_size="medium" offset="1" posts_per_page="1" include_excerpt="true" include_date="true" date_format="Y年n月j日"]</div>
 
<div style="margin-left:0;">[display-posts image_size="medium" offset="2" posts_per_page="1" include_excerpt="true" include_date="true" date_format="Y年n月j日"]</div>
 
<div style="margin-left:0;">[display-posts image_size="medium" offset="3" posts_per_page="1" include_excerpt="true" include_date="true" date_format="Y年n月j日"]</div>
 
<div style="margin-left:0;">[display-posts image_size="medium" offset="4" posts_per_page="1" include_excerpt="true" include_date="true" date_format="Y年n月j日"]</div>
</div>

awfdasdfdas

以上の設定をすると、例えば、テーマ「Titan 」の場合、以下のような感じで最近の投稿リストが表示されます。

sdfsadfsd

テーマ「Zoren 」の場合はこんな感じ。

sdafasdfsd

テーマ「Twenty Ten 」の場合はこんな感じです。

Safari

なお、例えば、テーマ「Twenty Eleven 」などのようにサイドバーでの表示は OK でも、

asdfadfas-2

iPad 等で以下のような感じで表示が崩れてしまうものもありますので、このような場合には CSS を追加するか、「最近の投稿」ウィジェットを使用するか、といった方針変更が必要になるかと思います。

sdgfsfsd

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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