【WordPress】プラグインなしでギザギザ吹き出し【CSS】

CSSもすこしずつ理解できるようになってきたよ。

おかげで座りっぱなしで体重が10kg増えたらしいよ…

わりとどうでもいい!!

ほ ん と そ れ な!!

ただ作りたかった。後悔はしていない。


もとはWordpressでプラグインなしで吹き出しを使えないかを勉強した時に「ギザギザの吹き出しって作れないのかな?」って思ったのがきっかけです。

【Wordpress】プラグインなしでLINE風会話BOX【CSS】
セリフの吹き出しがプラグインなしで出来るのってマジ? 出来るんじゃないの? 調べてみたら出来るらしいね。でもCSSの基礎が少しわかったぐらいなんだけど理解できる? じゃあ実際にどういうふうに構成されているか見ながら勉強していこうか! は...

最初は全然わかってませんでしたが、疑似要素などについて勉強していく中で理解できたので作ってみました。
コピペしてもらってOKです。

むしろ誰か見栄えをもっとよくしてください…オネガイシマス.

HTML

[左からの場合]

<div class="surprised-left1"><p id="surprised-left2">ここに本文</p></div>

[右からの場合]

<div class="surprised-right1"><p id="surprised-right2">ここに本文</p></div>

[吹き出し終了時]

<div style="clear:both"></div>

CSS

/**********************************
左からギザギザ吹き出し
**********************************/
.surprised-left1 {
    font-size: 140%;
    font-weight: bold;
    padding: 10px;
    margin: 20px;
    margin-right: 20%;
    max-width: 500px;
    clear: both;
    background: #fff;
    position: relative;
    float: left;
}

.surprised-left1::before {
    content: "";
    height: 14px;
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    background: linear-gradient(45deg, #fff 25%, transparent 0%), linear-gradient(315deg, #fff 25%, transparent 0%), linear-gradient(-225deg, transparent 25%, transparent 0%) -7px 0, linear-gradient(135deg, transparent 25%, transparent 0%) -7px 0;
    background-size: 14px 14px;
    background-color: transparent;
}

.surprised-left1::after {
    content: "";
    height: 14px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    background:
    linear-gradient(135deg, #fff 25%, transparent 25%), linear-gradient(225deg, #fff 25%, transparent 25%), linear-gradient(315deg, transparent 25%, transparent 25%) -7px 0, linear-gradient(45deg, transparent 25%, transparent 25%) -7px 0;
    background-size: 14px 14px;
    background-color: transparent;
}

#surprised-left2  {
    position:relative;
    margin:0;
}

#surprised-left2::before{
    content: "";
    position:absolute;
    width:14px;
    top:-10px;
    bottom:-10px;
    left:-24px;
    background:
    linear-gradient(45deg, transparent 25%, transparent 0%), linear-gradient(315deg, #fff 25%, transparent 0%), linear-gradient(-225deg, transparent 25%, transparent 0%), linear-gradient(-135deg, #fff 25%, transparent 0%) ;
    background-size: 14px 14px;
    background-color: transparent;
}

#surprised-left2::after {
    content: "";
    position:absolute;
    width:14px;
    top:-10px;
    bottom:-10px;
    right:-24px;
    background:
    linear-gradient(45deg, #fff 25%, transparent 0%), linear-gradient(315deg, transparent 25%, transparent 0%), linear-gradient(-225deg, #fff 25%, transparent 0%),
    linear-gradient(-135deg, transparent 25%, transparent 0%) ;
    background-size: 14px 14px;
    background-color: transparent;
}



/**********************************
右からギザギザ吹き出し
**********************************/
.surprised-right1 {
    font-size: 140%;
    font-weight: bold;
    padding: 10px;
    margin: 20px;
    margin-left: 20%;
    max-width: 500px;
    clear: both;
    background: #85e249;
    position: relative;
    float: right;
}

.surprised-right1::before {
    content: '';
    height: 14px;
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    background: linear-gradient(45deg, #85e249 25%, transparent 0%), linear-gradient(315deg, #85e249 25%, transparent 0%), linear-gradient(-225deg, transparent 25%, transparent 0%) -7px 0, linear-gradient(135deg, transparent 25%, transparent 0%) -7px 0;
    background-size: 14px 14px;
    background-color: transparent;
}

.surprised-right1::after {
    content: ' ';
    height: 14px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    background:
    linear-gradient(135deg, #85e249 25%, transparent 25%), linear-gradient(225deg, #85e249 25%, transparent 25%), linear-gradient(315deg, transparent 25%, transparent 25%) -7px 0, linear-gradient(45deg, transparent 25%, transparent 25%) -7px 0;
    background-size: 14px 14px;
    background-color: transparent;
}

#surprised-right2  {
    position:relative;
    margin:0;
}

#surprised-right2::before{
    content: "";
    position:absolute;
    width:14px;
    top:-10px;
    bottom:-10px;
    left:-24px;
    background:
    linear-gradient(45deg, transparent 25%, transparent 0%), linear-gradient(315deg, #85e249 25%, transparent 0%), linear-gradient(-225deg, transparent 25%, transparent 0%), linear-gradient(-135deg, #85e249 25%, transparent 0%) ;
    background-size: 14px 14px;
    background-color: transparent;
}

#surprised-right2::after {
    content: "";
    position:absolute;
    width:14px;
    top:-10px;
    bottom:-10px;
    right:-24px;
    background:
    linear-gradient(45deg, #85e249 25%, transparent 0%), linear-gradient(315deg, transparent 25%, transparent 0%), linear-gradient(-225deg, #85e249 25%, transparent 0%),
    linear-gradient(-135deg, transparent 25%, transparent 0%) ;
    background-size: 14px 14px;
    background-color: transparent;
}


いちいちコードを書かずにaddquicktagでタグ入力を簡単にしておく設定も同時にしておくと楽になるかと。
※addauicktagはよく使うタグをツールバーにアイコン表示させるプラグインです。

AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。


その他
注意点

  • 左からの吹き出しの色は白(#fff)になっているので以下のようにしてください。
  • ①背景色を付ける
    ②吹き出しの色自体を変える

  • 吹き出しを終わる場合は<div style=”clear:both”></div>を必ず付けてください。付けないとfloatプロパティが吹き出しより下のコンテンツに影響する恐れがある為です。


背景色なんかは

<div style="background-color: #1ab7ea;"></div>

で吹き出し部分を挟んであげれば同じ色になります。


ご指摘あれば教えてもらえると幸いです。