はい、こんにちは。
みなさん、Googleの無料ブログサービス「Blogger」は使っていますか？
無料なのに勝手な広告が入らなくて、SSL化（https）にすることもでき、画像容量が無限...
メリットが多く、素晴らしいブログサービスです。
そんなBloggerですが、画像サイズ（画像の幅など）で困ったことが少々あったので、その問題点、および、解決策をご紹介させていただきます。
僕と同じように困っていた方がいらっしゃいましたら、ぜひ参考にしてください。
では、具体的に何が問題なのかということについて話していきます。
画像の幅が合わない
通常、ブログやホームページに画像を貼り付けるとき、画像の幅を指定して、はみ出ないようにし
ますよね。
まあ、Bloggerでも同じはずです。
画像を挿入する際、このような画面が出てきます。
ここで、小・中・大・特大からどれかを選べば、そのサイズの幅にしてくれそうです。
が、しかし。
しかしですよ。
ここでサイズ指定してしまうと、表示される画像の画質が劣化してしまうのです。
困りましたね。
じゃあ、どうするのか。
画像を挿入した後、その画像のimgタグの属性として、「width="640"」みたいに指定してやれば、画質の劣化を抑えつつ、画像サイズを設定
できま す。
（ちなみに、ここで指定した640というのは、bloggerの記事で表示できる画像の最大幅となります。
640px以上の画像ははみ出ます。）
しかし、これでもまだ問題があるのです。
その問題点は主に2つです。
まず、1つは、
いちいちwidthを入力するのが面倒くさい
まあ、しょうもない理由ですが一応書かせてもらいます。
画像が少ししかない場合はいいんですよ。
でも、貼り付ける画像の数が増えれば増えるほど、この作業が大変に感じるようになっていきます。
普段からタグ打ちでブログ書いている人からしたら、あきれるでしょうね。
そして、2つ目は、
スマホ表示だと、画像幅を最大にしても80%くらいしか表示されない
これがなかなか厄介です。
せっかく大きな画像を表示したくても、実際表示すると、小さくなってしまうのですから。
PC版表示ならあまり気にならないんですよ。
しかし、スマホだと、ただでさえ幅が狭いのに、8割が最大幅って...
かと言って、
画 像幅を「width="640"」以上に設定したり、元のサイズの画像を貼ったりすると、PC版表示では、はみ出ます。
スマホ表示では、640px以上の画像幅でも勝手に縮小され、良い感じのサイズに表示してくれるのですが。
こういった問題が、Bloggerの画像表示には潜んでいるのです。
でも、解決方法は簡単です。
今から紹介する設定をするだけで、「PC版で画像がはみ出ること」も「いちいちwidthを設定するのが面倒くさいという問題」も「スマホだと最大幅
に設定し ても8割くらいしか表示されないこと」も全部解決できます。
では、やっていきましょう。
解決策
まず、Bloggerの画面から、「テーマ」⇒「カスタマイズ」を選びます。
そこで、「上級者向け」というところを選び、下の方までスクロールしてください。
「CSSを追加」というのが出てくると思います。
ではそこの一番下の行に、以下のコードを貼り付け、「ブログに適用」を押してください。
これで完了です。
div.separator img {
max-width: 98%;
height:auto; }どうでしょうか、簡単だったと思います。
このCSSは何をしているかと言いますと、どんな画像を貼っても、画面幅の98%より大きくな
らないよ うにしています。
また、高さは自動的に調節されます。
つまり、もう画像幅をいちいち設定しなくても、画面からはみ出るなんてことは起こらなくなったわけです。
そして、画像幅を設定しないわけですから、スマホ表示でも98%までの大きさにしてくれます。
（ただし、それは貼った画像のサイズが640px以上だった場合です。
250pxとかの画像を貼っても、250pxのまま表示されます。
画面いっぱいに表示したい場合は640px以上の画像を貼ってください。）
ただ、あまりにも大きい画像を貼るのはやめましょう。
読み込みに時間がかかってしまいます。
ちなみに、98%という値は、好みの値にしてもかまいません。
100%だとゆとりが消えます。
以上です。
ありがとうございました。
さようなら。
またお会いしましょう。
