ワードプレスの投稿で画像の幅と位置を自由に調整する方法

今回は、WordPress（ワードプレス ）の投稿エディタを使って画像の横幅と縦幅を自由に調整して綺麗な見た目に整える方法を紹介致します。

画像をアップロードする際は通常、画像編集ソフトで一つずつコンテンツ幅に合わせたサイズにリサイズ編集してからアップするのが一般的です。ただWordPress（ワードプレス）のGutenbergエディタの場合、標準機能で画像の幅、サイズ、位置の調整機能が付いているので大きさや、幅の調整はワードプレス内で可能です。

画像の調整：色々

下記画像の左上の配置を変更の部分で画像の位置を調整します。画像サイズの部分で元画像のサイズを変更。画像の寸法の部分で細かく調整できます。

下記の写真を元に設定の違いを解説していきます。（幅：628　高さ：408）

元の画像サイズのまま、いい感じの見た目にしたいのなら中央揃えにするといいでしょう。

左揃えと右揃えは通常使わなくてもいいと思います。左右に画像を配置したい場合は下記の様にメディアと文章の方が綺麗に見えます。

メデイアと文章

画像の寸法を50%にした場合、下記の様にアスペクト比を維持して幅と高さが均等に50%に変更されます。

コンテンツ幅に対してぴったりにしたい場合は、HTMLにwidth=”100%”と記述するだけでOKです。画像の調整をする場合はこのやり方が一番おすすめです。（テーマによってはワンクリックで可能なものもあります。）

HTMLでの記述

上記の画像は、画像の寸法を75%にして幅が471で高さが306に変更されたサイズです。この画像のHTML記述は以下の様になっています。

<img src=
"https://kt-life.net/wp-content/uploads/2020/01/2BF2067E-F0B8-4AAA-AAB7-16F1187469DE.jpeg"
alt=""
width="471" height="306"/>

上記HTMLの6行目の『width="471" height="306"』の部分が幅と高さの調整の記述です。

上記の画像は、width=”100%”でブロック幅限界まで広げたサイズです。この画像のHTML記述は以下の様になっています。

<img src="https://kt-life.net/wp-content/uploads/2020/01/2BF2067E-F0B8-4AAA-AAB7-16F1187469DE.jpeg" 
alt=""　width="100%" />

HTMLとして編集を選んで2行目のalt=””の後にwidth=”100%”を付けてあげましょう。

以上が「ワードプレスの投稿で画像の幅と位置を自由に調整する方法」でした。

画像のサイズ感でサイトの印象はかなり変わるので、そのページに最適な調整を施して印象の良いWEBサイトを作りましょう。

また今回の記事で出てきた、アスペクト比に関してはサムネイル作成時にも使える知識なので覚えておいた方が良いです。サムネイルの作り方とアスペクト比に関しては以下の記事でも紹介していますので合わせてどうぞ。

サムネイル用に縦横比率がピッタリの画像を作る方法

そこで今回はブログ運営やYouTube動画などでCTR（クリック率）に影響するサムネイルに関して、横幅と縦幅をぴったり収まるように作成して、サムネイル内の文書や画像をズラさずにアップロードする方法を紹介します。ついでにYouTubeのサムネイル縦横比も紹介します。

kt-life.net

2020.02.01