記事本文で画像を横に並べるCSS

各種設定

記事本文内で画像を横に並べる方法

幅の狭い画像を記事本文内に配置する時、横に並べたい時があり、そのため用のCSSを追加しましたので、覚え書きです。

通常の縦並び

愛犬パール
愛犬パール
愛犬パール

display:flexを使って横並びにする

愛犬パール
愛犬パール
愛犬パール

HTML

<div class="column_img">
<div class="img_margin"><img src="https://左端の画像のパス"></div>
<div class="img_margin"><img src="https://中央の画像のパス"></div>
<div><img src="https://右端の画像のパス"></div>
</div>

CSS

.column_img{
    display:flex; /* 横に並べる */
	margin-bottom:20px; /* 画像の下の余白 */
}
.img_margin{
	margin-right:30px; /* 各画像の右側の余白 */
}

あとがき

当然、コードはいちいち手入力していられませんので、プラグインAddQuicktagに登録しました。
モデルをしてもらったのは、愛しのパール(闘病むなしく2016年3月他界)(/_;)

参考プラグインAddQuicktagの使い方

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