目的
記事の幅いっぱいまで表示されていた画像を、
こうしたい。
この記事は、URLもしくはサイト名を明記して頂ければ、自由に内容の掲載、収入があるまとめサイト・検索サイト等へのリンクの掲載、及び、その他の著作権法上の「引用」と認められる範囲の利用が可能です。あらゆる許可は必要ありません。ただし筆者は一切の責任を負いません。具体的な条件はこちら(外部サイト)。
方法
自分の場合は、これをCSS(管理画面のデザイン→カスタマイズ→デザインCSS)に追加しました。
.entry-content img, .entry-content video {
max-width: 80%;
height: auto;
}
他のサイトで方法を検索すると、よく、
.hatena-fotolife
などのようにclassを指定するように書かれていましたが、そうは行きませんでした。
確かに、ブラウザの「開発者ツール」で画像を選択したり、「HTML編集」で見てみると、貼り付けた画像は"hatena-fotolife"でclass指定できるように見えます。
しかし、何かしらのテーマを使っている場合、画像サイズを別なclassで指定したCSSで指定しているため、それと同じclassで書かなければ上書きされてしまう(事がある)ようです。
これを調べるには、まずブラウザの開発者ツールで画像を選択します。
(chromeなどの場合、ブラウザ右上のメニュー→その他のツール→開発者ツール で開いた後、開発者ツール左上のアイコンを押してから画像を選択)
その後に、右下の「スタイル」を漁ると、今自分が使っているテーマで、どのように画像の大きさが指定されているのかが分かります。(この画像では、サイズを上書きした後なので、取消線がついています。)
ここで指定されているclass、この場合は
.entry-content img, .entry-content video
をCSSの先頭につければ上手くできると思います。
参考記事