ブログでよく見かける会話形式の吹き出し。
文中に会話形式の吹き出しが入っていると、とても読みやすいです。
というわけで本日はHTMLとCSSだけで作るで会話形式の吹き出しを作る方法を紹介したいと思います。
会話形式の吹き出しとは？
会話形式の吹き出しとはこんな感じです。
文字ばかりを並べるのではなく、合間に見出しや画像を入れたりするように、会話形式の吹き出しを入れることで読みやすくなります。
会話形式の吹き出しが入っていると読みやすいよね。
そうだね～。読みやすいよね。
これからこのブログでも使っていきたいと思います。
htmlとCSSで作る方法
会話形式の吹き出しをhtmlとCSSで作ってみました。
HTMLとCSSはコピペして使うことができます。
HTMLの記述
会話形式の吹き出しが入っていると読みやすいよね。
そうだね～。読みやすいよね。
CSSの記述
/* ------------------- 会話形式吹き出し ------------------- */
.talkbox {
display: block;
clear: both;
margin:0 auto;
}
.talkbox p {
margin:0;
}
.left-icon {
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
border: 3px solid #fff; /*左のアイコンの枠の設定*/
margin-bottom: 25px;
}
.left-talk {
float:right;
position: relative;
background: #fbf9f9; /*左の会話の背景色*/
border: 2px solid #ccc;
padding: 3%;
border-radius: 10px;
width: 70%;
box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
margin-bottom: 10px;
}
.left-talk:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #ccc;
position: absolute;
left: -20px;
top: 27%;
margin-top: -9px;
}
.left-talk:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fbf9f9;
position: absolute;
left: -16px;
top: 27%;
margin-top: -8px;
}
.right-icon {
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
border: 3px solid #FFF; /*右のアイコンの枠の設定*/
margin-bottom: 25px;
}
.right-talk {
float:left;
position: relative;
background: #fbf9f9; /*右の会話の背景色*/
border: 2px solid #ccc;
padding: 3%;
border-radius: 10px;
width: 70%;
box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
margin-bottom:10px;
}
.right-talk:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #ccc;
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px;
}
.right-talk:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #fbf9f9;
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px;
}
.talk-end{
clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 65%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 65%;
}
}
WordPressのプラグインを使う方法
私はできるだけ自作できる場合はプラグインを使わない派ですが、プラグインを使って簡単に導入したい方には、ふきだしプラグインSpeech bubbleがあります。
