Speechbubbleをコピペで見やすく!CSSでアレンジしよう

吹き出しを簡単に使えるのが、

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を試してみて下さいね。