WordPressにマークダウン方式で画像を挿入した後、その大きさを変更する方法

私はあまりHTMLが得意でないことも有り、WordPressへ簡単に投稿できるマークダウンを利用しています。

マークダウンでの画像の挿入は大きさを変更出来ないことから、その後の変更方法について紹介します！

マークダウンで画像を挿入する方法

マークダウンで画像を挿入する場合には、以下のように記載します！

![代替テキスト](画像URL "画像のタイトル")

代替テキストは、画像が表示されなかった場合に表示されるテキストです。

画像タイトルは、画像の上にマウスのポインタを充てた時に表示される画像のタイトルです。

例
![時計](https://nabakari.com/wp-content/uploads/2016/06/時計.jpg "時計")

▼上記の記述をした場合の表示です。

これで、マークダウンを利用して画像の挿入が出来ました。

このマークダウンでWordPressへ投稿をすると、画像がアップロードしたままの大きさで表示されてしまい、見難くなってしまうことが有ります。

そこで、HTMLを少し編集する方法で、表示する大きさを変えることが出来ます。

画像が挿入されたHTMLに大きさを指定する！

上記のマークダウンで投稿を行った場合、以下の様なHTMLが作成されます。

<\img src="https://nabakari.com/wp-content/uploads/2016/06/時計.jpg " alt="時計"> 

見て分かる通り、特に大きさを指定するような数値などは入っていません。

そのため、元々の画像の大きさで表示されてしまいます。

このHTMLに「width=”300″ height=”200″」という数値を入力することで、表示の大きさを変更することが出来ます。

<\img src="https://nabakari.com/wp-content/uploads/2016/06/時計.jpg " alt="時計" width="300" height="200">

上記のように記載することで、挿入した画像の大きさを調整することが出来ます。

WordPress上で直接写真の大きさを変更することも可能

WordPressの「メディア」＞「ライブラリ」で画像をアップロードすると思いますが、アップロード後の画像を選択し、画像の左下にある「画像を編集」ボタンを押すと、「画像縮尺の変更」という欄が右側に表示されます。

新規サイズを登録して縮尺変更ボタンで変更することが出来ます。

最後に

HTMLの指定によって画像の大きさを調整する方法をご紹介しました。

しかし、これはあくまで元々の大きさの画像がサーバーに保存されたうえで、表示を変えているだけです。そのため画像をクリックして拡大表示することなどに対応することが出来ます。

はじめから容量を抑えておきたい場合には、予め画像自体の大きさを変更するというのも一つの方法だと思います。

通常の画像の変更はWindowsにデフォルトで入っているペイントツールで簡単に出来ますし、画像の大きさを一括で変更するソフトなども有りますので、用途に応じて使い分けていただければ良いかなと思います。(こちらは追ってご紹介できたらなと思います。)