オススメAV記事！

CSSで画像をリサイズして表示

update : 2012-12-03　　カテゴリ : IT徒然日記

こないだtumblrでは下記のようなことを悩んでいてCSSで解決出来たのですが。

tumblrのCSSメモ

横幅が700以上ある画像は横幅700pxちょうどにフィットしてして表示されます。これはいいのですが、横幅が700px以下の画像でも横幅700pxに拡大されて表示されるのです。横幅が小さい画像だとかなり拡大されてドットが荒く、汚く見えてしまいます。

これを横幅700px未満の画像では元画像のサイズで表示されるようにしたいのです。
で、色々CSS調べてようやく方法が分かりました。

これと同じようなことをFC2のこのブログでやりたいのです。
というのはtumblrに篠崎愛の写真をアップ！（１）という記事にtumblrのimgタグをそのままコピペして貼っていたのですのですが。。。

元画像が大きい場合、真ん中のmain記事の表示領域（横幅620pxぐらい）から画像が大きいとはみ出て表示されてしまっていたのです。横幅620px以上の画像は縮小して表示が出来ないかな…しかもimgタグでただ小さくすると無理やり縮小で画像汚くなるよな…。FC2のこのブログ…というかこのテンプレートのスタイルシート？では上記のtumblrような方法じゃ無理かな…と調べていたら！

見つけました。そして何とかなりました。

■■■　続きを読む　■■■

関連記事

update : 2012-12-03　　カテゴリ : IT徒然日記

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調べてようやく方法が分かりました。