ブログで会話形式の「吹き出し」を使うのが流行ってますね。
テーマによっては最初から吹き出し機能が付いていますが、後付けする場合は「Speech Bubble（スピーチバブル）」というプラグインを使う人が多いようです。
ただ、「スピーチバブル」を入れると他のプラグインと競合してうまく機能しない例があるようなのでちょっと心配ですね。（どのプラグインにもある話ですが・・・。）
ZAKKIPOSTはなるべくプラグインを使わないことをモットーにしていますので、今回も例のごとくプラグインなしで「吹き出し」を導入してみたいと思います。
今回は、こちらの記事を参考にさせていただきました。
はてなブログで吹き出しを導入する内容になっていましたので、WordPress用に少しアレンジを加えてご紹介します。
こんな感じで表示できるようになるよ。
きゃー。かわいいー！
設定方法（CSSの登録）
こちらのCSSをコピペしてください。（※89行目と90行目は書き換えが必要です。）
| /* 吹き出しのCSS */ | |
| .entry-content .l-fuki, | |
| .entry-content .r-fuki { | |
| position: relative; | |
| width: 80%; | |
| box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| padding: 20px; | |
| border-radius: 6px; | |
| border: 2px solid #999; | |
| box-shadow: 1px 1px 5px #aaa; | |
| background-color: #fff; | |
| z-index: 1; | |
| } | |
| .entry-content .l-fuki { | |
| margin: 20px 20% 40px 0; | |
| } | |
| .entry-content .r-fuki { | |
| margin: 20px 0 40px 19%; | |
| } | |
| .entry-content .l-fuki::before, | |
| .entry-content .r-fuki::before { | |
| position: absolute; | |
| content: ""; | |
| top: 16px; | |
| width: 10px; | |
| height: 10px; | |
| border-right: 2px solid #999; | |
| border-bottom: 2px solid #999; | |
| background-color: #fff; | |
| z-index: 2; | |
| } | |
| .entry-content .l-fuki::before { | |
| right: -7px; | |
| transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); | |
| } | |
| .entry-content .r-fuki::before { | |
| left: -7px; | |
| transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| } | |
| .entry-content .l-fuki::after, | |
| .entry-content .r-fuki::after { | |
| position: absolute; | |
| content: ""; | |
| width: 80px; | |
| height: 80px; | |
| top: -10px; | |
| border-radius: 40px; | |
| border: 3px solid #fff; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| box-shadow: 1px 1px 5px #aaa; | |
| } | |
| .entry-content .l-fuki::after { | |
| right: -110px; | |
| } | |
| .entry-content .r-fuki::after { | |
| left: -110px; | |
| } | |
| @media screen and (max-width: 620px) { | |
| .entry-content .l-fuki, | |
| .entry-content .r-fuki { | |
| width: 70% | |
| } | |
| .entry-content .l-fuki { | |
| margin-right: 30%; | |
| } | |
| .entry-content .r-fuki { | |
| margin-left: 30%; | |
| } | |
| } | |
| @media screen and (max-width: 478px) { | |
| .entry-content .l-fuki::after, | |
| .entry-content .r-fuki::after { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 30px; | |
| } | |
| .entry-content .l-fuki::after { | |
| right: -84px; | |
| } | |
| .entry-content .r-fuki::after { | |
| left: -84px; | |
| } | |
| } | |
| .クラス名::after {background-image:url(画像のURL);} | |
| .クラス名::after {background-image:url(画像のURL);} |
by 書き換えるのは一番下（89行目、90行目）にある「クラス名」と「画像のURL」です。
クラス名で使用できる文字は、半角の英数字、ハイフン（-）、アンダーバー（_）です。
アルファベットで始めなければなりません。（数字や記号では始められません）
吹き出しの使い方
先程設定した吹き出しを実際に使ってみましょう。
吹き出しを右側（アイコン画像を左側）に表示する方法
吹き出しに入れたいコメントを「開始タグ」と「終了タグ」の間にはさんでください。
開始タグ
| <p class="r-fuki クラス名"> |
終了タグ
| </p> |
これが右側（アイコン画像左）だよ。できたかな？
吹き出しを左側（アイコン画像を右側）に表示する方法
吹き出しに入れたいコメントを「開始タグ」と「終了タグ」の間にはさんでください。
開始タグ
| <p class="l-fuki クラス名"> |
終了タグ
| </p> |
これが左側（アイコン右）ですよ。できましたかー？
ちなみに、この例のようにアイコン画像を変える場合は、クラス名を変えて、そのクラス名に対する画像のURLを変えるだけです。
吹き出しをもっと簡単に使う方法（AddQuickTag）
吹き出しを入れるときに毎回この開始タグを入れるのはちょっと面倒ですよね。
面倒どころか、そもそも覚えられないよー
いいのがあるよ。
誰！？
クイックタグを登録できるプラグイン「AddQuickTag」だ。
あ、それこの前入れたやつだー
そうだ。詳しくは下にリンクを貼っておくからそっちの記事を読んでくれ。
AddQuickTagを使えば、開始タグを覚えたり、わざわざ手打ちする必要がなくなりますので、簡単に「吹き出し」が使えるようになります。
最後にひとこと
以上でWordPressで会話形式の吹き出しをプラグインなしで導入する方法の紹介は終わりです。
「プラグインなし」と言っておきながら最後に「AddQuickTagを使え」という、ちょっとズルい記事になってしまいましたが、「AddQuickTag」は本当に便利なプラグインなので「吹き出し」と合わせて是非使ってみてください。
