WordPress Lightning(無料版)で見切れたアイキャッチ画像を見栄え良くする方法

この記事は約 10 分で読めます。

WordPress Lightning(無料版)で見切れたアイキャッチ画像を見栄え良くする方法

こんにちは、Kasumiです。

このrelievedの、まだまだ未完成のサイトを作っている途中の、まさか初心者の私が「こんなようなこと言う(書く)のもなぁ...」と少し躊躇した気持ちがあったのですが、どうやってもなかなかそれらしい記事を見つけらないまま数日が経っていました。

WordPressについての項目を調べていると〝PHP〟とか〝function(テーマファイル)〟だとか〝CSS〟だとか、ちょっと聞き慣れない単語が容赦なく飛び交ってきます。

私はそういったスキルはなく基本ほとんどが力技です。

まだrelievedを開設したばかりということもあり「まっ、もし変な風になったらやり直そう」とある意味、無敵状態でいろいろ試せたのが良かったかも知れません。

該当する記事が見つからず「これかな?これかな?」とあらゆる手段を試したところ、ようやく解決したので「もしかしたらこの経験が誰かの役に立てるかも知れないな」と思いこの記事を書くことに至りました。

同じようなお悩みで迷っている方のなにかご参考になれば幸いです。

結論:手っ取り早く画像そのものの大きさを変えてみる

敢えて先に結論から言いますが、私の場合は〝手っ取り早く画像そのものの大きさを変えてみる〟という結論に達しました。

するとこうなります。

見切れていた画像サイズを1200×630 → 1200×742に変更

ちなみに私は画像のいろはなんかはまったく何もわかりません。

調べていくうちに〝何対何〟とか画像の比率(もはや「比率とは?」というレベルです)などという単語もいっぱい出てきましたが、そういったことの基礎もないので自分が実際に試していったことだけをお伝えしていきます。

私は元の画像をこのようにサイズ変更しました。

1200×630 → 1200×742

これだけです。

ここから先はどのようなきっかけでこの答えに至ったのかをもう少し詳細に、また自分への備忘録としてもずらずら書き込んでいきますのでよろしくお願いいたします。

なんだこれ?アイキャッチ画像が見切れるようになった

まずはこちらをご覧ください。

トップページ下部に設置している最近の投稿
記事内のサイドバーに表示されている最近の投稿

どちらもrelievedの〝最高の投稿〟という部分の画像なのですがアイキャッチ部分をよくご覧ください。

サイトを作り込んでいる途中に気付きました。

「ん?見切れてる?」

どういうわけか同じブロックを使っているのにも関わらず、トップページと投稿ページでは〝最高の投稿〟のアイキャッチ画像の見え方が変わってしまいます。

何故でしょう、、、

ちなみにスマホ(iPhone)でも同じ現象が起きていました。

スマホ:トップページ下部に設置している最近の投稿
スマホ:記事内のサイドバー(スマホだと下部)に表示されている最近の投稿

やっぱり記事内の〝最高の投稿〟部分のアイキャッチが見切れてしまいます。

遅れましたが前置きです(前提)

私はこのrelievedを作るにあたり、WordPressのLightning(無料版)というテーマを使っています。

今回この件で言う〝最近の投稿〟というのはLightningの標準?プラグインの中にある〝VK 最近の投稿〟というブロックのことです。

Lightningをインストールする時「Lightningを使うならこの3つのプラグインもインストールしてください」という中にあるものです。

ですが「これはあらゆる事象に対応するでのはないか?」ということ裏付けるような記事もみつけたので(あくまで私的にですが)もし良ければこちらも読める方は読んでみてください。

「おーっ」と納得いくことが書かれていると思います。▶︎▶︎こちら

私はサイト作り初心者ですが、一応今までにJIN、Cocoon、Luxeritas(ルクセリタス)というテーマは触ったことがあります。

ですので基本的な操作は「まだなんとか...」と言える領域ではあると思うのですが、内部をいじくるようなことはまったくです。

一度はプログラミングに挑戦したことがあるのですが、とてもじゃないですが「ちょっと今からは無理かな♪大丈夫♪大丈夫♪きっとなんとかなるよね♪」という感じですっぱり諦めてしまいました。

今回も調べていくと先ほどあげた〝PHP〟や〝function〟や〝CSS〟といった単語がずらりと並んでいました。

数多くのサイトを見ましたが同じ事象の方はいず、またこのLightningの無料版のテーマを扱っている人が少ないのか、推してる人はいっぱいいるんですけど出てくる情報ほとんどが有料版の方の内容だったんですね。

もしかしたらいつか私も有料版の方を使いたくなるかも知れませんが、今はこれで事が足りているとは感じているので、今はまだこのまま無料版の方を使っていきたいなと思っています。

もしこの件についてなにか「(私のWordPressの)ここの設定はどうなっているの?」とかそういうご質問があれば、わかることであれば何でもお答えしますのでお気軽にご連絡ください。▶︎▶︎こちら

こうなります!!

今までといってもまだ間もない期間ですが、冒頭で挙げたように私は今までのアイキャッチ画像のサイズを1200×630で設定していました。

何故かというと「だいたいの人がそう言っているから」という理由です。

正直私には〝SEO〟とかそういったことはよくわかりません。

なんとなく〝WordPress アイキャッチ 画像 サイズ〟などと調べていくと「迷ったら1200×630にしておけば問題ない」と書いてあったり、また「SNS等でリンクを貼ってもらった際にちょうどいいサイズで表示される」などという文面を多く見かけます。

私はそれを見て安易に鵜呑みにしていたのですが、、、鵜呑みにするだけではダメでした。

