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

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

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

・海外テンプレートサイト
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)へつづく。




いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Blogger英語テンプレ日本語化2-投稿画像のサイズ調整
Blogger英語テンプレ日本語化2-投稿画像のサイズ調整
http://2.bp.blogspot.com/-2ZQ6giRDTmY/UXam-5Jw5QI/AAAAAAAAJN4/VVNqYymcbXk/s640/%25E3%2583%2586%25E3%2582%25B9%25E3%2583%2588%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B00006+%25283%2529.jpg
http://2.bp.blogspot.com/-2ZQ6giRDTmY/UXam-5Jw5QI/AAAAAAAAJN4/VVNqYymcbXk/s72-c/%25E3%2583%2586%25E3%2582%25B9%25E3%2583%2588%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B00006+%25283%2529.jpg
ふりむけばコウホウ
http://www.furimuke.com/2013/04/blogger2.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/04/blogger2.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy