スキップしてメイン コンテンツに移動

吹き出しを記事に入れたい!ブロガー

 吹き出しを記事に入れる

急にどうしても、「吹き出し」を、やりたくなった。

ネットで、吹き出しを、色々調べると、すごく難しい説明のサイトと簡単に分るサイトがある。

とにかく、以下のコードを提供してくれるサイトがあった。説明通りしたら、うまくいった。(感謝)

3つのコード


コード1

テーマのHTMLに入れる。なぜか、この説明とおりHTMLに入れるとうまくできなかった。その代わり、テーマのCSSにコピペしたら、うまくいった。

/*--------------------------------------*/
/*****会話のCSSここから*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap 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: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff;
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa;
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 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: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff;
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa;
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 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%;
 }
 }
/*****会話のCSSここまで*****/
/*--------------------------------------*/

上記のコードとあと2つコード

残り2つのコードは、実際に、ブロガーを左上の角の鉛筆をクリックすると、HTMLが出てくるのでクリックする。そして、自分が、ツイート(吹き出し)したい部分にコピペして、文字を記述する部分に、ツイート記事を書く。 右側ツイートと、左側ツイートがあって、その都度、HTMLコードをコピペする。ちょっと面倒と感じる。。

コード2 左側ツイート


<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('画像のURL');">
</div>
<div class="talk-left">
ここに左の会話を書く
</div>
</div>
<div class="talk-end">
</div>

コード3 右側ツイート


<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('画像のURL');">
</div>
<div class="talk-right">
ここに右の会話を書く
</div>
</div>
<div class="talk-end">
</div>


問題は、なぜか、最初のコード(コード1)を、コード提供サイトの説明にあるように テーマHTML にコピーペーストするとうまくいかない

CSSのところにコピーペーストするとうまくいく。


なぜhtmlにペーストはうまくいかなくてcssにペーストするとうまくいくのか?  わからない。

どっちかを試してみて、うまくいく方で「吹き出し」記事を作ればいいと思う。