ワードプレスの記事中で高さの違う画像のトップ位置を簡単に合わせる方法は?

WRITER
 
この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

ワードプレスで記事作成をしていると、画像を横並びで表示したいことありますよね。

実際に横並びで表示させた時に、高さの異なる画像だとトップの位置が合わないことがあります。

そんな時、トップの位置を合わせる方法を紹介します!

高さの違う画像のトップ位置を合わせる方法は?

記事中に画像を横並びで挿入した時、高さの違う画像だとこのようにトップ位置があわない場合があります。

これでもいいといえばいいのですが、個人的にはトップ位置が揃っていないのが気になります(笑)。

そんな時、CSSをいじったり、プラグインを入れたりして位置を揃える方法もありますが、CSSをいじるのは面倒くさいし(笑)、必要以上にプラグインを入れて重くなったりするのも嫌だし・・・と思ったら、HTMLをちょっといじるだけで簡単にトップ位置を揃える方法があるんです。

 

まず、テキストエディタを開きます。

そして画像のタグ(<img ~/>)を以下のように<div>タグで囲います。

すると以下のようにトップ位置が揃います。

ただ、このままだと2つの画像の間がつまりすぎているので、気になる方は「style」に「margin」を加えて調整してくださいね。

このような感じです。

 

すると2つの画像の間に余白ができました。

もし、下をあわせたい場合は

vertical-align: bottom;

としてくださいね。

中央を合わせたい場合は

vertical-align: middle;

となります。

 

画像を左寄せなどにして挿入し次に文字を入力すると、画像の横に回り込んで表示されます。

それを回避したい場合は、「ワードプレスの記事で画像の横に文字を回り込ませない方法!」を参考にしてみてくださいね。

まとめ

高さの違う画像のトップ位置を合わせる方法を紹介しました。

「vertical-align: 」の設定値を変更するだけで、下にも中央にも合わせられるのでぜひ試してみてくださいね!

この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。

Copyright© トラベラーズサロン , 2018 All Rights Reserved.