Cocoon/吹き出しの三角部分(疑似要素)にも影をつけるには?CSS【drop-shadow】を使う!

アイキャッチ/吹き出しカスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

数多くあるワードプレスのテーマの中でも、「Cocoon」は高機能でとても使いやすく愛用しています。

いろいろな機能満載で各種ボックスの他、例えばこんな吹き出しなんかも簡単に作れてしまいます。

吹き出しに影

特に問題のないシンプルな吹き出しでよいのですが、とあるサイトを見ていたら影がついているおしゃれな吹き出しを発見。よい感じなのでこのブログでもやってみようと思いました。

試行錯誤したとても細かい部分のカスタマイズになりますが、よろしければお付き合いください。

吹き出しに影をつけるために

まず思い付いたのはこちら。

このブログで影をつけるために色々なところで活躍している”box-shadow“。

box-shadowで影を作るCSS

.speech-balloon{
box-shadow: 2px 2px 3px darkgrey;
}
簡単な解説
  • box-shadow: 2px(左右の向き) 2px(上下の向き)3px(ぼかし) darkgrey(影の色);
  • 上下、左右の向きをpx(ピクセル)で指定します。
  • 色は16進数カラーコードやRGBAの書き方で指定します。

吹き出しに影

うん、さりげなく影がついて悪くない。

これはこれでよいですね♪

でも、吹き出しの三角部分にも影をつけるにはどうしたらよいかな

三角部分にbox-shadowをかけてみる

そこで、吹き出しの三角部分(疑似要素)に直接box-shadowを指定してみました。

吹き出しに影(失敗)

わーお!!!

三角のまわりに四角く影がついてしまい大失敗です(,,・д・)

やりたかったのはこれではない…

吹き出しの三角部分まで影をつけるには?

自分ではお手上げでなのでそんなときはググって天才の方々の知恵を借りることに。

吹き出しは□(四角)に△(三角:疑似要素)を組み合わせて作っています。

疑似要素である三角部分まで影をつけるには”drop-shadow”を使う方法があるよ!

drop-shadow!

さっそくやってみます。

drop-shadowを使ったCSS

filter: drop-shadow と表記します。

.speech-balloon{
filter: drop-shadow(2px 3px 3px darkgrey);
}

このコードを反映させてみると…

吹き出しに影

こんな感じでやっと成功することができました^^

マイクロバルーン(吹き出し)にも影をつけられます

Cocoonで簡単に使うことのできるシンプルな吹き出しに”マイクロバルーン”がありますが、ここにも影をつけてみました。

drop-shadowを使って下の三角部分にも影がついて少し浮き上がっているように見えるかと思います。
.micro-balloon {
filter: drop-shadow(2px 2px 2px darkgrey);
}

あれこれと迷って影がついたときに達成感があったので、こんなこともできるよの記録としてカスタマイズの記事に残しておきたいと思います。

ではまた。

参考にさせていただいたサイト

“box-shadow(ボックスシャドウ)はもう古い?CSSで「影(シャドウ)」を付ける方法”

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズ
\Follow/
Turicco

Comment

タイトルとURLをコピーしました