tumblrのCSSメモ
update : 2012-12-01
カテゴリ : IT徒然日記
こないだ開いたtumblr(http://f0o0o0.tumblr.com/)ですが画像の表示が気に入らないのでCSSを修正しました。というメモ。
まずtumblrのテーマですがFree themesの中のDefaultを選択って選択しないでもデフォルトこれだったかな？
凝りに凝ったものじゃなくてシンプルなものが好きだったので。
自分がtumblrにログインした状態で自分のtumblrのサイト（dashboardではなく。自分の場合だとこれ→ http://f0o0o0.tumblr.com/）にアクセスすると右上に「Customize」と「Dashboard」というボタンが見えます。「Customize」を押下で自分のテーマのカスタマイズ画面に飛びます。
画面の左側のフレームが各種設定画面。右側が実際の自分のtumblrのプレビュー画面になります。
まず左側のフレームで各種設定。下の方にある「APPEARANCE」で各種設定。（これは全てのテーマでここまでカスタマイズ出来るか不明。設定が入ってないthemeだとここまで細かく出来ないかも）
「Show image shadows」のチェックを外す→画像のドロップシャドウが消えます。
「Use endless scrolling」のチェックを外す→エンドレススクロール（画面下までスクロールすると自動でその下にページがロードされる）
上記は自分の好みです。
で、このFree themesのDefaultで一番気に入らなかったのが画像の表示。
どの画像もメインの記事表示エリアの横幅一杯まで表示されてしまうのです。このメインエリアのコンテナの幅は700pxになっています。横幅が700以上ある画像は横幅700pxちょうどにフィットしてして表示されます。これはいいのですが、横幅が700px以下の画像でも横幅700pxに拡大されて表示されるのです。横幅が小さい画像だとかなり拡大されてドットが荒く、汚く見えてしまいます。
これを横幅700px未満の画像では元画像のサイズで表示されるようにしたいのです。
で、色々CSS調べてようやく方法が分かりました。
左側のフレームで「Edit HTML」のボタンを押下。すると左側のフレームにCSS、HTMLが表示されます。これ普通のCSS、HTML以外にtumblrの独自タグみたいなのが入ってますのでその独自タグは壊さないように。
また、この左側の画面でソースを直接いじれるのですがどうにも操作感が悪いです。カーソルの表示と実際の文字修正位置がズレたり。（この辺りよく分かりませんが…。）
なのでこのCSS,HTMLを丸ごとコピーしてテキストエディタで修正していました。
img { max-width: 100% }
.post .top.media img { width: 100%; }
↑が問題のCSSの部分。横幅は100%固定表示。（横幅700pxのコンテナ内での100%表示）
この部分を下記のようにまるっと修正します。
img { max-width: 100% }
.post .top.media img { max-width: 100%;
height: auto !important; }
↑
まず高さは本来の画像の高さで表示する、というのを優先。加えて横幅100%での表示をする、という設定になります。
つまり本来の画像サイズの高さで表示。もしその画像サイズが大きくて横幅が700px以上の場合は700pxのコンテナ内で横幅700pxの100%表示にする、ということになります。
これで横幅700px未満の画像の場合は本来の画像サイズで表示され、変なふうに拡大されて荒い画像のようにひょうじされてしまう、ということが無くなります。
などと色々書きましたが…。小生CSSとかの理解浅いので全く見当外してるかもしれないのです。導入する場合は各自注意してね？
update : 2012-12-01
カテゴリ : IT徒然日記
関連するタグ [tumblr] [CSS] [ブログ]
↓下のバナーをクリックして投票いただけるとありがたいです。
アダルトブログランキングへ
↑この一票のお陰でブログ更新意欲が沸き起こるんです！
↑何卒よろしくお願い致します m(__)m
他の風俗体験ブログはこちらから
無修正動画：吉野サリー はだかの履歴書 No.9
無修正動画：七瀬リナ：女熱大陸 File.055
