サイト作成について。

会話形式の吹き出しとはこういう感じです。

ブログの記事の中に吹き出しを入れて、しかもふわっとアニメーションで登場するようにしたい！！
というわけで、調べて出来るようになったので記録を残しておきます。

Blogger記事本文に吹き出しの会話形式の記事を入れる。

以下のソースをコピペで出来ます。複数のサイトの方法の複合技なので、まとめたものをコピペ用に残しておきます。


参考：

Bloggerで使える「吹き出し」で会話形式の記事を書く方法

Bloggerでも使える「吹き出し」を使って会話形式の記事が書けるCSSの導入方法を紹介。コピペでOK。 吹き出しを使って説明している記事は良く見かけていたんですが、あれってはてなブログとかWordPressとかの固有の機能だと思っていました。 楽しそうで良いなぁと羨ましく思っていたんですが、CSSをコピペするだけでBloggerでも簡単に使えることがわかりましたので、ここにメモしておきます。 味気ないブログも一気に華やかになります。記事がよりわかりやすくなりますね。使ってみるととても楽しいです。ぜひ活用してみてください。

www.yamacho-blog.com

【ブログカスタマイズ】CSSとJQueryで要素をふわっとフェードイン ～吹き出し・囲み枠・リストなどに使えるよ～ - 【ちゃんこめBlog】インド在住OLの雑記ブログ

CSSとJQueryで、要素がふわっとフェードインするアニメーションを作成。コピペOKなのでコードが読めないカスタマイズ初心者さんも簡単に実装できるよ。

www.chankome.com

会話の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;
 }
.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ここまで*****/

/*フェードインアニメ*/
/*--------------------------------------*/
/*左から右にフェードイン*/
.left-to-right {
  opacity: 0.1;
  transform: translateX(-60px);
  transition: all 1s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}

/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(60px);
  transition: all 1s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}
/*****フェードインアニメここまで*****/
/*--------------------------------------*/

会話のJavaScript（レイアウトのガジェットにHTML/JavaScriptで挿入）


<script type="text/javascript">

$(function(){
    $(window).scroll(function (){
        $('.left-to-right, .down-to-top').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 150){
                $(this).addClass('scrollin');
            }
        });
    });
});


</script>

会話のソース（記事本文に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>

<!--右の会話-->
<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>

ここまでが、会話を吹き出しで表示する方法です。手順としては、まず「①カステムテーマでCSSを挿入」「②レイアウトのガジェット【HTML/JavaScript】で会話のJavaScriptを挿入」「③新規記事作成で会話のソースを挿入」でOKです。

ただこれ、Bloggerで記事を作成する際、HTMLビューで書かないと勝手にソースが修正されて色々エラーが起きたりする感じなので、吹き出し付きの記事を書く時は気をつけてくださいね。