WordPressの画像設定「縁(枠線)・影・角丸」プラグイン不要

今回はWordPressの画像設定に関して紹介します。

WordPressに挿入した画像に縁(枠線)を付けたいとか、画像の縁に色を付けたいといった編集をしたいという方も多いと思います。

ここで紹介する方法は画像編集を行わず、WordPressの設定のみ変更することにより以下を実現します。

・画像に縁(枠線)を付ける
・画像の縁(枠線)の色を変更する
・画像に影を付ける
・画像の角を丸くする

設定はプラグインは不要で、非常に簡単です。以下のやり方を参考に行ってみてください。

WordPressの画像設定「縁(枠線)・影・角丸」

では、今回はWordPressテーマの賢威を例に説明していきます。

それでは画像の例として以下の様な四角形を使用して説明します。画像に何も装飾設定していない状態です。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角1
 

ダッシュボードの「外観」→「テーマの編集」
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 外観 テーマの編集
 

「design.css」をクリック。※賢威以外のテーマは「style.css」など。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 外観 テーマの編集 design.css
 

「design.css」内に例えば以下のように入力します。

このように入力すると以下のように表示されます。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角2

以下のように画像の装飾が変更されました。装飾を設定した2~4行目のコードを順番に解説します。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角1 → → → WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角2
 
 

2行目の「border:solid 1px #000000;」
この記述で縁(枠線)を指定しています。

 solid:実線
 1px:1pxの太さ
 #000000:黒色

ここを変更すると縁を点線にしたり、線の太さを変えたり、色を変えたりすることができます。

例えば、

と入力すると、以下のように表示されます。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角2 → → → WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角3
 
 

3行目の「border-radius: 7px;」
この記述で角丸を指定しています。

この記述を削除すれば、丸くなくなり四角形になります。

例えば、

と入力すると、以下のように表示されます。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角2 → → → WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角4
 
 

4行目の「box-shadow: 5px 5px 5px rgba(0,0,0,0.4);」
この記述で影を指定しています。
指定している記述は順番に「影の水平方向のオフセット量」、「影の垂直方向のオフセット量」、「ぼかしの距離」、「色」となります。

例えば、

と入力すると、以下のように表示されます。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角2 → → → WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 例四角4
 

以上のように、WordPressの画像の装飾設定「縁(枠線)・影・角丸」は「design.css」や「style.css」を編集することによって行うことができます。

ただし、注意点がありますので、以下のことには気をつけてください。

・装飾の設定はすべての画像に適用される。
・プラグインで設定しているわけではないので、WordPressのテーマ(テンプレート)を変更した場合は、変更後のテーマにも今回の設定を行う必要がある。

以上の点に問題がなければぜひ使用してみてください。
 

装飾の設定はすべての画像に適用されますが、個別で以下のように入力すれば装飾の設定を無しにできます。

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA