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

記事の内容のレベル

評価 :1/3。

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

あ゛ぁ〜っふあ〜ふあ〜ふあ〜!!!

それ車道!

美しめの
ずーかま

・・・ってな話です。


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

↓こんな感じで。



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

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



なんでだとおもいます?

ねぇ、なんでだとおもいます?!

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

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

影なし

影あり

べ〜っひゃっひゃっひゃっ!!!

神に細部は宿る!

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

ずーかマン

トーーーーーゥ!
ハーッハハハハハ!!!

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

CSSとは?

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

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



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

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



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

今からやること
  1. 画像にどんな影をつけるかをCSSで指定する
  2. CSSの設定を画像に反映する

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

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

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

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

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

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

美しめの
ずーかま

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



・・・のまえに。

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

色の指定について

rgbaのカッコ内の数字は、左から順に、「赤、緑、青、透明度」の指定となってます。

色の要素は「0〜255」、透明度は「0〜1.0」の範囲で指定できます。



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



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

べっははははっ!!!

それ車道!

・・・え?

CSSを画像に適用する

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

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

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

美しめの
ずーかま

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

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

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

「shadow」を挿入する場所

<img class=”” 〜略〜 />

↑上記の「””」内に「shadow」と追記します。

もともと別のワードが入っている場合は、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の記述がない場合は、以下を参考に記述してみてください。

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

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

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

美しめの
ずーかま

手順は以上です。

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

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

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

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

↓  ↓  ↓  ↓  ↓  ↓


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

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

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

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

❌デザインがうまく反映されない

❌エラーが出て追加CSSが保存できない

場合があります。

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

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

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



ちなみにドロップシャドウは、当ブログのテーマ(「STORK19」) では動作確認済みです。



ではまた!(`・ω・´)ゞ

このブログがおもろかったら
クリックして応援してね☆

↓  ↓  ↓  ↓

 

にほんブログ村 小遣いブログ 副業・副収入へ

コメントを残す

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

ABOUT US

ずーかま
30代社畜。妻子あり。副業ブログで月2万円の不労所得をつくりました。・・・でも、自動収入は捨てました。理由は、「楽しくなかったから」です。売り込みばっかして、ブログを続ける目的を見失っていたからです。なので今は、ブログを楽しみながら、「ブログやってるけどなかなか稼げない人、ブログ始めて間もない人、これからの人」そういう(特にサラリーマンの)ブログ仲間が、月1万の壁を超えられるようになるための情報ダダ漏れで運営しています。