【WosrePress】初心者向け！コピペで簡単、画像の枠線(縁)をつける方法（HTML、CSS）

WordPressに画像を挿入したけど「テキストの装飾と合わないから画像も装飾したい！」という人も多いと思います。

そこで今回は、コピペで簡単にできる画像の枠線の付け方、装飾方法を解説します。

画像毎の場合はHTMLコード、全ての画像を装飾する場合はCSSコードをコピペで設定可能なので、初心者でも簡単に設定できプラグインも不要です。

画像毎に枠線を付ける方法：HTML

画像毎に枠線を付けたり装飾する方法です。

画像にシンプルな枠線を付ける場合です。

<div style=”display: inline-block; border: 2px solid #000000; line-height: 10px;”><画像URL></div>

行間の設定によっては、画像の下の部分と枠線の間に隙間ができることがあるので、「line-height」の数値で調整してください。

色を変える場合は以下のHTMLコードの「#」以降の6桁を任意のカラーコードに変更します。

カラーコードは「原色大辞典」というサイトなどのコードが参考にできます。

ネイビー(#000080)に変更する場合

枠線のスタイルを変更します。

線の太さ：数字を変更すると太さが変わる

線のスタイル：ボーダースタイルで変更可能。「HTMLクイックリファレンス」というサイトを参照。
枠線の角を丸める：「border–radius」を追記。数字を変えると丸みを調整できる。

例として次のコードに変更した場合です。

「線の太さ：5px、線のスタイル：dashed、枠線の角：border-radius: 7px」

画像に影を付けます。「box-shadow」を追記します。

影の記述部分は、順に「影の水平方向のオフセット量」「影の垂直方向のオフセット量」「ぼかしの距離」「色」となっています。

数値を変更することで影の調整ができます。

CSSでもHTMLでの装飾同様に、線を付ける、線の色、スタイルを変える、影を付けることができます。

以下のコードをスタイルシートに貼り付けます。

.post img {

border:solid 1px #000000;

border–radius: 7px;

box–shadow: 5px 5px 5px #000000;

}

管理画面の「外観」から「カスタマイズ」を選択し、「追加CSS」にCSSコードをコピペします。

全ての画像にCSSで記述したスタイルが適用されます。

画像の装飾における各項目の細かい調整はHTMLと同様なので、HTMLの項目を参照ください。

CSSでは全ての画像に適用したスタイルが反映されますが、以下のHTMLコードを使えば特定の画像には反映させないこともできます。

HTML、CSSのコピペで簡単に設定できる画像の装飾方法を紹介しました。

全ての画像に共通して装飾設定をしたい場合はCSS、画像毎に個別に設定したい場合はHTMLで装飾することができますので、是非活用してみて下さい。