WordPressトップページの
カスタマイズ第2弾です。
第2弾のテーマはこちら。
トップページの記事一覧の
画像を綺麗に表示すること
早速ですが、今回も設定方法や
変更するまでの経緯について、
まとめていきます。(｡+･`ω･´)ｷﾘｯ
本設定はアイキャッチ画像を
トップページに表示させる設定を
行っていることが前提となります。
詳しくはこちらを参照ください。
テーマは「Twenty Seventeen」を
利用しております。
目次
WordPressカスタマイズ
〜トップページの記事一覧の
画像を綺麗に表示する〜
1. 経緯：バランス悪し
2. やり方：画像設定
3. まとめ：改善された点
1. 経緯：バランス悪し
まずは経緯になります。
第1弾で記事内容を省略して
抜粋表示と続きを読むに
なるよう変更を加えました。
この変更直後に思ったこと。
画像と文章のバランスが悪い！
具体的にはこの2点です。
1. 画像と文章が横に綺麗に並ばない
2. 画像と文章が縦に並んでしまう
なんかダサイですよね。
折角使いやすさを求めて
変更したのにこれじゃあ
見た目的にかなり微妙です。
そこでトップページの画像を
綺麗に表示できるよう更なる
カスタマイズをすることに。
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。
このサイズがズレていると
表示が崩れる場合があるので
注意が必要です。(｡ ･ω･))ﾌﾑﾌﾑ
3. まとめ：改善された点
今まであまりアイキャッチ画像を
使用していなかったこともあり、
設定し直すのはかなり大変でした。
ただ苦労の甲斐あって綺麗な表示に。
またアイキャッチ画像を整えたことで
トップページ以外も改善されました。
・トップページの記事一覧
・検索結果の記事一覧
・埋め込み記事（embed）
・よく読まれている記事
・最近の投稿
素晴らしい付随効果です。
なかなかメリットがあると思うので、
まだ利用されていないという方は、
この機会に見直してみても良いかも。
