Monochrome

読者です 読者をやめる 読者になる 読者になる

Monochrome

モノに関する情報をまとめたブログ

はてなブログで画像のサイズを変更する方法について解説します(HTML・Markdown)

はてなブログではフォトライフにアップロードした画像を簡単に記事内に挿入することができます。しかし、そのままだと元の画像サイズのまま挿入されてしまうため、画像が大きすぎる場合がありました。

そこで今回は挿入した画像のサイズを変更する方法について解説したいと思います。

画像サイズの変更方法

HTML編集の場合

HTML編集や見たまま編集で記事を書いている場合はこちらの方法を使用します。

画像の挿入は右メニューにある「写真を投稿」から行います。「写真を投稿」からアップロードしたい写真を選択し、「選択した写真を貼り付け」をクリックすると画像の挿入が完了します。

挿入が出来たら編集モードを「HTML編集」に切り替えます。

すると画像を貼り付けた位置に以下のようなコードが表示されていると思います。

  • <img class="~~~" title="~~~" src="~~~" alt="~~~">

 

画像の大きさを変更したい場合は「alt="~~~"」の後ろに「width="~~~" height="~~~"」という記述を追加します。

この〜〜〜の部分には変更したい数字(ピクセル数かパーセント)を入力してください。例えばwidth="100"と入力するとサイズが100に変更されます。

 

通常の画像

f:id:mono_kuro:20161105105350p:plain

 

サイズを100に変更

f:id:mono_kuro:20161105105350p:plain width=

 

Markdown編集の場合

Markdown編集で記事を書いている場合はこちらの方法を使用します。

画像の挿入は右メニューにある「写真を投稿」から行います。「写真を投稿」からアップロードしたい写真を選択し、「選択した写真を貼り付け」をクリックすると画像の挿入が完了します。

すると画像を貼り付けた位置に以下のようなコードが表示されていると思います。

  • [f:id:○○○:2016×××:plain]

 

こちらのコードの「plain」の後ろに「:w100」と付け加えると横幅が300ピクセルになります。

  • [f:id:○○○:2016×××:plain:w100]

 

あとがき

はてなブログでは画像の挿入が簡単に出来るので、覚えておくと便利なテクニックだと思いました。画像のサイズ変更をしたい方は参考にしてみてください。