書式一覧（画像）

回り込み

注意

画像の回り込みはＰＣ版のみで行われます。
「左図の通り」としても、スマホ版では上に表示されているので注意してください。

左寄せ

◀[左寄せ]
画像を左に回り込ませます。
基本的に最大画像幅は300pxです。

▲▼回り込みどうしの間には、回り込みを解除するため、いったんテキストを挟みます。
空の要素でクリアすることもできますので、そこまで気にしなくて大丈夫です。

右寄せ

画像を右に回り込ませます。
こちらも同じく最大幅300pxです。
Wordpressにボタンが用意してあります。

[中央寄せ]（大きめ）

画像を中央に寄せます。
普通の文字は中央には寄りません。
Wordpressにボタンが用意してあります。

［中央寄せ］（縮小）

大きい画像を小さくして中央に寄せることが可能です。
figureで設定しない場合、文字の位置は揃いません。

2in1

[2in1]画像を左右に２つ並べて表示することも可能です。
ビフォーアフターなどに利用できると思います。
なお、文字は中央寄せと・・・（次の行につづく）

左寄せ両方デフォルトとしてできます。
画像のブロック（中央寄せ）に入れるか、その外（左寄せ）に入れるかだけなので、お好みでご指示ください。

<div class="img_2in1">
ここにimgを続けて置く。
</div>

回り込みの解除

画像解説

画像のサイズに合わせて可変サイズの解説文を設定することができます。
画像の回り込みはＰＣ版のみで行われます。
「左図の通り」としても、スマホ版では上に表示されているので注意してください。

中央揃え

<figure class="img_figure">
<figcaption>▲</figcaption></figure>

左揃え

本文は回り込みに沿って表示されます。
【キセメモ】:afterでclear入れてるので注意

<figure class="img_figure img_left">
<figcaption>▲</figcaption></figure>

右揃え

本文は回り込みに沿って表示されます。

<figure class="img_figure img_right">
<figcaption>▲</figcaption></figure>

画像の整列

[flex_img]と並べる個数のクラスを同時に指定します。
サンプルは[div class=”flex_img flex4″]です。
並べる個数に関しては、現在は[felx2]～[flex4]まで用意してあります。

単純に並べる flex2

[ol]に更に[arrow]を指定すると矢印が追加されます。

単純に並べる flex4

[ol]に更に[arrow]を指定すると矢印が追加されます。

<div class="flex_img flex4">
</div>

スペースを開けて並べる flex4

liを入れるとくっつかずにスペースが空きます。

<div class="flex_img flex4">
</div>
<li><img src=""></li> 

手順として並べる

<ol class="flex_img flex4 arrow">
<li></li>
<li></li>
<li></li>
</ol>

下に揃える

使用箇所なし。しばらく立っても用途なかったら削除。

<div class="img_bottom">
</div>