コピペでOK!WordPressのCSSで「フキダシ会話形式」にする方法

吹き出しcss
ネットでおもしろいもの見つけたよ。

もったいぶらずに早く言え。

ブログ上で「会話形式のフキダシ」をつけるやり方っす。

( 0w0)ノ ウェーイ

下にあるコードをCSSにコピペして、エディタでコードを書けばあら不思議!こんな感じの会話が成立するのです!

まあまあいいね。他力本願じゃなければな。

てゆーか「会話形式」っていっといて、なんで同一人物が会話してんだよ。落語家か。(ピキピキ)

…手抜きですいません…。

みたいな会話がカンタンに実現します!

CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2

こちらのブログですごくわかりやすく説明されてて、コードを拝借してチョチョイといじったらあっという間にできました!

CSSにコピペ

/*============================================================
フキダシデザイン
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.arrow_question {
    float: right;
    margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100% }
.arrow_answer:after,
.arrow_answer:before { left: 100% }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff }
.arrow_question:after { border-right-color: #fff }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8 }
.arrow_question:before { border-right-color: #c8c8c8 }
.question_image { float: left }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

HTMLはこんな感じ

<div class="question_Box">
<div class="question_image"><img src="画像のURL" alt="質問者の写真" width="90" height="90"/></div>
<div class="arrow_question">
     ここに会話内容
</div><!-- /.arrow_question -->
</div><!-- /.question_Box -->

<div class="question_Box">
<div class="answer_image"><img src="画像のURL" alt="解答者の写真" width="90" height="90" /></div>
<div class="arrow_answer">
     ここに会話内容
</div><!-- /.arrow_answer -->
</div><!-- /.question_Box -->

まとめ

20141027125548-1

このフキダシを使えばこの「まとめ」の節もおもしろい使い方ができそうだなー。

こういうのを公開してくれる方にはいつも感謝の気持ちでいっぱいです。本当にありがたい。

ただあれだね。

スマホで見るとくずれちゃうなー。

レスポンシブデザインだと崩れてしまうようで、心強い方に修正をしていただきました!

【応急処置】WordPress Stingerテーマで「フキダシ風会話」のCSSを修正 | まろやかなギーク!

記事が参考になったりおもしろかったら
いいね!してね( ´ ▽ ` )ノ

Twitterでマツオユキを

1 個のコメント