本文幅が固定されているデザインテーマで、大きな画像が貼り付けられた場合はサイズを自動縮小するようになりました

かんたんデザインで設定可能な一部のデザインテーマで、ダイアリーの記事中に貼り付けたフォトライフの画像がテーマで指定された本文幅よりも大きい場合に、自動的にサイズを縮小して画像全体が表示されるように変更を行いました。

(変更前)

(変更後)

これまで、テーマによっては本文幅が固定されているため、指定されている本文幅よりも大きいサイズの画像を貼り付けた場合に、画像の全体が表示されなかったり、レイアウトが崩れてしまうといった問題がございました。

今回の変更により、サイズの大きな画像をそのまま貼り付けても、自動的に表示サイズが適切に調整され、クリックした先でオリジナルサイズの画像を見ることができるようになりました。なおこの変更は、本文幅で固定サイズが指定されているテーマのみとなっております。

テーマ作者様向け情報

その他のテーマ、公開デザインでも、以下のように記事部分の幅にあわせてmax-widthを入れる事で同様のレイアウト調整ができます。特に固定幅のデザインを1から作る場合はこの指定の追加を推奨いたします。

/* 1カラム */
div.section img.hatena-fotolife{
  max-width: XXX;
}

/* 2カラム */
div.main div.section img.hatena-fotolife{
  max-width: XXX;
}

※InternetExplorerではこのmax-widthの指定に対応していない為、javascriptを使って対応しています。上の通りのセレクタになっていない場合や、javascriptがオフになっている場合、IEではサイズ変更は有効になりませんのでお気をつけください。