Blogger英語テンプレ日本語化２－投稿画像のサイズ調整

おすすめ記事ピックアップ

こんな感じで日本語化できます。

・海外テンプレートサイト
http://www.allblogtools.com/blogger-templates/2-columns/delicacy/?theme=demo
↓
・日本語化＆カスタマイズサイト
http://testblog0006.blogspot.jp/

前回（http://www.furimuke.com/2013/04/blogger1.html）familyを修正するところまで説明しました。このようにシンプルな画面にしたところです。

投稿が無いと全体像が見えにくいので、いくつか記事を投稿してみます。検証も兼ねてタイトルと本文、ラベルには、英語とひらがなを混ぜます。本文もある程度長い文章を入れます。画像は特大にします。区切り線も入れます。

表示にズレが無いか、画像がはみ出さないか、ラベルがきちんと表示されるか、区切り線の省略がきちんとゆくかなど、調べるためです。あと文字の大きさや行間や読みやすさも確認します。

3記事ぐらい投稿してみます。サイドウィジェットも何か無いと、やはり全体像が見えにくいので、追加してみましょう。

サイドウィジェット（ガジェット）は定番のもので、人気の投稿、ラベル、ブログアーカイブあたりを追加します。

だいぶブログっぽくなって来ましたね。完成までもう少しです。次は個別の記事を見てみましょう。

なんと画像がはみ出てしまっています。このテンプレートは、特大にすると、はみ出てしまうようです。大問題ですね。でも安心してください。CSSを追記すればOKです。

あ！あとブラウザーはGoogleのChromeを使っていることを前提とします。他のブラウザーの場合は、コードを探し出す方法を自分で確立してください。

では、落ち着いて、写真を右クリックして、要素を検証します。そうするとこの写真は、entry-contentにあるimgだとわかります。

CSSを作ります。entry-contentのimgは、最大幅でも100％で高さは自動で、という感じに設定します。

.entry-content img{
max-width: 100%;
width: auto;
}

これをHTML編集で、17行から折り畳まれているCSS部分を展開して、追記します。わかりやすく最後のところに書き込みました。

保存して確認してみると。画像が収まりました。この画像だとわかりにくいかもしれませんが、もうちょっとスペースが欲しいところです。

要素の検証でコードを調べます。max-widthは、contentのwidthにかかっていることを確認できました。

このように、widthを20ピクセル少なくしてみます。

#content {
width: 600px;
float: left;
padding: 0 20px 0 0;
}
↓
#content {
width: 580px;
float: left;
padding: 0 20px 0 0;
}

画像がちょうど良い感じになりました。570pxぐらいにしても良いかもしれません。

これで画像を最大にしても、はみ出さなくなりました。

本日はここまで！次回（http://www.furimuke.com/2013/04/blogger3.html）へつづく。