吹き出しを簡単に使えるのが、
WordPressのプラグイン「SpeechBubble」です。
使っている方ならわかるかもしれませんが、
実はこのプラグイン、初期設定だと少しアイコンが小さかったりします。
今回僕は、speechbubbleをもっと見やすくしたいと考え、
それで出来れば、「誰でも使えるCSSで」と思いました。
現在BLOGRAMで、実用レベルまで引き上げられたと感じたので、
紹介したいと思います。
SpeechBubble
スピーチバブルは、プラグインを導入した瞬間から使えて、
文章をスピーチバブルのコードで囲うことで、
吹き出しで喋ってるような表現が出来ます。
CSS
では早速、CSSでアイコンを大きくして、
吹き出しをアイコンの大きさに対応させます。
SpeechBubbleには、初期状態でいくつか種類が用意されています。
そこで、種類別の設定は後回しにして、
どの吹き出しにも共通する部分を最初に設定します。
最初に、アイコンの大きさを幅100px高さ100pxにします。
/* アイコンの入れ物 */
.sb-icon {
height: 100px!important;
width: 100px!important;
}
/* アイコン */
.sb-icon img {
height: 100px!important;
width: 100px!important;
border: none!important;
border-radius: 0px!important;
}
次に、吹き出しの余白を大きくしたアイコンのサイズに合わせて、
吹き出しの中身、つまり文章の大きさと高さを設定します。
/* 吹き出しの余白 */
.sb-content {
margin-left: 120px!important;
margin-right: 90px!important;
margin-top: 40px!important;
}
/* 吹き出しの中身 */
.sb-speech-bubble {
font-size: 1.2em;
line-height: 2em;
}
レスポンシブに対応させよう
次にレスポンシブに対応させます。
スマホの普及のおかげか、
モバイルビューが非常に多いので、
モバイルフレンドリーなサイトにするためにも、
レスポンシブ対応は必須です。
ちなみにBLOGRAMでは、
レスポンシブ対応は、768px以下の時としています。
/* 768px以下の時 */
@media screen and (max-width:768px) {
.sb-type-std .sb-content {
margin-right: 0px!important;
}
.sb-type-think .sb-content {
margin-left: 0px!important;
margin-top: 30px!important;
}
.sb-type-fb-flat .sb-content {
margin-left: 0px!important;
margin-top: 30px!important;
}
}
レスポンシブの設定は、
吹き出しの種類で変わったりします。
その為、このサイトで使っている、
typeがstd・think・fb-flatの設定をしています。
他の種類も使いたい！という事であれば、
.sb-type-○○○の○○○の部分を、対応したコードに変更して、
余白の値を調整してみて下さい。
まとめ
SpeechBubbleは最終更新が2年前ですが、
現役で使えるプラグインだと思っています。
もし、アイコンが小さいと感じたら、
今日紹介したCSSを試してみて下さいね。