/* -------------------- 共通設定 -------------------- */ .post_content .talk { list-style-type: none; /* リストの頭出しマークをなくす */ margin: 0 auto 2em; /* 前後のmargin設定と中央配置 */ width: 90%; /* 横幅を通常より狭くする場合 */ } /* clearfixとして設定 */ /* .post_content .talk::after { */ /* content: "."; */ /* display: block; */ /* clear: both; */ /* height: 0; */ /* visibility: hidden; */ /* } */ /* -------------------- 吹き出し本体(テキスト部分) -------------------- */ /* 奇数番目の要素 */ .post_content .talk li:nth-child(odd){ padding: .5em 1em; /* 枠と文字の間隔 */ border-radius:5px; /* 角の丸め */ background: #fff3a2; /* お好きな色を設定してください */ margin: .5em 25% .5em 15%; /* 吹き出しの位置調整 */ position: relative; /* before、after の準備 */ } /* 偶数番目の要素 */ .post_content .talk li:nth-child(even){ padding: .5em 1em; /* 枠と文字の間隔 */ border-radius:5px; /* 角の丸め */ background: #abeaef; /* お好きな色を設定してください */ margin: .5em 15% .5em 25%; /* 吹き出しの位置調整 */ position: relative; /* before、after の準備 */ } /* -------------------- 吹き出しの出っ張り部分 -------------------- */ /* 奇数番目の要素 */ .post_content .talk li:nth-child(odd)::after { position: absolute; /* 出っ張りの出力位置調整 */ right: 100%; top: 10%; content: " "; /* 三角形を作る */ height: 0; width: 0; border-bottom:10px solid #fff3a2; border-left:10px solid transparent; } /* 偶数番目の要素 */ .post_content .talk li:nth-child(even)::after { position: absolute; /* 出っ張りの出力位置調整 */ left: 100%; top: 10%; content: " "; /* 三角形を作る */ height: 0; width: 0; border-bottom:10px solid #abeaef; border-right:10px solid transparent; } /* -------------------- 吹き出しのアイコン -------------------- */ /* 奇数番目の要素 */ .post_content .talk li:nth-child(odd):before { position: absolute; right: 105%; top: 0%; font-family:'FontAwesome'; font-size: 3em; line-height: 1; content: "\f2be"; color: #f9b923; } /* 偶数番目の要素 */ .post_content .talk li:nth-child(even):before { position: absolute; left: 105%; top: 0%; font-family:'FontAwesome'; font-size: 3em; line-height: 1; content: "\f2be"; color: #3498db; } /* -------------------- 吹き出しのアイコン(画像を使う場合はコメント解除する) -------------------- */ /* 奇数番目の要素 */ /* .talk li:nth-child(odd):before { position: absolute; right: 105%; top: 0%; content: " "; width: 1em; height: 1em; background: url( 画像のURL ); background-size: cover; border-radius: 50%; } */ /* 偶数番目の要素 */ /* .talk li:nth-child(even):before { position: absolute; left: 105%; top: 0%; content: " "; width: 1em; height: 1em; background: url( 画像のURL ); background-size: cover; border-radius: 50%; } */