var vc_pid = "885668610";

けいたろうの田舎暮らし

日々の体験談や思ったことを綴る、雑記ブログです。

はてなブログでLINE風やTwitter風に吹き出し会話をカスタマイズする方法。CSSをコピーするだけです。

はじめに

吹き出し会話、いいですよね。

 

せっかく使うなら、真っ白の吹き出しじゃなくてLINE風やTwitter風にした方がポップだし馴染み深いなぁなんて思う方もいるかと思います。

 

そんな方向けに、コードをコピーするだけで使えるCSSコードを紹介します。

 

 

吹き出し会話の設定方法

吹き出し会話の設定方法や使い方について、別記事でまとめていますのでこちらを参照ください。

 

keitalog.hatenablog.com

 

 

LINE風にカスタマイズ

完成イメージ 

はてなブログでLINE風やTwitter風に吹き出し会話をカスタマイズする方法。CSSをコピーするだけです。

 

CSSコード

クラス名画像URLは個別に設定して下さい。

 

/* 吹き出しCSS */

.entry-content .left-fukidashi{

                   position: relative;

                   width: 80%;

                   box-sizing: border-box;

                   -webkit-box-sizing: border-box;

                   padding: 20px;

                   border-radius: 6px;

                   border: 2px solid #fff;

                   background-color: #5ae628;

                   z-index: 1;

}

.entry-content .right-fukidashi {

                   position: relative;

                   width: 80%;

                   box-sizing: border-box;

                   -webkit-box-sizing: border-box;

                   padding: 20px;

                   border-radius: 6px;

                   border: 2px solid #fff;

                   background-color: #F2F2F2;

                   z-index: 1;

}

.entry-content .left-fukidashi {

                   margin: 20px 20% 40px 0;

}

.entry-content .right-fukidashi {

                   margin: 20px 0 40px 19%;

}

.entry-content .left-fukidashi::before {

                   position: absolute;

                   content: "";

                   top: 16px;

                   width: 10px;

                   height: 10px;

                   border-right: 2px solid #fff;

                   border-bottom: 2px solid #fff;

                   background-color: #5ae628;

                   z-index: 2;

}

.entry-content .right-fukidashi::before {

                   position: absolute;

                   content: "";

                   top: 16px;

                   width: 10px;

                   height: 10px;

                   border-right: 2px solid #fff;

                   border-bottom: 2px solid #fff;

                   background-color: #F2F2F2;

                   z-index: 2;

}

 

.entry-content .left-fukidashi::before {

                   right: -7px;

                   transform: rotate(-45deg);

                   -webkit-transform: rotate(-45deg);

}

.entry-content .right-fukidashi::before {

                   left: -7px;

                   transform: rotate(135deg);

                   -webkit-transform: rotate(135deg);

}

.entry-content .left-fukidashi::after,

.entry-content .right-fukidashi::after {

                   position: absolute;

                   content: "";

                   width: 80px;

                   height: 80px;

                   top: -10px;

                   border-radius: 40px;

                   background-size: cover;

                   background-position: center center;

                   background-repeat: no-repeat;

                   box-shadow: 1px 1px 5px #aaa;

}

.entry-content .left-fukidashi::after {

                   right: -110px;

}

.entry-content .right-fukidashi::after {

                   left: -110px;

}

@media screen and (max-width: 620px) {

                   .entry-content .left-fukidashi,

                   .entry-content .right-fukidashi {

                                     width: 70%

                   }

                   .entry-content .left-fukidashi {

                                     margin-right: 30%;

                   }

                   .entry-content .right-fukidashi {

                                     margin-left: 30%;

                   }

}

@media screen and (max-width: 478px) {

                   .entry-content .left-fukidashi::after,

                   .entry-content .right-fukidashi::after {

                                     width: 60px;

                                     height: 60px;

                                     border-radius: 30px;

                   }

                   .entry-content .left-fukidashi::after {

                                     right: -84px;

                   }

                   .entry-content .right-fukidashi::after {

                                     left: -84px;

                   }

}

