プログラミングに関する試行錯誤の記録を残します。ScriptPythonJavaScriptPHPWordPressのアイキャッチが切れてしまう現象の原因と対応2020.01.05IT系の雑記HOMEIT系の雑記WordPressのアイキャッチが切れてしまう現象の原因と対応WordPressでブログを書いていると、読者に記事の内容を一発で伝える為、あるいは読者の目を引く為にアイキャッチというものを作成します。このアイキャッチですが、記事一覧で表示された時に上下左右が切れてしまうという現象がありました。こちらの原因と対策についてシェアします。いうテーマを使っている為、別テーマを使用しているブログでは有効ではない場合があります。メディアは、モバイル端末での表示を早くするAMPに標準対応。SEO最適化済みで、レスポンシブデザイン。WordPressテーマです。現象としては以下の通りです。横1000px]で作ってみます。すると、記事作成時のアイキャッチ画像設定画面では以下のように表示されます。よし、全体が表示されており問題無さそうに見えます。それでは念の為プレビュー画面でも確認しておきましょう。すると、なぜか上下が切れています。(プレビューで画像が切れているということは記事一覧でも切れている。横730px]と指定されている模様。これは先ほどのアイキャッチの設定画面でも示されています。横1000px]の画像は上下が切れてしまっていた。アイキャッチの画像の上下が切れないようにするには?では画像のリサイズによって画像の上下が切れないようにするにはどうすれば良いかというと、リサイズされないようにすれば良い。横730px]のサイズでアイキャッチを再作成してみます。アイキャッチ画像指定部分では上下は切れていない。問題はプレビュー画面でどうなるか、です。プレビュー画面では以下のように表示されます。上記の通り、指定サイズのアイキャッチ画像を作成すれば自動リサイズは行われず、画像の上下が切れない事がわかりました。縦横の比率を保ったサイズであれば大きくても(小さくても)良い?結論から書くと、比率を保っていれば問題ないと言えます。比率を保っていれば推奨サイズより大きい場合は縮小され、推奨サイズより小さい場合は拡大されますが、上下が切れる事はありません。念の為、推奨サイズより大きい場合/小さい場合を確認してみます。横1000px]でアイキャッチ画像を作成。プレビュー画面では以下の表示となります。自動でリサイズ(縮小)され、全体が表示されています。横600px]でアイキャッチ画像を作成。プレビュー画面では以下の表示となります。自動でリサイズ(拡大)され、全体が表示されています。投稿一覧SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#ができます。現在はVue.js、Python辺りを勉強中です。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。お問い合わせのページからご連絡下さい。2019.09.08正確には、見れるけど、ちょくちょく止まるという方向けの記事です。2019.09.15Gmailは独自のアルゴリズムで迷惑メールを判定し、迷惑メールフォルダに振り分けてくれる。2020.02.05タイトルの件について、ファイルのやり取りができなかったので方法を模索してみました。インストールすればクリップボードの共有[...]スポンサーリンクプロフィールNaoki(@nkwtnb)SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#/Vue.js/Python/etc...作曲/編曲もします。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。記事の内容について問い合わせ等ございましたら、お気軽にTwitterのリプかDM、またはお問い合わせのページからご連絡下さい。Ganttプラグインを使ってみた感想。