こんばんは、ステラです。先日バレンタインさんからこんなコメントを頂きました。
ステラさん(o´ノωノ`o)こんばん ヽ(o´・ω・`o)ノ゛ わぁ♪

いいですね!この噴出しっぽい記事( *´艸`)w
ふむふむ・・・このようにして使うのですね。

パクってユク!!!
徒然チーム運営 第6段【時はAP241 ヴェルン無血開城!!】

こちらの記事の吹き出しチャットに対するコメントですね。まさか参考にして頂けるとは思ってませんでしたので非常に驚きました!

と言う事で、需要もあるのかなーと思いつつ、ヤマトさんにも積極的に使って頂ければというメモとして、この記事を記していきます。

それでは本題に入っていきましょう!

まず吹き出しチャットがどういう物か という事なんですけれど、私のブログを読んでくださってる方は既に見て頂けてると思います。

ヤマトさん昨日の晩ご飯は何でしたか?

んーアザラシのステーキかな?


こういうのです。

初登場の時に書かせて頂きましたが、こちらの記事を参考にさせて頂きました。

基本的には、この記事の通りにすればできるのですが、ライブドアブログでは大きな落とし穴があります。用意されているcssにそのまま継ぎ足すと、PC版でのみ反映されて、スマホ版では全く吹き出しが出来なくなってしまいます。

そこで、ブログ記事内の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: 100%; /*アイコンの拡大率*/
	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: 100%; /*アイコンの拡大率*/
	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ファイルで別に保存して、ライブドアブログにアップロードしましょう。アップロードの仕方ぐらいは分かりますよね・・・?(画像/ファイルのタブからファイルにアップロードしましょう)

cssファイルを記事に読み込ませる

そうしたら、以下の文を、ブログ記事のhtmlタグで一番最初に入れます!
(おすすめは続きを書くの方に入れると、編集画面でも適応されるので見やすいです)
<link  href="保存したcssファイルのアドレス" type="text/css" rel="stylesheet">
「保存したcssファイルのアドレス」の部分には、名前のままアドレスを入れてください。

記事に吹き出しを使用する

ここまでこれば後は簡単(?)です。参考記事のままゴリ押せば行けます。

一応説明しておきましょう()

左からの吹き出し

<!--左-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('アイコンのアドレス');"></div>
<div class="talk-left">
<p>会話内容をここに記述してください!</p>
</div></div>
<!---左はここまで-->
このコードをブログ記事のhtml編集で貼り付けましょう。「アイコンのアドレス」の部分にはアイコン画像のアドレスを選択しましょう。アイコンサイズは100px*100pxが丁度良いように設定してあります。

右からの吹き出し

<!--右-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('アイコンのアドレス');"></div>
<div class="talk-right">
<p>会話内容をここに記述してください!</p>
</div></div>
<!---右はここまで-->
右も左の時と全く同じです。

吹き出しチャットから普通の文章に変えるとき

<!--↓会話部分の最後にこれを必ず付け加えて↓-->
<div class="talk-end"></div>
最後にこれを入れておきましょう。じゃないと崩れます。

これを繰り返せば自由自在に吹き出しを使ってブログが書けると思います!

是非参考にして頂ければと思います。良かったら使ってくださいね!



サポーターズリンク投票よろしくお願いします!

PSO2サポーターズリンク

ファンタシースターオンライン2ランキング

にほんブログ村 ゲームブログ ファンタシースターへ