画像の装飾・配置を調整する – 賢威7のCSSの使い方

賢威7のWordPress版に用意されているCSSのスタイルを適用して画像の装飾や配置を調整する方法を紹介します。賢威7の標準機能の説明です。

画像の装飾や配置を設定する場合は、下記のサンプルコードをコピー＆ペーストして利用してください。

画像の角丸

CSSを利用して「画像に角丸の装飾」や「画像全体に個別に装飾」の指定ができます。
記事の画像を角丸にして装飾したい場合に活用しましょう。

画像全体に角丸を指定する

角丸 4px
<img src="./img.png" alt="" class="rc4" />
角丸 8px
<img src="./img.png" alt="" class="rc8" />
角丸 12px
<img src="./img.png" alt="" class="rc12" />
角丸 長方形
<img src="./img.png" alt="" class="rc50" />

角ごとに角丸を指定する

角丸 4px 左上のみ
<img src="./img.png" alt="" class="rc4-tl" />
角丸 4px 右上のみ
<img src="./img.png" alt="" class="rc4-tr" />
角丸 4px 左下のみ
<img src="./img.png" alt="" class="rc4-bl" />
角丸 4px 右下のみ
<img src="./img.png" alt="" class="rc4-br" />

角丸 8px 左上のみ
<img src="./img.png" alt="" class="rc8-tl" />
角丸 8px 右上のみ
<img src="./img.png" alt="" class="rc8-tr" />
角丸 8px 左下のみ
<img src="./img.png" alt="" class="rc8-bl" />
角丸 8px 右下のみ
<img src="./img.png" alt="" class="rc8-br" />

角丸 12px 左上のみ
<img src="./img.png" alt="" class="rc12-tl" />
角丸 12px 右上のみ
<img src="./img.png" alt="" class="rc12-tr" />
角丸 12px 左下のみ
<img src="./img.png" alt="" class="rc12-bl" />
角丸 12px 右下のみ
<img src="./img.png" alt="" class="rc12-br" />

画像の装飾

影付き

画像の右下に薄い影をつけることができます。

<figure class="al-c">
<img src="./img.png" alt="" class="shadow" />
<figcaption class="al-c">影付き</figcaption>
</figure>

影付き2

画像の全体に薄い影をつけることができます。

<figure class="al-c">
<img src="./img.png" alt="" class="shadow02" />
<figcaption class="al-c">影付き2</figcaption>
</figure>

囲み線（1px）

画像を囲う1pxの枠をつけることができます。

<figure class="al-c">
<img src="./img.png" alt="" class="outline" />
<figcaption class="al-c">囲み線（1px）</figcaption>
</figure>

円

画像に円形の枠をつけることができます。

<figure class="al-c">
<img src="./img.png" alt="" class="circle" />
<figcaption class="al-c">円</figcaption>
</figure>

写真風

画像に写真風の飾り枠をつけることができます。

<figure class="al-c">
<img src="./img.png" alt="" class="frame" />
<figcaption class="al-c">写真風</figcaption>
</figure>

画像単体の枠

画像に枠をつけるCSSは、画像単体でも利用できます。

<img src="./img.png" alt="" class="shadow" />
<img src="./img.png" alt="" class="circle" />
<img src="./img.png" alt="" class="frame" />

画像の表示サイズ

表示サイズ指定（相対比率）

CSSを利用して画像の表示サイズを指定できます。
表示エリアに対しての相対比率（％）での指定となります。

<img src="./img.png" alt="" class="resize10" />
<img src="./img.png" alt="" class="resize20" />
<img src="./img.png" alt="" class="resize30" />
<img src="./img.png" alt="" class="resize40" />
<img src="./img.png" alt="" class="resize50" />
<img src="./img.png" alt="" class="resize60" />
<img src="./img.png" alt="" class="resize70" />
<img src="./img.png" alt="" class="resize80" />
<img src="./img.png" alt="" class="resize90" />

画像の配置

画像の回り込み

WordPressのエディタから記事を挿入する際に、画像の配置を指定すれば、記事に挿入する画像の回り込みが設定できます。賢威7でもその指定したCSSの設定が反映されます。

<h5>左側に画像が回り込む</h5>
<img src="./img.png" alt="" width="200" height="200" class="alignleft" />
<p>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</p>
<p>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</p>

<h5>右側に画像が回り込む</h5>
<img src="./img.png" alt="" width="200" height="200" class="alignright" />
<p>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</p>
<p>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</p>

<h5>画像の中央寄せ</h5>
<img src="./img.png" alt="" width="200" height="200" class="aligncenter" />
<p>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</p>
<p>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</p>

CSSの設定方法

メディアを追加

添付ファイルの表示設定

以上