記事本文で画像を横に並べるCSSとAddQuicktagへの登録方法

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への登録方法

上記の例では3種類のタグを登録します。
AddQuicktag_label

右端の画像を囲むdivタグ
AddQuicktag_div

  1. ラベル:div
  2. 開始タグ:<div>
  3. 終了タグ:</div>
  4. 使用範囲:All
左端と中央の画像を囲むdivタグ
AddQuicktag_img

  1. ラベル:画像の右余白
  2. 開始タグ:<div class=”img_margin”>
  3. 終了タグ:</div>
  4. 使用範囲:All
横に並べる画像を複数囲むdivタグ

  1. ラベル:横に並べる
  2. 開始タグ:<div class=”column_img”>
  3. 終了タグ:</div>
  4. 使用範囲:All
記事の投稿画面を開くと下のように登録したクイックタグがボタンとして表示されています(テキストエディタの場合)。
AddQuicktag_original
私はテキストエディタしか使いませんので、h2やh3のタグも登録して使用しています。ビジュアルエディタの場合は、登録したクイックタグはドロップダウンリストで選択できます。

あとがき

自分で追加したスタイルのコードはいちいち手入力していられませんので、プラグインAddQuicktagを活用しましょう!
Luxeritasテーマの3.xバージョンからは、定型文やショートコードを登録する機能が備わっています。
3.x以降はそちらとも併用して便利に使っています♪
モデルをしてもらったのは、愛しのパール(闘病むなしく2016年3月他界)(/_;)

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

0

各種設定

Posted by どらみ