正方形では困る
Bloggerに人気の投稿を追加すると、画像は勝手に正方形になってしまいます。せっかくブログに、長方形の画像を載せているのに、左右(上下)を切られて、正方形になってしまいます。
正方形でも、問題ない画像もあれば長方形でないと意味が分からなくなってしまう画像もあります。私の画像も、その1つで、長方形でないと文字が切れて意味が分からなくなるし、かっこ悪くなります。
これでは困るので、人気の投稿の画像を長方形に変更します。
人気の投稿のコードを探す
テーマからHTMLの編集をして、下記のコードを探してください。
<b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts' version='1'>そして、そのコードから下で、1番近くの下記のコードを探してください。
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>1つ目のコードは、変更しません。2つ目のコードが複数ある場合があるので、1つ目のコードを手掛かりに探します。
コードがある場所は、人によって違うのでココですよ！とは、言えませんが、私の場合は、2つのコードは、全コードの下の方にありました。ウィジェットへ移動で探したら、PopularPosts1にありました。
1つ目のコードから28行下に2つ目のコードがありました。
このコードを少し変えれば、人気の投稿の画像を変更できます。
画像を長方形にする
以下のコードの1:1のところを変更します。
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>1:1は表示する画像の横と縦の比率です。上記のコードでは1対1(正方形)で表示する設定になっています。
ここに、自分のブログに使っている画像の比率を入れます。
私のブログは、横300px×縦200pxの画像を使っているので比率は3:2になります。なので、この比率を入れると下記のようなコードになります。
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "3:2") : data:post.thumbnail' var='image'>これで、画像を長方形にできました。次は画像サイズを変えます。
画像サイズを大きくする
今のままでは、画像が小さいと思ったら画像サイズを変えます。
下記のコードの72という数字を大きくします。
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "3:2") : data:post.thumbnail' var='image'>画像を、幅いっぱいに大きくするときはプレビューを見ながら大きくしていってください。はみ出したら、数字を小さくしてください。
私のブログの場合は、250を入れたら、サイドバーの幅にピッタリでした。なので、コードは下記のようになります。
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 250, "3:2") : data:post.thumbnail' var='image'>変更できたら、保存を押して完了です。
コードの変更は、バックアップを取ってからしましょう。自己責任でお願いします。
