google-site-verification=sRxM2vML3647WBFl5wm4irWuGu0LCYrOu8W6nHrpe6U

諸君、くらいたまえ

雑記・勉強したことなど

【はてなブログ】画像の表示サイズのドラッグ調節ができなくなった? 原因と解決法

当ブログではアフィリエイト広告を利用しています。

はてなブログでは、ブログに載せる画像をドラッグして表示サイズを調節できるはずなのですが、なぜか急にできなくなってしまいました。
色々試してみたら、その原因と解決策が判明したので、シェアします。

 

はてなブログはドラッグで画像サイズの調整ができる

はてなブログでは、ブログに乗せる画像の表示サイズを簡単に変更できます。

「見たまま編集モード」にして、貼り付けてある画像をクリックすると、サイズ変更ハンドル(四隅の□)が出てきます:

hatenablog-image-drag

 

この□をドラッグすると、サイズ調節ができます:

hatenablog-image-drag

 

縦横比を保ったまま拡大・縮小ができます。
実際に画像サイズを見ながら編集できて大変便利ですね。

ドラッグでの画面サイズ調整ができない?

ところが、ある日ブログを書いていると、この調節法が急にできなくなってしまいました。
ドラッグできないどころか、クリックしても、サイズ変更ハンドルが出てきません。
この通り、クリックすると青い枠がでてくるだけ:

hatenablog-image-drag

どこにカーソルを合わせて引っ張っても、サイズ変更ができません。
なんで急にできなくなったんだろう??

 

色々いじくっていたところ、原因が分かりました。
原因は、おそらくキャプションです。

 

キャプションとは、画像を説明する文字のことで、画像下に表示されています。
キャプションは画像貼り付け時に設定できるのですが、このキャプションを入力していると、ドラッグでのサイズ調整ができないようです。
実際、同じ画像でキャプションを付けないまま試してみたら、ドラッグでの調節ができました。

 

別のブラウザでも試してみましたが、同じ現象が起きたので、バグではなく仕様だと思います。

 

結論:キャプション無しの画像はドラッグでサイズ調整ができるが、キャプションを入れるとそれが不可能。

解決策

ドラッグで調節できれば便利でしたが、できないのであればHTML編集でコマンドを打ち込むしかありません。

 

画像を貼ったあと、見たまま編集モードからHTME編集モードに変えて、該当する画像のコマンドを探します。

<img src=○○○ /> とあるところです。

見つけたら、/>の手前に  width="数字" と付け加えます。

””の中の数字が、横幅の長さになります。

今回は横幅を300にしたいので、width="300" と書きました:

hatenablog-image-drag

 そして、見たまま編集モードに戻ると、ちゃんと画像サイズが変更されています。

 関連記事

【はてなブログ】「全文形式 or 一覧形式」と「続きを読む」の設定あり or なしのそれぞれの違い