【WordPress】Twenty Sixteenで元画像が小さい画像をアイキャッチにした時、100%拡大表示させる方法

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-23-19-46-32-2

こんにちは。本日は、WordPressのTwenty Sixteenというテーマを使用する際、元画像が小さい画像をアイキャッチに設定した場合の、サイズ調整について書いてみます。

<スポンサードリンク>

アイキャッチ画像が小さいとダサい感じになる

Twenty Sixteenではアイキャッチが840pxで表示されるようになっているのですが、アイキャッチ画像が小さいと添付のようにダサい感じになります。

はじめからTwenty Sixteenを使用している場合は良いのですが、Twenty Sixteenに乗り換えた。という場合、過去の記事のアイキャッチがとても残念な感じになるというのが、今回取り組んだ課題感でございます。

(Before)
zu1

こんな感じで左に寄っています。アイキャッチに設定する画像が小さいと、小さいままで表示されてしまうという訳ですね。この隙間を横幅いっぱいの100%指定にして表示させたい!ということでいろいろ試してみました。

Twenty Sixteenのアイキャッチ画像を横幅100%にする方法

実際にこの編集を行うのは簡単で、下記のコードをスタイルシートにコピペしてもらえれば完了となります。

Twenty Sixteenでは「外観」→「カスタマイズ」→「追加css」にコピペするだけで実装できます。

実際にこちらのコードを入れたイメージがこちら。

(After)
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-27-0-40-45

やはり横幅いっぱいの方がフィット感がありますね。簡単なのでぜひ試してみてください。

注意1)こちらのコードは、画像を拡大表示させているだけなので、大きくなった分、画質は落ちます。元画像が小さすぎると荒い画像になってしまいます。

注意2)かなり我流なやり方かと思います。不具合などある可能性がありますので、事前にバックアップをお取りください。編集は自己責任でお願いします。

<スポンサードリンク>

おわりに

以上、【WordPress】Twenty Sixteenで元画像が小さい画像をアイキャッチにした時、100%拡大表示させる方法についてでした。

クライアントさんからブログのデザインを新しくしたい。と言われ、Twenty Sixteenを適用してみたものの、過去記事のアイキャッチ画像が小さくて困ったので備忘録として残しておきたいと思います。

何かの参考になれば嬉しいです。なお、Twenty Sixteenについては周りの枠の部分に関しても記事を書いています。よければこちらも合わせてお読みください。

【WordPress】Twenty Sixteenの縁?枠?の部分を太くする方法

2016.12.20

<スポンサードリンク>

\ シェア大歓迎です /
この記事を書いた人
みやも
92年生まれの20代悩みの絶えないブロガーみやもです。元気がない時、勇気が出ない時、そんな時にそっと寄り添えるブログを作っていきたいと思っています。
関連記事