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

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

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

わりとどうでもいい!!

ほんとそれな!!

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

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

最初は全然わかってませんでしたが、疑似要素などについて勉強していく中で理解できたので作ってみました。
コピペしてもらって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はよく使うタグをツールバーにアイコン表示させるプラグインです。

その他

注意点

左からの吹き出しの色は白(#fff)になっているので以下のようにしてください。

①背景色を付ける
②吹き出しの色自体を変える

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

背景色なんかは

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

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

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