wordpressで画像に影を付ける為の簡単な方法をまとめた記事

2014-09-04_162930

ブログを運営していて、画像をwordpressに表示させる時に
影がついてカッコイイと思ったことはありませんか?

実はあれはすごく簡単に設定することができますので、
その方法についてまとめていきます。

 

wordpressの画像に影を付ける3つの方法

画像に影を付ける方法として、まずは【Shadows】というプラグインがあるのですが、
PCで見る分には全く問題なく影を付けることができるし、画像も表示されますが
スマホで見たときに画像がはみ出てしまうようなことがあります。

もう一つは無料画像加工サービスというサイトで画像自体を加工してから
wordpressに画像を設置するという方法もありますが、これは非常に手間がかかります。

そこで発見したのが、CSSを直接編集してしまうというものです。

具体的な方法についてまとめていきますのでチェックしておいてくださいね。

 

CSSコードをスタイルシートに追加する

画像に影を付けるためには、まずはCSSのコードを貼り付ける作業が必要です。
ここではテンプレートSINKAを例にして説明していきますね。

まずは【外観】⇒【テーマオプション】⇒【自由入力欄の設定】⇒【ユーザー定義CSS】に貼り付けます。
※ free版の方は、【外観】⇒【CSS編集】のところに貼り付けてください。

.shadow {
margin-top: 5px; /* 画像の上の余白*/
display: inline-block;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */
}

次に、画像に影を付けたいタグ内に下記のコードを入力していきます。

<img class=”shadow” src=”画像URL”>

では実際にwordpressで画像を入れる流れを画像で説明していきますね。
普段通り、【メディアを追加】から画像を入れるようにしてください。

そして、テキストに変更してimgタグ内に下記のコードを追加すればOKです。

class=”shadow”

2014 09 04 163258 wordpressで画像に影を付ける為の簡単な方法をまとめた記事


これで影が付くようになりましたね。

 

まとめ

このようにしてCSSの簡単な編集で画像に影を付けることができますので、
ちょっとしたアクセント付けとしてやってみてください。

画像を加工するだけでも、他のブログと違った見た目をデザインすることが
できますので、画像に文字を入れるとか、影を付けたりして
あなただけのオリジナルブログ作りを頑張ってみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>