ご訪問ありがとうございます.・。*+
茨城・千葉・宮城エリアの釣り(ファミリーフィッシング)をメインとした趣味ブログです。
ブログをカスタマイズすることが好きで無料ブログからWordPressに引っ越しました。
ゆっくりペースで更新中ですがぜひお立ち寄りください^^

全記事一覧はこちら >>

Cocoon(コクーン)の吹き出しに影をつけるCSS【drop-shadow】

吹き出しに影をつける カスタマイズ

この記事はワードプレスのテーマCocoon(コクーン)のカスタマイズになります

このテーマは高機能で使いやすく、例えばこんな吹き出しなんかも簡単に作れてしまいます。

吹き出しに影

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

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

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

このブログでも写真に影をつけるために使用している”box-shadow“。

box-shadowで影を作るCSS

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

吹き出しに影

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

でも、吹き出しの三角部分に影はつかずそのままなのがちょっと気になる…

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

そこで、吹き出しの三角にbox-shadowを指定してみました。

吹き出しに影(失敗)

ぐはー!

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

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

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

吹き出しの三角部分(疑似要素)まで影をつけるには”drop-shadow”を使う方法があるそうです。さっそくやってみることに。

drop-shadowを使ったCSS

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

/************************************
** cocoon吹き出し
************************************/
div.speech-balloon{
filter: drop-shadow(2px 3px 3px darkgrey);
}
吹き出しに影

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

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

drop-shadowを使って下の三角部分にも影がついているかと思います。カラーをRGBA表記して透明度も指定しています!CSSはこちら。

/************************************
** 吹き出し(マイクロバルーン)
************************************/
.micro-balloon {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

影がついたときに達成感があった(コピペしただけ)のでカスタマイズの記事に残しておきたいと思います。ではまた。

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

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


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

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

  • コードは半角英数字になっているか
  • 余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSのメモ書きはきちんと/* */で囲んでいるか

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

カスタマイズの多くは他のサイトを参考にしながらも、自分で調べて試行錯誤しながら手間隙をかけてコードを書いています。


このデザインにするにはどう書けばよい?CSSが効かなかったり、コードの不備でデザインが崩れてしまったり修復したり、あーでもない、こーでもない!

コピペされた際にはコメント欄に一言(カスタマイズできた、不具合ありなど何でも)、足跡を残していただくと大変励みになります^^

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

コメント


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