Luxeritasの吹き出しを可変幅にするカスタマイズ
先程、「吹き出しを可変幅にするには？」というコメントを頂きまして「あ…それ良いなｗ」と思って当ブログでも採用させてもらいましたw
コメント欄で完結させようとしたんですがショートコードが使えないとのことでシンタックスハイライター使いたいので記事として書きます。
吹き出しを可変にする方法
サンプル
ども。
可変とはこういうこと。
リアナ
文字の長さによって幅が変わっていくということです。
リアナ
スッキリしますね。
余白が多すぎるとちょっと…という場合にはもってこいじゃないでしょうかね？
CSS
.balloon-right{
font-weight:bold;
margin-right:12px;
float:right;
padding: 9px 7px;
max-width:80%;
}
.balloon-left{
font-weight:bold;
margin-left:12px;
float:left;
padding: 9px 7px;
max-width:80%;
}これをスタイルシートに記述します。
最大幅を少し小さめに指定しておかないと、画像と吹き出し部分が二段になってしまうため、少し小さくしてます。
あとここまで書いて「そういやスマホで確認してないやｗ」と思ってみると、やっぱり崩れてるｗｗ
@media(max-width:540px){
.balloon-left,.balloon-right{
max-width:70%;
}
}これで対応しました。とりあえず僕の環境では崩れないようになりました。
心配だな…という場合は小デバイスのみ60％ぐらいまで下げても良いですね、割と違和感ありませんでしたとも。
カスタマイズ用解説
「font-weight」は太字にしてます。太字が嫌なら消しても大丈夫です。
「margin-left,right」はそれぞれ画像との余白を調整してます。もうちょい広くしたい場合は値を大きくすれば可能ですが、そうすると表示が崩れる可能性もあるので、余白とった分最大幅を狭めた方が無難です。
「padding」は吹き出し内の余白です。上下に9px、左右は7px取っています。お好みで調整してくだしあ。
「float」は端っこに寄せる為に書いてます。画像と吹き出し部分どちらもブロック要素である＜div＞ですので同じ高さでつなげて表示したい場合にはこう書くと良いそうな。
こんなところですね。