.クラス名::after {background-image:url(画像URL);}

.クラス名::after {background-image:url(画像URL);}

  

Twitter風にカスタマイズ

 完成イメージ

はてなブログでLINE風やTwitter風に吹き出し会話をカスタマイズする方法。CSSをコピーするだけです。

 

CSSコード

クラス名画像URLは個別に設定して下さい。

 

/* 吹き出しCSS */

.entry-content .left-fukidashi{

                   position: relative;

                   width: 80%;

                   box-sizing: border-box;

                   -webkit-box-sizing: border-box;

                   padding: 20px;

                   border-radius: 6px;

                   border: 2px solid #fff;

                   background-color: #00aced;

                   color: #fff;

                   z-index: 1;

}

.entry-content .right-fukidashi {

                   position: relative;

                   width: 80%;

                   box-sizing: border-box;

                   -webkit-box-sizing: border-box;

                   padding: 20px;

                   border-radius: 6px;

                   border: 2px solid #fff;

                   background-color: #eae8e8;

                   z-index: 1;

}

.entry-content .left-fukidashi {

                   margin: 20px 20% 40px 0;

}

.entry-content .right-fukidashi {

                   margin: 20px 0 40px 19%;

}

.entry-content .left-fukidashi::before {

                   position: absolute;

                   content: "";

                   top: 16px;

                   width: 10px;

                   height: 10px;

                   border-right: 2px solid #fff;

                   border-bottom: 2px solid #fff;

                   background-color: #00aced;

                   z-index: 2;

}

.entry-content .right-fukidashi::before {

                   position: absolute;

                   content: "";

                   top: 16px;

                   width: 10px;

                   height: 10px;

                   border-right: 2px solid #fff;

                   border-bottom: 2px solid #fff;

                   background-color: #eae8e8;

                   z-index: 2;

}

 

.entry-content .left-fukidashi::before {

                   right: -7px;

                   transform: rotate(-45deg);

                   -webkit-transform: rotate(-45deg);

}

.entry-content .right-fukidashi::before {

                   left: -7px;

                   transform: rotate(135deg);

                   -webkit-transform: rotate(135deg);

}

.entry-content .left-fukidashi::after,

.entry-content .right-fukidashi::after {

                   position: absolute;

                   content: "";

                   width: 80px;

                   height: 80px;

                   top: -10px;

                   border-radius: 40px;

                   background-size: cover;

                   background-position: center center;

                   background-repeat: no-repeat;

                   box-shadow: 1px 1px 5px #aaa;

}

.entry-content .left-fukidashi::after {

                   right: -110px;

}

.entry-content .right-fukidashi::after {

                   left: -110px;

}

@media screen and (max-width: 620px) {

                   .entry-content .left-fukidashi,

                   .entry-content .right-fukidashi {

                                     width: 70%

                   }

                   .entry-content .left-fukidashi {

                                     margin-right: 30%;

                   }

                   .entry-content .right-fukidashi {

                                     margin-left: 30%;

                   }

}

@media screen and (max-width: 478px) {

                   .entry-content .left-fukidashi::after,

                   .entry-content .right-fukidashi::after {

                                     width: 60px;

                                     height: 60px;

                                     border-radius: 30px;

                   }

                   .entry-content .left-fukidashi::after {

                                     right: -84px;

                   }

                   .entry-content .right-fukidashi::after {

                                     left: -84px;

                   }

}

.クラス名::after {background-image:url(画像URL);}

.クラス名::after {background-image:url(画像URL);}

  

最後に

このコードを活用すれば、カラーコードを変更するだけで見た目を変えることができます。今回紹介しておりませんが、Facebook風やInstagram風の吹き出し会話にも挑戦してみてはいかがでしょうか。

 

少しでも参考になれば幸いです。

ぜひ、お試しあれ!