Search

LIVE LIKE A TRAVELER

旅するように暮らす

WordPressで画像に手動でclass追加して影をつける方法(追加CSS使用)


unsplash-logoFancycrave
写真を貼る分には全く気にならなかったのですが、スクリーンショットを貼ったりすると、背景との境目がなくて、見辛い…ってなっていたので、スクリーンショットのときだけ、画像に影をつけたいと思います。
今回、本当に自分のための覚書なので、すごい説明適当ですいません!

下記の画像のようにします。

画像を普通にメディアから挿入すると、勝手にWordPressがclassをつけてくれます。
テキストタブで開いて、WordPressがつけてくれたclassの最後に自分でscreenshotというクラスを足しました。(赤字部分です)
全部の画像に影をつけたいわけではなく、任意で自分のつけたい画像だけに影をつけたいので、自分で都度クラスを書き足せばいいかなと思ってます。
<a href=”https://livelikeatraveler.com/wp-content/uploads/2018/10/6c48f792ed544680ae121697edc5a8b0.png”><img class=”alignnone wp-image-1071 size-large screenshot” src=”https://livelikeatraveler.com/wp-content/uploads/2018/10/6c48f792ed544680ae121697edc5a8b0-e1541937687573-1024×905.png” alt=”” width=”1024″ height=”905″ /></a>

追加CSSの末尾に下記のコードを追記。

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

参考URL
http://wizlibla.com/?p=3117

コード部分をちゃんとコードスニペットにしてなくてすいません!あんま、私のページからそのままコピーしない方がいいかもw
コードスニペットもいろんなプラグインあるみたいで、決めきれず…
どなたかおすすめありましたらお教えくださいませ!

たとえ日本にいても「旅するように暮らしたい」、そんな気持ちでブログを始めました。経歴:専門商社にて社内ニート、貿易事務を経て、28歳でウェブディレクターへの異業種転職。インバウンド観光系の多言語サイトが強みの会社で働いています。好きなもの:web、映画、旅行。ウェブ業界で学んだことや観光にまつわることを書いています。更新:毎週火曜日20:30更新中です。

Leave a Reply

Name *

Email *

Website

© 2018 LIVE LIKE A TRAVELER . All Rights Reserved.