これ知らなかった..。

会話形式の記事を書きたい!


「対談」、「インタビュー」記事を、ブログで書きたい。そんなあなたに朗報です。HTML・CSSをちょこっといじると、あーら不思議、会話形式の記事が書けるようになります。


※ただし!Livedoorブログはレスポンシブに対応していないためか、表示されませんでした。


コピペでOK!


 

.arrow_answer,
.arrow_question
{ position: relative;
background: #fff;
border: 3px solid rgba(240,120,255,1);
padding: 2% 2%;
border-radius: 10px;
width: 70%;
}

.arrow_question {
float: right;
}

.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: rgba(240,120,255,1);border-left-width: 20px; }
.arrow_question:before { border-right-color: rgba(240,120,255,1); border-right-width: 20px; }
.question_image {
float: left;
width:20%;
}

.answer_image {
float: right;
width:20%;
}

.answer_image img,.question_image img {
width: 100%;
}

.question_Box {
margin-bottom: 25px;
overflow: hidden;
}

.question_Box p{ line-height: 1.5;}
 


<div class="question_Box">
<div class="question_image">
<img src="https://livedoor.blogimg.jp/poruporudesu/imgs/c/7/c7dac334.png" alt="質問者の写真" />
</div>
<div class="arrow_question">
<p>ガッハッハッハッハッハ!!</p>
</div>
</div>

<div class="question_Box">
<div class="answer_image">
<img src="https://livedoor.blogimg.jp/poruporudesu/imgs/c/7/c7dac334.png" alt="解答者の写真" />
</div>

<div class="arrow_answer">
<p>なんなのだ?</p>
</div>
</div>

<div class="question_Box">
<div class="answer_image">
<img src="https://livedoor.blogimg.jp/poruporudesu/imgs/c/7/c7dac334.png" alt="解答者の写真" />
</div>

<div class="arrow_answer">
<p>なにを言ってるのだ?</p>
</div>
</div>

PC版のみで見れる!




質問者の写真

ガッハッハッハッハッハ!!

解答者の写真

なんなのだ?

解答者の写真

なにを言ってるのだ?




人気記事

[短所を克服!]長所を伸ばすためにやるべき2つの診断

[転職診断!]大魔王ポルポルの年収は620万円!

[おすすめ!]バーチャルリアリティーの世界を体験してきたよ!


プロフィール
bc697bf888b01b3cd628ebc76b7f82ada97744a8



大魔王ポルポル/ホームレス

日本一周をママチャリで達成する。その後、クズとなり、仕事もせず、ダラダラとホームレスな生活をしている。しかし、その後はアフリカに行こうとしている。ブログを通じて助けを求めたり、グチをこぼしたり、小遣いを稼いだり、とにかくクズ


トップページブログ運営 > [コピペでOK!]ブログ記事に吹き出しで会話の記事を書く方法