「SANGOのカスタマイズ」サムネイル画像を正方形から長方形にしてみた

「SANGOのカスタマイズ」サムネイル画像を正方形から長方形にしてみた

まこさん

こんにちは。「家族で子育てを考える」のまこさんです。

 

この記事は、SANGOユーザー向け
  • サムネイル画像をデフォルトの正方形から長方形にしたい
  • サムネイル画像を長方形にしたけど、サイズ感が微妙だなと悩んでいる

 

WordPressテーマ、人気上昇中の「SANGO」を使っているユーザー向けの記事です。

参考 心地よいWordPressテーマSANGO

① WordPress 初心者

いきなり保険かけるようで申し訳ございませんが、わたしはWordPressを始めて1カ月ばかりです。

まこさん

html、cssってなんですか?

こんな状態でブログをスタートしています。

詳しいカスタマイズ方法は答えられませんし、コーディングを独学で勉強中のため、下手なやり方があるかもしれません。

あきさん

いきなり、言い訳ばかりじゃん!

ただWordPress初心者だからこそ書けるカスタマイズ記事はあると思います!

初心者のわたしができたからこそ、誰でもできるカスタマイズ方法を共有します。

もしかしたら、「簡単すぎて他のSANGOユーザーさんは書かなかったり」、「わたしと同じような初心者さんは困ってたりするかも!?」

と、想定して書きました。

② サムネイル画像を長方形にしたい

わたしはこんなことで困っていました。

まこさん

スマホ用ハンガーメニューのサムネイル画像を、デフォルトの正方形から長方形にしたい!

カスタマイズ方法を調べてみたら、やはりあるではないですか!

参考 SANGOについてのよくある質問SANGO

初心者にも分かりやすい説明で、記事の内容が豊富で丁寧。困ったときは、SANGOのカスタマイズガイドですね。

よくある質問の、「正方形のサムネイル画像を全て長方形で表示させたい」を参考にして、記載されているコードをコピペしました。

function.php
//サムネイルサイズを変更 function my_change_thumb_size() { 
 add_image_size( 'thumb-160', 160, 92, true ); 
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11); 
//END サムネイルサイズを変更
MEMO
わたしはブログを始めたばかりのため、Regenerate Thumbnailsのプラグインで画像を再生成する必要がありませんでした。プラグインが必要な方は、SANGOのよくある質問ページをご確認ください。

サムネイル画像の編集後は、こんな感じになりました。

サムネイル画像を長方形にしてみた

スマホ用のハンガーメニューのサムネイル画像が、バッチリ長方形になってくれました!

 

③ グレー枠が気になる!

「サムネイル画像が無事に長方形になった」と喜んでいたら、あるグレーの余白に気付きました。

サムネイル画像のグレーの余白

「このグレーの余白は何?そうゆう仕様なんかな?」

サムネイル画像のサイズが少し小さく見えるし、すごく気になる。

④ 中の人に聞いてみた

色々と試行錯誤すること数時間。。。

これはダメだ。調べても分からない。。。

「SANGOの中の人に聞きたいなぁ。」

「でも忙しいだろうなぁ。」

と葛藤しつつ、わたしの今の知識ではどうにもならなかったため、申し訳ない気持ちで聞いてみた!

すると、中の人からこんな返事がすぐに来ました。

まこさん様

お世話になっております。

・枠線を消す方法
.my-widget__img img {
border:none!important;
}

で消えるかと思います。

神対応です!

本当にユーザー想いですね!

SANGOを買って良かった」と改めて思った出来事でした。

まこさん

ありがとうございます。

 

⑤ グレーの余白が消えた

さっそく教えてもらったコードをコピペしてみました。

CSSで枠線を消す方法
.my-widget__img img {
  border:none!important;
}

違いに気付きますでしょうか?

サムネイル画像のグレーの余白が消えた

サムネイル画像からグレーの余白が消えた

編集後のスマホ用ハンガーメニューでは、グレーの余白がバッチリ消えました!

良かった良かった。

色設定によっては
グレーの余白部分の色が異なるかと思います。
他にも
関連記事の余白も、同様に消えています。

⑤ 長方形のサムネイル画像を大きくした

一回でやり取りが終わるように、中の人にもう1つ質問していました。

まこさん

長方形のサムネイル画像を大きくするには、どうしたらいいですか?

中の人の回答がこちらです。

・画像サイズを大きくする方法

#drawer__content .my-widget li a .my-widget__img {
width : 120px;
height: auto;
}

数字は必要に応じて調整して頂ければと思います。

よろしくお願い致します。

こちらのコードもコピペして、子テーマを編集しました。

CSSで画像サイズを大きくする方法
#drawer__content .my-widget li a .my-widget__img {
   width : 120px;
   height: auto;
}

サムネイル画像を少し大きくしたら、こんな感じに仕上がりました。

サムネイル画像を少し大きくしてみた

いい感じです。

アイキャッチ画像を目立たせたいため、納得のいくデザインになりました。

 

【まとめ】SANGO 長方形のサムネイル画像

今回行ったSANGOのカスタマイズは、全部で3つです。

1つ目
正方形のサムネイル画像を長方形にしたこと
function.php
//サムネイルサイズを変更 function my_change_thumb_size() { 
 add_image_size( 'thumb-160', 160, 92, true ); 
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11); 
//END サムネイルサイズを変更
2つ目
サムネイル画像のグレーの余白を消したこと
CSSで枠線を消す方法
.my-widget__img img {
  border:none!important;
}
3つ目
長方形にしたサムネイル画像のサイズを大きくしたこと
CSSで画像サイズを大きくする方法
#drawer__content .my-widget li a .my-widget__img {
   width : 120px;
   height: auto;
}

わたしが参考にしたSANGOのよくある質問のリンクを、最後にもう一度貼り付けます。

SANGOについてのよくある質問

また子テーマの編集前は、必ずバックアップを取ってください。

最後になりますが、この場を借りて中の人にお礼を言わせてください。

「ありがとうございました。」

わたしが中の人の姿勢に驚いたのが、最後のこの返信です。

「イメージ通りに無事に編集できた」とメールで返信すると、

まこさん様

イメージ通りになったようで、良かったです!

カスタマイズ記事を書いて頂けるとは、大変嬉しく思います。

今後ともよろしくお願い致します。

最後まで気にかけていただき、メールをくださりました。

とても丁寧な対応でした。

個人的にはhtmlとcssをもっと勉強して中の人に聞かなくてもいいようになりたいですね。

まこさん

よーし、がんばるぞ!

もしもお時間あれば、合わせてこちらもお読みください。

ブログ初心者が副業ブログで成功する方法をあえて今考えた ブログ初心者が副業ブログで成功する方法をあえて今考えた