[初心者向け]年間853記事書いて気づいたこと

ワードプレステーマ、SANGO(サンゴ)のサムネイルを長方形から正方形にする方法

サムネイルの形を変える

今多くの人が使っているテーマであるSTORK(ストーク)から移動した人は、サムネイル画像も長方形で作っている人が多いですよね。なので、SANGOテーマに変えた時には正方形に変わってしまうと、見た目がちょっとブサイクになってしまうこともあります。用意してある子テーマダウンロードをして、簡単に変えることができるので、ご紹介をしていきます。

どういう状態か

 

こういう真ん中に寄っている絵や文字はいいけども。

サムネイル

こういった写真や絵全体に文字を入れた場合ははみ出まくります。

サムネイル

もともとSTORK(ストーク)を使っていたことも理由の一つですが、あっちのテーマではサムネイル自体が長方形だったので、長方形で大きくダイナミックに作っていました。

が、しかし!

SANGO(サンゴ)ではサムネイルが正方形。こうしてはみ出る人生を歩むことになったわけですね。

で、早速調べる。

むむっ!?

検索しようにもなんと検索すればいいかわからない!

こうして僕はサルワカさんの質問コーナーにも書いてあるのにもかかわらず、調べるのに時間を食うのであった。そしてやっとたどり着く。噂の質問コーナーはこちら。

SANGOについてのよくある質問(随時更新)

 

デフォルトでははみ出てしまった写真、画像が人気記事や最近の記事(新規記事)の一覧に表示されることになります。

別にかっこ悪くはないのだけども、せっかく今まで作った(そんなに時間かけてないけど。僕は。笑)写真なのだから、見せたいなって無駄にも思いました。

やっぱり人間ってわがままですね。大した腕もないくせに。(自嘲気味)

見てみると、用意された子テーマをいじると簡単に直すことができるそうで!ラッキーマン!

変更前

見事にサイズが変更になりました。saruwakaさんの説明の仕方素晴らしくわかりやすいっす。

サイズ変更のコードだけでなくプラグインでサイズを変更したメディアデータの取得が必要になるので、気をつけてくださいね!

 

では、

やった手順、工程を書いていきます。でも質問コーナー見た方が早いかもしれませんよ?笑

子テーマをダウンロードする

 

まずは、子テーマをダウンロードします。

WordPressで子テーマを活用して安全にカスタマイズを行う方法/サルワカ

サルワカさんのカスタマイズ一覧から見れるので、もはやそれを見ながらであれば出来るのではないかと思う始末。でもここまで書いたから最後まで書かせてください。笑

子テーマをダウンロードしたら、子テーマを有効化します。

子テーマ有効化

テーマの編集をする

 

 

    テーマの編集
次に外観からテーマの編集へと進みます。

デフォルトではCSSのコードが書いてあるスタイルシートページなので、右横にあるCSSの上にあるfunctions.phpシートへ移ります。

ファンクションシートへ移る

そこへ

コード
function my_change_thumb_size() {
 add_image_size( 'thumb-160', 160, 92, true );
 }
 add_action( 'after_setup_theme', 'my_change_thumb_size', 11);

を入力していきます。

すると多分こうなります。

ファンクション入力後

「その他の質問」から正方形のサムネイル画像を全て長方形で表示させたいの欄にコードが書いてあります。

プラグインで長方形用の画像を生産する

 

このままTOPにいってもまだ変更はされていませんでした。長方形のサイズの画像を作っていないからなんですねえ。というわけでプラグインで作っていきます。

プラグインから、ONet Regenerate Thumbnailsをダウンロードしていただき、有効化をします。

プラグイン

ツールバーからRegen.Thumbnailsへ行き、Regenerate all thumbnailsをクリックします。

ツールバーから

生成ボタン

すると画像を自動生産してくれるので、しばし待ちます。

少し待ったら、はい、終了〜。

お疲れ様です!

変更後

 

するとこうなります。

変更後フッター

これで無事に変更終了です。

見事にサムネイルが長方形に変わっていました。それにしてもサルワカさんの記事は神様ですなあ。

簡単だけどfunctions.phpをいじる時は気をつけよう

 

変なところいじるとまともに映らなくなったりしたら、大変だから、基本はバックアップを取ってからやるとか、対策をうっておかないと何かがあった時に怖いので気をつけてください!

消えた経験がないと、この怖さはわからない…

読んでいただきありがとうございます!

コメントを残す

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