どうも！LSSです！！
なんとなーく知ってはいたんですが、使った事はなかった事のひとつ。
「CSSのclassをタグオプションで指定する際、半角スペース区切りで複数指定できる」
というのを試してみるとともに、それを利用して「色違いの吹き出し」を作ってみました！
まずはサンプルから
天満 玲子
あははは！何が魔女っ子よ。
マキなんてスティックがなけりゃ
タダどんくさいだけの女じゃない。
立倉 麻希
返せーっ。ドロボーっ！
天満 玲子
人聞きが悪いわね。
あなたがこれを持ってたってロクな事に使わないから
取り上げただけよ。
あなたがこれを使ったおかげで、私は…私は…。
立倉 麻希
何いってんの。
あんたなんてあぁでもしなきゃ、一生、男とヤレないじゃない。
感謝してよね。
天満 玲子
こ…殺してやる！ブッ殺してやる！！
ヘケマカヘケマキ！魔女っ子は火あぶりになれッ！！
↑の例文は
から抜粋しましたｗ
コード
<style><!--
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 15px solid transparent;
border-bottom-width: 15px;
border-bottom-style:solid;
}
.fkds{
display:inline-block;
position:relative;
padding:1em;
border-radius:15px;
}
.c1::before{
border-bottom-color:pink;
}
.c1{
background-color:pink;
}
.c2::before{
border-bottom-color:lightblue;
}
.c2{
background-color:lightblue;
}
--></style>
<p> </p>
<p><strong>天満 玲子</strong></p>
<p class="fkds c2">あははは！何が魔女っ子よ。<br />マキなんてスティックがなけりゃ<br />タダどんくさいだけの女じゃない。</p>
<p> </p>
<p><strong>立倉 麻希</strong></p>
<p class="fkds c1">返せーっ。ドロボーっ！</p>
<p> </p>
<p><strong>天満 玲子</strong></p>
<p class="fkds c2">人聞きが悪いわね。<br />あなたがこれを持ってたってロクな事に使わないから<br />取り上げただけよ。<br />あなたがこれを使ったおかげで、私は…私は…。</p>
コード解説
以前の記事、
のstyleタグ内、.fkds::beforeと.fkdsの指定部分から「色を指定している部分」のみを削除し、別クラスc1・c2として指定しています。
※あと、三角の傾きをちょっと調整しました。
.c1::before{
border-bottom-color:pink;
}
.c1{
background-color:pink;
}
↑この部分ですね。それぞれ::before（三角部分）と本体部分に対する色指定で、c1の時はピンクになるようにしています。
同様に、
.c2::before{
border-bottom-color:lightblue;
}
.c2{
background-color:lightblue;
}
c2の時は水色になるようにしました。
こうしておくと、
<p class="fkds c1">
のように指定した時、
指定できるという事になります！
同じ要領でc3、c4と増やしていってもいいですね^^
コピぺして使う際の手順
まず、<style>タグ部分をコピペします。
<style><!--
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 15px solid transparent;
border-bottom-width: 15px;
border-bottom-style:solid;
}
.fkds{
display:inline-block;
position:relative;
padding:1em;
border-radius:15px;
}
.c1::before{
border-bottom-color:pink;
}
.c1{
background-color:pink;
}
.c2::before{
border-bottom-color:lightblue;
}
.c2{
background-color:lightblue;
}
--></style>
↑この部分ですね。
これだけコピペしておけば、あとは吹き出しにしたい部分の文章を、
- はてなブログの「編集 みたまま」で普通に打ってから
- HTML編集画面で該当部分のpタグを探して、
- class="fkds c1"と付け足して
- <p class="fkds c1">吹き出しにしたい内容</p>という形にする
事で、吹き出しが作れますし、c1をc2にすると色が変わります^^
吹き出しの内容の文章は再度「編集 見たまま」画面でも修正できます。
※吹き出し内で改行したい場合は、「Shiftキーを押しながらEnterキー」でOK！
複数クラス指定による恩恵
色違いの吹き出しを
「それぞれの色の吹き出しクラスを作る」と、
コードがかなり長くなってしまいますが、
「異なる部分だけ」を別にクラスとして定義する事で、
CSSの記述をそれほど増やさずに使い分けができますね^^
今回は色だけを分けましたが、他にも色々と応用できそうです！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
