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