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

WordPress

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

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

画像の調整:色々

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

注意

ただしアスペクト比(縦横比)に関しては維持した状態でサイズが変更されていきます。そのためアスペクト比は画像のアップ前に調整しとく必要があります。

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

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

中央揃え

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

メデイアと文章

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

寸法50%

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

HTMLでの記述

寸法70%

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

<img src=
"https://ka-holidayrefresh.com/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://ka-holidayrefresh.com/wp-content/uploads/2020/01/2BF2067E-F0B8-4AAA-AAB7-16F1187469DE.jpeg" 
alt="" width="100%" />

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

動画で見る


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

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

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

2020年2月15日WordPressGutenberg,WEB,WP

Posted by KT