こんばんは、ステラです。先日バレンタインさんからこんなコメントを頂きました。
こちらの記事の吹き出しチャットに対するコメントですね。まさか参考にして頂けるとは思ってませんでしたので非常に驚きました!
と言う事で、需要もあるのかなーと思いつつ、ヤマトさんにも積極的に使って頂ければというメモとして、この記事を記していきます。
それでは本題に入っていきましょう!
まず吹き出しチャットがどういう物か という事なんですけれど、私のブログを読んでくださってる方は既に見て頂けてると思います。
こういうのです。
初登場の時に書かせて頂きましたが、こちらの記事を参考にさせて頂きました。
基本的には、この記事の通りにすればできるのですが、ライブドアブログでは大きな落とし穴があります。用意されているcssにそのまま継ぎ足すと、PC版でのみ反映されて、スマホ版では全く吹き出しが出来なくなってしまいます。
そこで、ブログ記事内のhtmlで、別に用意したcssファイルを無理矢理読み込ませる必要が出てきます。
それでは具体的にやり方を説明していきますね!
これをコピーして、cssファイルで別に保存して、ライブドアブログにアップロードしましょう。アップロードの仕方ぐらいは分かりますよね・・・?(画像/ファイルのタブからファイルにアップロードしましょう)
(おすすめは続きを書くの方に入れると、編集画面でも適応されるので見やすいです)
「保存したcssファイルのアドレス」の部分には、名前のままアドレスを入れてください。
一応説明しておきましょう()
このコードをブログ記事のhtml編集で貼り付けましょう。「アイコンのアドレス」の部分にはアイコン画像のアドレスを選択しましょう。アイコンサイズは100px*100pxが丁度良いように設定してあります。
右も左の時と全く同じです。
最後にこれを入れておきましょう。じゃないと崩れます。
これを繰り返せば自由自在に吹き出しを使ってブログが書けると思います!
是非参考にして頂ければと思います。良かったら使ってくださいね!
ステラさん(o´ノωノ`o)こんばん ヽ(o´・ω・`o)ノ゛ わぁ♪徒然チーム運営 第6段【時はAP241 ヴェルン無血開城!!】
いいですね!この噴出しっぽい記事( *´艸`)w
ふむふむ・・・このようにして使うのですね。
パクってユク!!!
こちらの記事の吹き出しチャットに対するコメントですね。まさか参考にして頂けるとは思ってませんでしたので非常に驚きました!
と言う事で、需要もあるのかなーと思いつつ、ヤマトさんにも積極的に使って頂ければというメモとして、この記事を記していきます。
それでは本題に入っていきましょう!
まず吹き出しチャットがどういう物か という事なんですけれど、私のブログを読んでくださってる方は既に見て頂けてると思います。
ヤマトさん昨日の晩ご飯は何でしたか?
んーアザラシのステーキかな?
こういうのです。
初登場の時に書かせて頂きましたが、こちらの記事を参考にさせて頂きました。
基本的には、この記事の通りにすればできるのですが、ライブドアブログでは大きな落とし穴があります。用意されている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">
記事に吹き出しを使用する
ここまでこれば後は簡単(?)です。参考記事のままゴリ押せば行けます。一応説明しておきましょう()
左からの吹き出し
<!--左-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('アイコンのアドレス');"></div>
<div class="talk-left">
<p>会話内容をここに記述してください!</p>
</div></div>
<!---左はここまで-->
右からの吹き出し
<!--右-->
<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>
これを繰り返せば自由自在に吹き出しを使ってブログが書けると思います!
是非参考にして頂ければと思います。良かったら使ってくださいね!
コメント
コメント一覧 (7)
なるほどなるほど!吹き出しいいですね!
早速パク…参考にさせていただきます!(・´з`・)
なるほどなるほど!!参考にさせて頂きます(・-・*)メモメモブクマブクマ
また今度時間のあるときに挑戦します!
こんな稚拙な記事ですがパクって頂けるならそれはそれでどうぞどうぞなんでも献上いたします(シ_ _)シ ハハァーー
アザラシの大和煮にして食べたそうです。
Memory of Sophie にもこれは引用できるかもしれないね
為になる記事、ありがとうございます!
コメントする