数多くあるワードプレスのテーマの中でも「Cocoon」は無料なのに高機能でとても使いやすく愛用しています。
各種装飾ボックスの他、例えば次のような吹き出しもプラグインを入れることなく簡単に作れてしまいます。
シンプルなデザインの吹き出しでとてもよいのですが、この記事ではプラスして影をつけてみます。
CSSを使用するとても細かい部分のカスタマイズになりますが、よろしければお付き合いください。
>>CocoonでCSSを編集する方法についてはこちらのページをご覧ください。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー33
- ワードプレスで２サイトを運営しています
です
吹き出しに影をつけるために
まず試してみるのが、当ブログで影をつけるために色々なところで活躍している
「box-shadow」
CSSのプロパティ（スタイルの種類）のひとつです。
「box-shadow」で影を作るCSS
例としてこのように書いてみます。
.speech-balloon{
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
- 「speech-balloon」は吹き出しに設定されているHTMLのクラス名です。
- box-shadow: 2px(左右の向き) 2px(上下の向き)3px(ぼかし) darkgray(影の色);
- 上下方向、左右方向の向きをpx（ピクセル）で指定します。
- 色はカラーコードやRGB値で指定します。
- カラーネーム：red,blue,green,grayなど
- カラーコード：#111111 といった6桁（または3桁）で表す
- RGB値：（色+透明度）で表す
rgba(0, 0, 0, 0.2)は黒の透明度は0.2という意味
このCSSを反映させるとこのような吹き出しになります。
うん、さりげなく影がついて悪くない。
これはこれでよいですね♪
これでもいいいけど、吹き出しの三角部分にも影をつけられないかな？
三角部分にbox-shadowをかけてみる
そこで、吹き出しの三角部分（疑似要素）に直接box-shadowを指定してみました。
わーお！！！
三角のまわりに四角く影がついてしまい大失敗です(,,・д・)
やりたかったのはこれではない…
吹き出しの三角部分（疑似要素）まで影をつけるには？
そんなときは先人の方々の知恵を借りることで解決します！
吹き出しは□（四角）に△（三角：疑似要素）を組み合わせて作っています。
疑似要素である三角部分まで影をつけるには「filter:drop-shadow」を使う方法があるよ！
filter:drop-shadow！！
さっそくやってみます。
filter:drop-shadowを使ったCSS
filter: drop-shadow と表記します。
.speech-balloon{
filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}
このコードを反映させてみると…
このように綺麗に影が作られました^^
比較／「box-shadow」と「filter:drop-shadow」でつけた影の違い
CSSのプロパティ「box-shadow」と「filter:drop-shadow」、どちらでも影を作れることは分かったけど、具体的にはどんな違いがあるのか？
背景透過したPNG形式の人物画像にそれぞれ影をつけて比較してみると、このような結果になります。
box-shadowの影
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
要素全体に対して影を作ります。
filter:drop-shadowの影
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.8));背景透過部分を無視して、表示されている（見えている）ものだけに影を作ります。
box-shadowは要素全体に四角く影が作られ、filter:drop-shadowでは人物の輪郭のまわりに影が作られているのが分かります。
このような使い分けができるCSSはとても便利ですね！
ひとこと／吹き出しに影をつけてイメチェンしませんか
あれこれと迷って影がついたときに達成感があったので、こんなこともできるよの記録としてカスタマイズの記事に残しておきます。
吹き出しの影の他、セレクタ部分（どこにCSSを反映させるか）を変えることで他の要素にも応用できますので試してしてくださいね。
今回は以上です。
Comment