WordPressにてカテゴリ名をクリックすると、そのカテゴリの記事一覧が表示されます。

使用しているテーマによって見た目も大きく異なるのですが、テーマ「BizVektor」を使用した際の見た目も好みが分かれそうな感じではあります。

今回はサムネイル画像を右端ではなく左端に移動させる方法を記載します。また、左端にした際のテキスト回り込み方式を変えることで、スマホで閲覧した際の縦スクロール幅を短くできます。

修正箇所

まず修正箇所1つ目。カテゴリ一覧の各記事の表示を定義しているmodule_loop_post2.phpの最後のほうにある以下のソースの1~7行目を削除します。
[php]

[/php]
上のソースの1行目と2行目の間に先ほど削除したaタグの行を追加します。
[php]

[/php]

修正箇所3つ目は、拡張プラグイン「NEAT」のneat.css。もしNEATを使用していないのであれば、通常のstyle.cssで対処できるかもしれません。

neat.css内の.infoListBox定義の最後の部分で指定されている以下のコードを丸ごと削除します。
[php]
#content .infoList .infoListBox div.thumbImage { width: 35%; display: block; overflow: hidden; float: right; text-align: right; position: absolute; top: 20px; right: 0px; }

#content .infoList .infoListBox div.thumbImage div.thumbImageInner { display: block; overflow: hidden; margin: 1px; }

#content .infoList .infoListBox div.thumbImage div.thumbImageInner img { width: 88px; height: auto; border: 1px solid #cccccc; }
[/php]

そして、削除した部分に以下のコードを追加します。
[php]
#content .infoList .infoListBox img { float: left; width: 88px; height: auto; border: 1px solid #cccccc; margin-right: 8px;}
[/php]

修正箇所4つ目も同じくneat.css内の.infoListBox定義で、先ほどより少し前にある以下の行を修正します。
[php]
#content .infoList .infoListBox div.entryTxtBox.haveThumbnail { float: Left; margin-right: 100px; }
[/php]

単にこの中の100px部分を以下のとおり0pxに変えてあげるだけでOKです。
[php]
#content .infoList .infoListBox div.entryTxtBox.haveThumbnail { float: Left; margin-right: 0px; }
[/php]

修正結果

以上の修正によって、サムネイル画像が左側に表示されるようになります。

利点としては、タイトル、サムネイル画像、記事文面開始位置のすべてが近くに集結すること。視線を左右に移動させるような作りではなく、視線を左側に集中させやすい作りになるので見やすくなります。

もうひとつの利点は、スマホ表示のときにサムネイル画像が左に表示させておくと、テキストが画像の下に回り込んでくれる点。スマホは画面横幅がPCより狭いため、テキスト回り込みをしてくれたほうが見やすいです。

あとは個人の好みではあるのですが、見やすいサイトを心掛けて作っていくことが大事です。

最後まで読んでいただき、ありがとうございました。よろしければ当記事のシェアをお願いします。

written by 瀬下 照火(Akiho Seshimo)
国内旅行をこよなく愛する観光ブロガー。有名観光地だけでなくマイナースポットも巡り、個人旅行の新たな楽しみ方を追求。わかりやすく斬新な情報を心掛けてブログ記事を執筆。
全国各地のご当地グルメに目を向けるとともに、居住地域の飲食店巡りも実施。食べログでのクチコミ投稿も執筆活動の主軸のひとつとし、八王子多摩エリアの飲食店情報の最新化を心掛けている。