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

スポンサーリンク

シェアする

この記事を読むのに必要な時間は約 3 分です。

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

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

  • 全ての画像、または画像毎の枠線の付け方
  • 枠線の色、スタイルの変更
  • 画像に影を付ける方法

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






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

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

画像に枠線をつける

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

<div style=”display: inline-block; border: 2px solid #000000; line-height: 10px;”><画像URL></div>
行間の設定によっては、画像の下の部分と枠線の間に隙間ができることがあるので、「line-height」の数値で調整してください。

画像の枠線の色、スタイルを変える

色を変える

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

<div style=”display: inline-block; border: 2px solid #000000; line-height: 10px;”><画像URL></div>
カラーコードは「原色大辞典」というサイトなどのコードが参考にできます。
ネイビー(#000080)に変更する場合

線のスタイルを変える

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

<div style=”display: inline-block; border: 2px solid #000000; line-height: 10px; borderradius: 7px;“><画像URL></div>
線の太さ:数字を変更すると太さが変わる
線のスタイル:ボーダースタイルで変更可能。「HTMLクイックリファレンス」というサイトを参照。
枠線の角を丸めるborderradiusを追記。数字を変えると丸みを調整できる。
例として次のコードに変更した場合です。
「線の太さ:5px、線のスタイル:dashed、 枠線の角:border-radius: 7px」

画像に影を付ける

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

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

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

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

全ての画像に枠線を付ける方法:CSS

CSSコード

CSSでもHTMLでの装飾同様に、線を付ける、線の色、スタイルを変える、影を付けることができます。
以下のコードをスタイルシートに貼り付けます。
.post img {
border:solid 1px #000000;
borderradius: 7px;
boxshadow: 5px 5px 5px #000000;
}
  • 枠線のスタイル:「solid」の部分を任意に変更
  • 枠線の太さ:「1 px」の部分を任意に変更
  • 枠線の色:「#000000」の部分を任意に変更
  • 枠線の角:「borderradius: 7px;」の数値部分を変更し丸みを調整
  • 画像に影を付ける:「boxshadow: 5px 5px 5px rgba(0,0,0,0.4);
    }」の数値部分で影を調整

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

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

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

特定の画像にCSSを反映させない方法

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

<img src=画像のURL style=“border-radius: 0px; border:none; box-shadow:none>

おわりに

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

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