WP有料テーマであるSANGOはカードタイプなどのアイキャッチ画像は全て520×300で表示されています。
16：9ですね。
これを1：1の表示にしたいと思います。
今回は500×500で表示するように設定しています。
サイトイメージ
イメージとしてはこんな感じです↓
管理人の別サイトですが、イメージとして参考にしてみてください。
子テーマを使用する
親テーマを直接編集するのではなく、子テーマを使用してください。
公式サイトからダウンロードできます。
PHPを編集する
ここではアイキャッチの画像サイズを変更する場合、cssではなくPHPを編集します。
私の素人なので長らく模索しました。
子テーマにあるfunction.phpに下記のコードをコピペしてください。
※記事下の関連記事も正方形になります。
※500×500の場合↓
//サムネイル画像サイズを変更
function replace_thumbnail_src($src,$size) {
$width = ""; $height = "";
if($size == "thumb-160" ) {
$width = "160";
$height = "160";
}
if($size == "thumb-520" ) {
$width = "500";
$height = "500"; //widthと数字を合わせると画像が1:1の比率になる
}
if ($width && $height) {
$search = array('.jpg','.jpeg','.png','.gif','.bmp');//画像拡張子
$replace = array();
foreach ($search as $ext) {
$replace[] = '-'.$width.'x'.$height.$ext;//トリミング後の画像パスに置き換え
}
$replaced_src = str_replace($search, $replace , $src);
}
return $replaced_src;
}
function my_change_thumbnail_size() {
add_image_size( 'thumb-520', 500, 500, true ); //2つの数字（520）を合わせると画像が1:1の比率になる
}
add_action( 'after_setup_theme', 'my_change_thumbnail_size', 11);
//END サムネイル画像をオーバーライド
元はwidthが520、heigthが300になっているのでそこを500にしています。
お好きな数字を入力してください。
CSS
CSSは以下を外観＞カスタマイズ＞追加CSSに記入してください。
.cardtype__img {
padding-bottom: 100%; /*縦横比1:1の場合は100%*/
}
※公式サイトのQ&Aを参考にしています。
その他のデザイン
その他のデザインはCSSで変更しています。
もっと細かく知りたい人は、気になる部分で【右クリック】から【検証】でCSSやHTMLが見れるので確認してみてください。
そのほか、コメントでも受付中です。