そうなってしまうと不格好にもなりますし、ブログサービスによっては、サイド部分のバナーな文字がそのはみ出した画像によって隠されてしまう場合もあります。
そういった問題は、画像のサイズを縮小して掲載すれば解決します。
画像を縮小する方法としては、ブラウザの表示サイズを縮小して、それをプリントして掲載するという方法もありますが、ブログのサイズに合わせるためには、ブログの記事（ソース）部分で縮小したほうが簡単でサイズも自由に設定できます。
その方法を紹介します。
縮小したほうがいい場合
たとえば、このブログのトップページの画像をそのままの大きさで掲載すると、こうなります。
サイド部分まではみ出してしまい、何が何やらわからない状況です。
でも、この画像のサイズを本文部分に収まるサイズへ縮小すると、このようになります。
※画像をクリックすると、別窓で元の大きさの画像が表示されます。
これだと全体像がわかりますし、細かい部分を見たければ画像をクリックして元の大きさの画像を表示させればOKです。
ソースを編集
この画像の縮小はどのようにやっているのかというと、ブログに貼り付けた画像のソースを編集しているのです。
最初に掲載した大きい画像のソースは、このようになっています。
※ソースが表示されるように一部変更してます。
＜a href="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" target="_blank"＞＜img src="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" alt="ブログ" border="0" width="999" height="608" /＞
画像のサイズを変更する場合、編集するのはこの部分
＜a href="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" target="_blank"＞＜img src="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" alt="ブログ" border="0" width="999" height="608" /＞
「width」・・・横幅
「height」・・・高さ
この両方とも編集してもいいのですけど、片方だけを編集して、もう片方は削除するほうが簡単です。
このブログの本文部分の横幅は・・・468
よって、「width="999"」 → 「width="468"」へと変更して、「height="608"」を削除すれば、本文部分にすっきりと収まるようになります。
「width="999" height="608"」 → 「width="468"」
変更前
＜a href="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" target="_blank"＞＜img src="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" alt="ブログ" border="0" width="999" height="608" /＞
変更後
＜a href="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" target="_blank"＞＜img src="http://blog-imgs-91.fc2.com/p/b/l/pblo1/201609132007530ae.png" alt="ブログ" border="0" width="468" /＞
【自分のブログの幅を確認する方法】
記事部分（メインカラム）の幅を確認するにはブログのCSSを見ればわかります。
ブログサービスによって表示は違うかもしれませんけど、FC2ブログの場合このような表示になっています。
全体の幅 #container {
width: 920px;
記事の幅 #main {
float: left;
width: 468px
サイドメニュー #sidemenu {
float: right;
width: 220px;
この場合、記事部分（メインカラム）の横幅は「468」ということです。
画像を拡大する方法
同じようにして、画像を拡大して掲載することができます。
その場合、ソースの数字を逆に大きくしてやればOKです。
ただし、この方法で画像を拡大すると、画像が粗くなってしまいます。
特に、小さな画像をめいっぱい拡大すると、かなり粗くなってしまいます。
こんな感じです。
もともとのサイズ
拡大すると
このように、かなり粗くなってしまいます。
画像を拡大する場合、私の経験からは、ブラウザの表示を拡大して、それをプリントしたほうが画像が粗くなりにくいみたいですね。
ただ、ブログの幅にきちんと合わせて拡大したい場合などは、ソースを編集したほうが簡単なので、拡大比率によって
・ソースを編集
・もともとの画像を拡大してプリント
のいずれかを使い分ければいいかなと思います。
- 関連記事
-
- ブログ画像を縮小・拡大する方法
- リンクを更新順に表示する
カテゴリ
タグ
None
