２７日の夜、ブログを書いて表示のチェックをしたところ
画像の右に変な空間が出来ていることに気づきました。
元々、記事幅に対して画像は６５０pxが表示のいっぱいいっぱいだったのですが
なぜか右に２０pxの空間が開いていて。
最初は記事幅が勝手に変わったのかなと思いCSSで幅をいじってみたけど違うらしく
元々、どのように表示されていたのかも思い出せず腹立ってましたが
いつもより画像が左に５pxほど移動していることに気づき
記事内を左１０pxから１５pxに変えてみたら文字まで一緒に動いたため開きすぎて違和感が。
そのことを考えるに文字は左から１０pxでも画像は左から１０pxじゃないなと。
- 違和感のチカラ 最初の「あれ？」は案外正しい！ (角川oneテーマ21)/KADOKAWA
![]()
- Amazon.co.jp
そうなるとアメーバ側が勝手に画像まで文字と同じ幅に変更しやがったんじゃないかと思い
文字はそのままに画像だけを１５pxに変更しようと探したところ原因となるCSSを発見。
.entry .contents img{
こいつがどうも邪魔をしていたというか、原因のようでした。
なのでこいつに左から１５pxとるように指示すれば解決するんじゃないかと試みたら・・・
この画像を見てもらったらわかるように
画像が記事幅に対して均等になっているのが分かると思います。
/* 記事内の画像だけを移動 */
.entry .contents img{
padding-left:5px;
}
元々、.entry .contentsで左から１０pxとっているので１５pxにしたい場合
後５pxほど足してやればいいのでpadding-leftで指定してやりました。
.entry .contents{
padding:20px 10px 10px 10px;
font-size:15px;
background:url(http://stat.ameba.jp/user_images/20131128/19/bz-125-norinori/f9/e1/p/o0680009212763979591.png) top center repeat-y; /* 真ん中の画像 */
}
入れるならこの下に入れた方が分かりやすいかと思われます。
まあ自分が使ってるスキンを使ってる人なんてほとんどいないし
画像を横幅いっぱいにしてる人なんてまあ稀なので自分用ですが。
上が左から１０px、下が１５px、文字が１０pxなのですが
この画像を見てもらったらわかるように
やはり１０pxの幅しかない画像は窮屈な感じがして違和感を覚えます。
というか、この実験で分かった事なんだけど
画像６５０pxが限界だと思っていたけど６６０pxでもいけることが判明。
というより、以前までは画像だけ左から１５pxとっていたものを文字と一緒の幅に変更したため
今回のように６６０pxでも行けるようになったんだと思われます。
原因となるCSS探すのがめんどくさかったし、それでもいいかなと思ったけど
当分、この記事幅を変えることがないので右に違和感のある画像が嫌で。
何とか無事に直ってよかったです。
- プロとして恥ずかしくない新CSSデザインの大原則 [ 大藤幹 ]
![]()
- ￥2,700
- 楽天
いつもポチがとうございます。
クリックして下さると１０ポイントが入り喜びます。