でも、これがダメということではないと思うんです。

私みたいにたまたま合わなかったという人がいたということだけだと思うんですね。

先ほどご紹介した記事には1200×630を〝無難〟とも称していました。

なのでそれで合う人もたくさんいるということだとも思います。

なのでどうか正解は1つとせず、いろいろな方法があるんだな♪くらいの1つの策に入れておいていただけたら幸いです。

こういったことがまったく気にならないという方もたくさんいらっしゃると思います。

しかし私は気になるのですね。。。

では先ほど見切れていたアイキャッチ画像のサイズを 1200×742に設定し直して再度アップロード。

画像サイズが変わるので、その際多少のバランス等も変わります。

するとこうなります。(PCスマホ共に結果同じです)

上:1200×630 下:1200×742

おおおーーー!!

これが私の求めていた完成系♡

ぴったし枠の中に収まりました。

やっぱりちゃんと表示されている方が気持ちがいいですよね。何より見栄えも良いです。

まとめ...といきたいところなのですが新たな問題発生

これにて一件落着♪

といきたかったのですが、ここで新たな問題が発生しました。

左/1200×742 右/1200×630

所定の場所のアイキャッチの見栄えは良くなったものの、今度は投稿記事下の方に出てくる〝前の記事〟と〝次の記事〟部分が見切れてしまいました。

この部分だけで言えば、対策前の1200×630サイズの方がぴったり、、、

うぅっ、なんでだろう、、、終わったのに、終わってない、、、

対策

これがきっと最初に言った〝PHP〟や〝function〟〝CSS〟と使えると「あらよ♪」とうまくいくのでしょうが、私にはそんな魔法が使えません。

ということで、またサイズをごちゃごちゃといじるよりも、画像の見え方そのものを調節する方が私には楽に感じたので、画像サイズは新サイズの1200×742を適応し、画像そのものの見え方を改善することにいたしました。

もともとこのような対策案もけっこう書かれていたので、ある意味さまよった経路があった故〝できること(アイデア)が増えていた〟ということでよしとしましょう♪

というわけで、タイトルや副題の見え方には問題なさそうだったので、画像に重ねている白い部分の幅を狭めてみるということで合点。

良くなったのかどうなのかは私にはよくわかりませんが、特に問題はないかなと感じたのでこれでよしと早速設定^^

1200×630の画像
元々の画像(1200×630)
白い部分を内側に狭めた新サイズ画像(1200×742)

すると、、、

見切れた感はなくなったかと。。。^^

こんな感じの見え方になりました。

これなら1200×630と然程見え方は変わりませんし、そもそもの〝最近の投稿〟の部分はちゃんと改善され、新たに起こった問題にも自分なりには対処できたと思うので「これでよし^^」とします。

まとめ

今回たくさんの方のご協力いただきました。(もちろん私の一方的ですが)

必死に調べては調べてはの繰り返しあまり全部は覚えていられなかったのですが、覚えているものだけでも後から探し出せたサイトさんorブログの方をここにまとめておきます。

私よりもよっぽど丁寧に且つわかりやすく書かれていると思うので、何かのきっかけでこちらに辿り着いた方、でも私の例では解決しなかった、そんな方の何かご参考になれば幸いです(。uωu)♡

お世話になった方々

こちらはLightningを開発したVectorさんのフォーラムに書かれてあったものです。
私はわけがわからなくともこちらに書いてあったコードを何度も貼り付けたり消したりしましたが(もちろんバックアップした後にです)たまにちょっと動きを見せるものもあったのですが、今回私の求めるこのような見せ方にはなりませんでした。
ですが、多くの方を対象としたコードが書かれているので見てみる価値があると思います。

また上記のフォーラムでは解決しなかったのですが〝横100:縦62〟というヒントがあり、そのヒントを頼りに突き詰めていくとJimdo研究所というところに辿り着きました。
こちらはやり方というよりはこの横100:縦62について「それって何ピクセルなの?」と私が〝1200×742 〟に辿り着いたヒントをくれたサイトさんでした。
すごいですね。10年前の記事でも今お世話になっている私がいるんです。なんだかそれってめちゃめちゃすごいことのように感じてしまいます。

そして念の為この〝1200×742 〟というサイズでWordPressをしてる人がいるのか?という疑問に答えてくださったのが最初にご紹介したWEBST8さん。

最後に、私がLightningを使うようになってから困ったらすぐに頼りに行くtakalogさん。
takalogさんは1200×630を推奨していて、こちらに書いてある内容を見て私も「なるほど」となっていて取り入れていました。サイト全体が画像で説明されていることが多く初心者の私でもとてもわかりやすいです^^
また今回、私はまだ初期の段階だったのでこの力技が通用したと思うのですが、もっとブログ等の記事数が多い方がもちろんそれに比例して画像も多くなると思います。そんな時の対処法も書かれていたりするので、ぜひLightningを使っている方、またこれから使ってみたいなと思っている人にもおすすめします。

皆さま本当にありがとうございました♡

さてさて、私も数枚とはいえ元の画像を作り直さなくてはいけないのでこれにてお暇いたします。

今日も最後までありがとうございました。

追伸
私みたいにパッとわからないと何度も同じ単語を入力して調べたりしますよね?
もしそんな方がいましたらMr.ズボラのKasumiがおすすめしたいとっておきの小技があります。
ユーザー辞書登録に〝わ〟と打ったら〝WordPress〟と出てくるようにしたり、〝わら〟と入れたら〝WordPress Lightning〟というような単語が出るように登録すると検索にかかる労力がぐんと減ります。
一字で変換させられるようにしておくこと楽ちんです♡ぜひ♪

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA