[WordPress]トップページの記事一覧の画像を綺麗に表示

[WordPress]トップページの記事一覧の画像を綺麗に表示

WordPressトップページの
カスタマイズ第2弾です。

第2弾のテーマはこちら。

トップページの記事一覧の
画像を綺麗に表示すること

早速ですが、今回も設定方法や
変更するまでの経緯について、
まとめていきます。(。+・`ω・´)キリッ

本設定はアイキャッチ画像を
トップページに表示させる設定を
行っていることが前提となります。

詳しくはこちらを参照ください。

[WordPress]アイキャッチ画像をトップページに表示させる

テーマは「Twenty Seventeen」
利用しております。

目次

WordPressカスタマイズ
〜トップページの記事一覧の
 画像を綺麗に表示する〜

1. 経緯:バランス悪し
2. やり方:画像設定
3. まとめ:改善された点



1. 経緯:バランス悪し

まずは経緯になります。

第1弾で記事内容を省略して
抜粋表示と続きを読むに
なるよう変更を加えました。

[WordPress]トップページの記事を省略!続きを読むに変更

この変更直後に思ったこと。

画像と文章のバランスが悪い!

具体的にはこの2点です。

1. 画像と文章が横に綺麗に並ばない

2. 画像と文章が縦に並んでしまう

なんかダサイですよね。

折角使いやすさを求めて
変更したのにこれじゃあ
見た目的にかなり微妙です。

そこでトップページの画像を
綺麗に表示できるよう更なる
カスタマイズをすることに。

▲ TOPへ戻る

2. やり方:画像設定

自分は2つの設定変更しました。

・トップページの画像サイズを設定
・アイキャッチ画像のサイズを設定

トップページの画像サイズを
指定して表示させるには、
「functions.php」を編集します。

<追加コード>
add_image_size( 'eyecatch', 200, 200, true );

このコードを最後尾に追加すればOK。
自分は200×200サイズにしました。

「Twenty Seventeen」だと
このサイズがバランス良いかも。

最後のtrue、falseは画像を
切り抜くかどうかの設定です。

次にアイキャッチ画像の
サイズを設定します。

最も確実なのは指定サイズに
合わせた画像サイズにすること。

自分の場合だと200×200です。

ただ縮尺調整をしてくれるので、
300×300、600×600などでもOK。

このサイズがズレていると
表示が崩れる場合があるので
注意が必要です。(。 ・ω・))フムフム

▲ TOPへ戻る

3. まとめ:改善された点

今まであまりアイキャッチ画像を
使用していなかったこともあり、
設定し直すのはかなり大変でした。

ただ苦労の甲斐あって綺麗な表示に。

またアイキャッチ画像を整えたことで
トップページ以外も改善されました。

・トップページの記事一覧
・検索結果の記事一覧
・埋め込み記事(embed)
・よく読まれている記事
・最近の投稿

素晴らしい付随効果です。

なかなかメリットがあると思うので、
まだ利用されていないという方は、
この機会に見直してみても良いかも。

▲ TOPへ戻る