Luxeritas吹き出し機能を個性的にアレンジして使いこなしましょう！
どうも。
吹き出し関連第三弾ですね。この機能に関しての記事は割と見られる感じがするので、調子にのってやってみます。
対象者はLuxeritasのバージョン3以降をお使いの方ですね。他のテーマを使ってる場合は話が通じないので、Luxeritasにはこういった機能もありますよ、という参考程度に。
今回はデフォルト状態でもかなりオシャレに使える吹き出し機能をもっと個性的にしてみよう、というテーマのもと書いていきます。
吹き出し機能のアレンジ
注意点
基本的に吹き出しのCSSは結構多く出回ってますよね？
なので適当に気に入ったものをLuxeritasのショートコードや定型文で引っ張って来たものに適用させる、という手法をとりましょう…とするつもりでしたが。
結構、CSSの記述の仕方も様々あって、うまい具合に噛み合うことが無くちょっとボツにしましたｗ一応大きく丸い吹き出しに変えることは出来たんですが、結局調整しまくりで「これやったら吹き出し機能使う必要無くね？」となってしまいましたので。
以下はあくまでもLuxeritasの吹き出し機能の拡張という形を取ります。シンプルにすぐ出来るような感じになります。
一部だけ見た目を変更する
以前書いた可変カスタマイズを適用していますので若干お使いの吹き出しと仕様が違う場合があることをご了承あれ。
例えば、定型文で吹き出し機能を記事内に入れる場合。
画像のURLを変更すれば、喋っているキャラクターを変えることも出来ます。これによりわちゃわちゃ会話している感じをかもし出すことも出来ます。
しかしクラス名の都合上、吹き出し自体の色や背景色を変更することは出来ません。左か、右かって感じですよね？
そういった場合に一工夫加えれば、
中下くん
中下くん
こんな感じで変化を付けられます。
これが一番やること少なくて、実用的じゃないかな、と思います。
やってることは、
- 一番始め、全体を囲っている「balloon」をさらに例として「balloon1」みたいな新クラスで囲う。
- 「balloon1」の中の「balloon-right」の文字色や背景色を変更する。
- 念の為「balloon1」の存在を消す（margin：0、padding：0を指定）。
<div class="balloon1">
<div class="balloon">
<div class="balloon-img-right">
<figure><img src="画像URL" alt="Right Caption" width="60" height="60" /></figure>
<span class="balloon-img-caption">名前</span>
</div>
<div class="balloon-right">これが変更後</div>
</div>
</div>このクラス名をそれぞれ違うものにしていけば、何個増えようが一番ラクに見た目を変えられると思います。
この「balloon1」というクラスを追加するやり方は、実はすごい効率が良いのです。
balloon-rightやその「after」、「before」の名前は変えてないので元々指定してあるものを再度指定する必要がある、ということはありません。
付け足したものだけ、上書きされるという感じでめちゃくちゃ使い勝手が良くなります。
ただ丸みとか余白とかを変化させるとその都度、吹き出しの▶部分を動かさないといけないので非推奨としておきます。
それするなら、どっか他所のCSSとHTMLをコピペして独自に入れたほうが早いですｗ
どうしても独自にLuxeritasの吹き出し機能でやりたい方は、デベロッパーツールをつこてください。参考画像↓
こんな感じで出来なくは無いですが、環境によって数値が大きく変わる可能性があるため敢えて載っけません。
先程の、「balloon1」で囲った場合の装飾例は以下のようになります。
.balloon1 .balloon-right{
color:red;
background:yellow;
}
.balloon1 .balloon-right:after{
border-left:solid 12px yellow;
}
.balloon1{
margin:0;
padding:0;
}これはほんとにわかりやすくただの例として上げてるだけなので、コピペする必要はありません。
また、枠線の太さは設定値により異なってくるので、一度検証ツールで確認を行なってください。（僕の場合は枠線を2pxに設定中）
直接スタイルシートに記述しても良いですし、これを＜style＞で囲ってカスタムフィールドを使って（Luxeritasのadd-headで。）記事毎に挿入したり、ショートコードに登録して使う時に呼び出したりすればおｋですね。
多用する場合は吹き出しの定型文にも「balloon○」というクラスで囲ったものを用意しておくと、なお作業がはかどります。
正直やっつけ感満載なんで申し訳無いですがｗｗ
.balloon1 .balloon-right:after{
border-left:solid 12px yellow;/*吹き出し背景色に*/
}この部分は枠線を使っている場合のみ記述が必要です。afterの色を変えます。
逆に枠線の色も変えたい場合はballoon-rightの枠線色とballoon-right:beforeの背景色を同じ色に変更する必要があります。
「吹き出しの枠線と同じ色の▶をbefore要素で作って、背景色と同じ▶をafter要素でつくりずらして重ねる」…こうすることで枠線が表現してあります。
散々言われてることなので改めて説明する必要も無いかもですが…。わかりやすいよう水色部分を赤に変化させてます。
絵で言うと黒部分をbefore、水色（赤）部分をafterで指定してあります。
このことから枠線太さを変えようとすると、ずらしている位置も変える必要が出てくるので、注意が必要ですね。
枠線を消す
単純に普段は枠線付きだけど、特定の物は枠線を消して使いたい場合。
こうします。
.balloon2 .balloon-right{
background:orange;
color:white;
border:none;
}
.balloon2 .balloon-right:before{
border-left:solid 12px transparent;/*枠線用▶を透明に*/
}
.balloon2 .balloon-right:after{
border-left:solid 12px orange/*吹き出し背景と同色に*/;
}中下くん
こんな感じで色々いじくれます。「before」の枠線用色付き三角はborder-leftで指定してあるので透明化（transparantを指定）させれば消えました。
中央に配置させたい
あんま無いかもしれませんが、こういった使い方も出来ます。
ちょっと見出しっぽく使いたい人用に。
「コンテンツがここで切り替わるよ」っていうのがよくわかりますよね。
.balloon3{
width:60%;
}全体を囲ってるものの幅を、60％で指定。
まぁ絵で解説した方が早いですね。
まぁPCでしか表示確認してなかったのでスマホでは若干左寄りになってますね。要調整。
※ダメな例としてスマホで見たらズレてるままにしてます。「＠media」を使ってデバイス毎に％を調整してくだしあ。
このやり方は「吹き出し右」にのみ有効ですね。
逆に吹き出し左に適用したければ、ただ単に「padding-left」を少し多めに入れたら行けると思います。
SEO的に見出しなら＜h＞タグ使えや、って感じですがｗ
文字を変化させる（予告のみ）
ちょっと長くなってしまったのでこっちはあっさり目に書きます。ほんとはこっちのほうがメインにするつもりだったんですが。今回は見てもらう形になるだけですね。
まぁ百聞は一見にしかず。
かなり女の子っぽくなりますね！
こんな感じです。一部ブラウザでは何が行われてるかたぶんわからんでしょうが、フォントファミリーを変更してます。
女の子のキャラ使ってる場合だと、こんな感じで一工夫加えればかなり雰囲気出るんじゃないでしょうかね？
やり方自体は、「Webフォント・サブセット」でグーグル先生に聞けば、たぶん出てきます。簡単です。
他にもヘッダーの文字やグローバルナビ内など随所で使ってますね。追記：使ってませんｗｗ辞めました。
次回更新で詳しいやり方は書きますが、待てるかそんなもん、という場合は調べてみてもよろしいですな。