CSSで画像に影をつける方法【コピペOK・PNGファイルも可！】

記事の内容のレベル

画像に影をつけたすぎるブロガーさん向け

あ゛ぁ〜っふあ〜ふあ〜ふあ〜！！！

それ車道！

・・・ってな話です。

ふだんブロックエディタをお使いのブロガーさんは、
記事の編集時に、画像にサクッと影がつけられることはご存じだとおもいます。

↓こんな感じで。

しかし、サイドバーのカスタマイズ画面で画像を挿入しても、
影がつけられないんですよ。

↓影つけるやつがない・・・

なんでだとおもいます？

ねぇ、なんでだとおもいます？！

こぉぉれはこまったぁぁぁッ！！！

こまかいところですが、影あるのとないのとでは、リッチ感が違います。

影なし

影あり

べ〜っひゃっひゃっひゃっ！！！

神に細部は宿る！

あっ・・・細部に神は宿る！

トーーーーーゥ！
ハーッハハハハハ！！！

そんなときは、CSSでカンタンに影がつけられるぞッ！

Webページの見た目を指定する言語のことですが・・・

そんなことは別におぼえなくていいです。

ぼくも今調べて知りました。（マジで）

知らずともできるので、サクッといきましょう。

ブログサイドバーの画像などにCSSで影をつける方法

画像にどんな影をつけるかCSSで指定する【コピペオッケー】

一応あとで解説しますが、いい感じで調整したんで、
わかんない人は完全コピペでオッケーです。

まずは以下のコードをコピーだ！

.shadow {
     filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
 }

ワードプレスの管理画面から「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリックだ！

枠内にコピーしたコードを貼り付けて、「公開」ボタンをクリックしたら終了！！

以上で影の指定は完了ですね。
あとは、画像に適用するだけです。

・・・のまえに。

影の設定を自分好みに変更したい人向けに、
コードの数値の意味をば解説。

画像にCSSを適用したあとに、プレビュー画面で確認しながら調整してみてくださいな。

ちなみにこのCSSデザインの指定は、
「ドロップシャドウ」って言うみたいです。

べっははははっ！！！

それ車道！

・・・え？

CSSを画像に適用する

追加CSSに追加したコードは、あくまで影の設定を指定しただけなので、
画像にまだ影はつきません。

画像に影をつけるためには、設定したCSSを呼びだしてやる必要があります。

ッホホ。ひょっとしてお呼びですか？

あ、お呼びじゃないですね。

カスタマイズ画面で影をつけたい画像を挿入したら、「テキスト」をクリックして、HTML表示に切り替えだ！

「img class」のところに、「shadow」を追加だ！

<img class="shadow aligncenter size-full wp-image-####" src="https://zookama.com/wp-content/uploads/2021/06/ok-family04.png" alt="" width="730" height="516" /> 

 <img class="shadow" src="画像のURL" alt="" /> 

プレビュー画面で画像に影がついたら成功だッ！

わすれずに公開しておくのだ！

手順は以上です。

ドロップシャドウのココが優れている！

なんといっても、PNGファイルに対応しているところがイイ！！

つまり、円形の画像とか、凸凹な形でも、画像に沿って影をつくってくれるのです！
（PNGファイルの場合）

ちょっとしたところで差別化したくて、
このブログでは、運営者アイコンを丸にしてあります。

↓　　↓　　↓　　↓　　↓　　↓

あと、キモいエモいツイッターフォローボタンもつくりました。

キモい差別化したツイッターフォローボタンの作り方はこちらで。

注意点：ブログテーマによっては、反映されなかったり、CSSがうまく保存できない場合も・・・

これはCSS全般に言えることですが、お使いのブログテーマによっては、

場合があります。

なぜこういうエラーが起こるのかというと、
ブログテーマ側でもデザイン言語を使用しているからです。

そこへあらたにデザイン言語を追加すると、
言語（命令）同士が干渉する場合があるからですね。

もし、エラーが出てしまう場合はグーグォル （Google）で調べてみるか、
いさぎよくあきらめましょう。

ではまた！(｀・ω・´)ゞ