メニューへ

【備忘録】はてなブログの画像の表示サイズを一括で縮小する方法

目的

f:id:kibunchu1:20211202104707p:plain

記事の幅いっぱいまで表示されていた画像を、

f:id:kibunchu1:20211202104724p:plain

こうしたい。

 

この記事は、URLもしくはサイト名を明記して頂ければ、自由に内容の掲載、収入があるまとめサイト・検索サイト等へのリンクの掲載、及び、その他の著作権法上の「引用」と認められる範囲の利用が可能です。あらゆる許可は必要ありません。ただし筆者は一切の責任を負いません。具体的な条件はこちら(外部サイト)

方法

 自分の場合は、これをCSS(管理画面のデザイン→カスタマイズ→デザインCSS)に追加しました。

.entry-content img, .entry-content video {
    max-width: 80%;
    height: auto;
}

 

 他のサイトで方法を検索すると、よく、

.hatena-fotolife

などのようにclassを指定するように書かれていましたが、そうは行きませんでした。

確かに、ブラウザの「開発者ツール」で画像を選択したり、「HTML編集」で見てみると、貼り付けた画像は"hatena-fotolife"でclass指定できるように見えます。

f:id:kibunchu1:20211202103249p:plain

 しかし、何かしらのテーマを使っている場合、画像サイズを別なclassで指定したCSSで指定しているため、それと同じclassで書かなければ上書きされてしまう(事がある)ようです。

 

これを調べるには、まずブラウザの開発者ツールで画像を選択します。

(chromeなどの場合、ブラウザ右上のメニュー→その他のツール→開発者ツール で開いた後、開発者ツール左上のアイコンを押してから画像を選択)

 

その後に、右下の「スタイル」を漁ると、今自分が使っているテーマで、どのように画像の大きさが指定されているのかが分かります。(この画像では、サイズを上書きした後なので、取消線がついています。)

f:id:kibunchu1:20211202104210j:plain

ここで指定されているclass、この場合は

.entry-content img, .entry-content video

 

CSSの先頭につければ上手くできると思います。

 

参考記事

 

shuhelohelo.hatenablog.com

※当ブログでは、ゲームのスクリーンショット等の著作物を使用する場合があります。それらの著作権は著作者に帰属します。
※当ブログを引用する際はURL又はサイト名を記載ください。ただし私は責任を負いません。