WordPressテーマ「AFFINGER5・WING」を使っているのですが、
テーマをアップデートし、サムネイルのデザインを変更したところ見栄えが悪くなってしまい直すことに。
今回は、サムネイルを横長に表示させる設定についてのお話。
画像のリサイズも行いましたので、作業の流れをまとめました。
AFFINGER5のサムネイルデザイン
AFFINGER5の各記事一覧で表示するサムネイルデザインです。子テーマや設定によっては反映されないデザインもあります。
サムネイルのデザインによっては、前もって作った画像に文字が入っている場合見切れたりするので、サムネイル作成の際に注意が必要です。
丸くする
ポップなサイトにぴったりな丸表示。
なぜか楕円になってるのもありますが、元の画像サイズが悪いのかもしれません。
正方形にする
アイキャッチを考えて作ってしまったので、文字が入りきれないという状態に。
写真のみ、またサイズを考えてサムネイルを作ればCDジャケットのようにも見えます。
メディア設定にする
アップロードした元サイズのまま表示されます。
フルサイズで読み込まれる為、表示速度に影響がある場合があるので、キャッシュ系プラグインなどを併用すると良いそうです。
アップロードしたサイズがバラバラだと私のように、バランスの悪い表示になってしまいます。
AFFINGER5のサムネイルを横長にする。
正方形表示になっていたものを今回「横長」に表示させることにしました。
WordPressの「メディア設定」にてサムネイルのサイズで作成したサイズ（原則として縦横比に対する反映）で表示します。
まずWordpressの「設定」→「メディア」を開きます。
画像サイズの項目の「サムネイルのサイズ」を変更します。
幅は通常で100px以上、大きくする場合は150px以上を推奨していますが、ここを「幅：300 高さ：185」に変更しました。
最後に「メディア設定」ページ一番下にある。「変更を保存」をクリックします。
次に「AFFINGER管理」→「デザイン」のを開きます。
「サムネイル画像設定」の項目で「各記事一覧で表示するサムネイルデザイン」から「メディア設定にする」を選び、保存します。
古いサムネイルのサイズ修正
過去記事などの古いサムネイルはサイズの修正が必要です。
WordPressプラグイン「Regenerate Thumbnails」で行いました。
「Regenerate Thumbnails」は、アップロード済みのサムネイル画像を一括して生成し直すことができます。
インストールから使い方まではこちらをご覧ください。
WordPressプラグインで今までの画像を一括でサイズ修正する
まとめ
メディア設定の修正、画像のリサイズが終わったら作業は完了です。
サイトを見て変更されているか確認します。
写真が同じ大きさで表示されました。
もし、変わらなければキャッシュクリアしてみてください。
