ブログに吹き出しをつけてみました

あい
0

Bloggerのおすすめテーマ "WindSpot"
このブログで使っているテーマ。表示速度◎
Bloggerのテーマで迷っている方にオススメです♪


こんばんは!

このブログのために、お名前ドットコムでゲットした独自ドメイン。(キャンペーン中で2年間無料だった時)

せっかくの新しいドメインでアドセンスがまったく通らない😱

もう疲れちゃったので、少し前にアドセンスに通っていた独自ドメインを使うことにしました!→それに伴い、ブログ名も変更済み。


独自ドメインがほしいな。と考えている方には、キャンペーンが頻繁にあるお名前ドットコ厶をマメに確認しておくのがオススメです🙌

Blogger ブログに吹き出しを導入

文字ばっかりで疲れるこのブログをどうにかしたい💦

今回、その願いを叶える記事を発見したので、このブログで吹き出しを使ってみることにします😊✨

Bloggerで使える「吹き出し」で会話形式の記事を書く方法という記事を参考にしました。


CSSを貼り付ける

まずはバックアップを取って、下の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;
 margin-right: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: 73%;
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%;
 }
 }
/*****会話のCSSここまで*****/
/*--------------------------------------*/
このブログで使っているJETTHEMEだと、アイコンと吹き出しの間が広いので、黄色くマーカーした部分を変更しています。


変更していないカスタマイズを使用する場合は、参考元のBloggerで使える「吹き出し」で会話形式の記事を書く方法を確認してみてください🌸



記事内での使用方法

記事の中で吹き出しを使うときは、HTMLビューにして、
<!--左の会話-->
<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>

黄色いマーカーの部分2箇所を、

  • 使いたい画像のURL
  • 吹き出し内に書きたいこと

に置き換えて、使用したい箇所に貼り付けてください。



簡単に吹き出しがブログに使えるようになりました🍀素敵💕



他にもオススメのカスタマイズなどがあれば教えていただきたいです😍よろしくお願いします🙏✨
\ 兄妹揃って楽しんでいます♪ /
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【第3類医薬品】ビタミンC2000「UTY」 330錠
価格:1,518円(税込、送料別) (2023/3/16時点)


最近始めました。疲れに効くといいな。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【第3類医薬品】ピュアバランスBB 250錠
価格:1,958円(税込、送料別) (2023/3/16時点)


こちらも始めました。肌荒れ治りますように。。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

できる韓国語 初中級ブリッジ CD BOOK/CD2枚 [ 李志暎 ]
価格:1,870円(税込、送料無料) (2023/3/16時点)


現在楽しんで勉強中。聴き取りと不規則動詞がまだまだ私には難しいです...

Post a Comment

0Comments

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Check Now
Accept !