鉄馬の工具箱

te2uma(てつうま)のブログです。調べ物のメモなどを共有します。

このエントリーをはてなブックマークに追加

Tinkererで作成したブログ上の画像をスマホ対応させる

Tinkererで作成したブログは、レスポンシブWebデザインに対応しているので、特別な設定を行うことなくスマホに適した形式で閲覧できますが、横幅の長い画像が記事に埋め込まれている場合に、画像が横にはみ出してレイアウトが崩れてしまう場合があります。

CSS3のメディアクエリを使って次のように指定すると、この問題を回避できます。

@media screen and (max-width: 480px){
    .section img {
        height: auto !important;
        width: 100% !important;
    }
}

ここではiPhoneを想定して、「画面解像度の横幅が480px以下の場合に、記事内の画像の横幅と高さが親要素の横幅に対して100%になる」ように指定しています。

なお、原稿中で(reStructuredTextで)指定した画像サイズは、インラインCSSとしてアウトプットされる(設定が最優先される)ため、その設定を上書きするために「!important」宣言を付け加えています。

(最終更新日:2013/09/09)

このエントリーをはてなブックマークに追加