こんにちは！荒川編集室代表荒川です！
以前、twitter投稿時のサムネイル画像の見切れ（画像が前後左右にはみ出してしまうこと）問題について、記事にしました。
↑すみません^^;リンクの画像が見切れてしまっています。今度こちらのほうも研究いたします。
そして、記事が増えていく中で、ふと、記事一覧を見返してみたら・・・思い切りサムネイル画像が見切れてしまっていました^^;
なんだか、灯台下暗しと言いますか、twitterの画像を考える前にてめえのサイトの画像なんとかしろよ！とツッコミを自分自身で入れる思いでした。
以前、見切れないように設定していたのですが、サイトトラブルでテーマを再インストールしたため、この問題が発生したのです。はて、どうやって設定したかな？と。すっかり忘れてしまっていました。
今後、再び同じ問題が起きたときの対処用に、そして、同じ問題で悩んでいる方のために備忘録的に記事にいたします。
注意ですが、WordPressテーマ「STORK19」以外をお使いの人には、全く意味がございません。最初に書いておけばよかったですがごめんなさい。
画像を設定するには、CSSをいじる必要がある
CSS・・・なんやら、聞くだけで嫌気がさしてしまいます。ですが、実は、今回の不具合に関しては、ここで解説する事を忠実にやれば、必ずできます。なんてったって、同じ「STORK19」を使っているのですから
（われわれド素人からすると）難しいことをやろうとしています。書いているわたし自身、深い知識はありませんし、どうして、設定できてしまうのか理解していません。
では、なぜできるのか・・・？
それは、「STORK19」のホームページにちゃんと、対応方法が公開されているからです。
STORK19でアイキャッチ画像の比率を変更する方法（外部リンク）
若干（めちゃくちゃ）素人にはわかりにくいです。このページを見て正しく設定できる初心者の方は少ないでしょう。
ワチャワチャいじくりたおしてやっとのことで解決しましたので、（できるだけ）丁寧に解説していきます。
目次に戻る←←←設定はカスタマイズから行う
CSSというと、ダッシュボードの外観から、テーマエディターからと思われるかもしれません。
テーマエディターと聞くと、初心者には、とても敷居が高いです。
ですが、今回の不具合に限っては、テーマエディターは使わなくて大丈夫です。
画面の左上にある、カスタマイズから設定ができますのでそちらを開いてください。
カスタマイズを開いたら、一番下の「追加CSS」を開いてください。
そして、次のコードをコピーして、貼り付けます。手打ちしてはいけません。コピーアンドペーストです。
このコードは、「STORK19」のホームページから引用させていただいています。
.eyecatch.of-cover::before {
content: “”;
display: block;
padding-top: 62.5%;
}
そして、「62.5」という数字をいじって、お好みのサイズに調整してください。
わたしの場合は、数字を小さくして横長にして解決しました。100%で正方形になります。
わからなければ、数字をいろいろいじってください。数字をいじると、右側のページが変わりますので直感的にわかると思います。
まとめ
「追加CSS」をつつくことで、画像の見切れ問題が解決しました。
設定によっては、縦長にしたり、正方形にしたりできますので、いろいろお試しください。
「STORK19」という非常に限定的な記事ですが、どなたかの参考になれば幸いです。
目次に戻る←←←
コメントを残す