はてなブログに吹き出し会話を実装する方法
その①：デザイン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%;
}
}
これではてなブログでの設定は終わりです。次の項で記事中に吹き出し会話を使う方法を説明します。
吹き出し会話をはてなブログで使う方法
その①：「HTML編集」画面に以下のコードを張り付ける
まず、「記事を書く」画面を開き、「HTML編集」に以下のコードを張り付けます。
<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('ここに左側の人画画像のURLを張り付けます');"></div>
<div class="talk-left">
<p>会話内容をここに記述します</p>
</div>
</div>
<!--左はここまで-->
<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを張り付けます');"></div>
<div class="talk-right">
<p>会話内容をここに記述します</p>
</div>
</div>
<!--右はここまで-->
<!--↓会話部分の最後にこれを必ず付け加えて↓-->
<div class="talk-end"></div>
上のコードを張り付けて、プレビューしてみるとこんな感じになります。しかし、これだけだと、話し手の画像が表示されていないので、画像のURLを取得し張り付けなければなりません。
その②：画像のURLを取得する
まず、「はてはフォトライフ」にアクセスします。そうするとこんな画面が出てくるので、青丸で囲まれた「アップロード」をクリックします。
そしたら、こんな画面が出てくるので、「参照」をクリックし、話し手の画像を選択し、「アップロード」をクリックします。
次に、画像のチェックボックスにチェックを入れて、「Hatena Blog」に選択します。
次に、「ブログに張り付ける」をクリックします。
そして、青丸で囲まれた「HTMLタグ」をコピペして、メモ帳にでも貼り付けます。
以下の文章がコピペしたものです。
<a href="http://f.hatena.ne.jp/bunntinnmalu/20180119190657"><img src="http://img.f.hatena.ne.jp/images/fotolife/b/bunntinnmalu/20180119/20180119190657.jpg" alt="20180119190657"></a>
この中に
http://img.f.hatena.ne.jp/images/fotolife/b/bunntinnmalu/20180119/20180119190657.jpg
という文章？コード？があるのでこれをコピーします。
最後に、「ここに左側の人画画像のURLを張り付けます」に先ほどコピーしたものを張り付けたら、完成です。
最後に
いかがったでしょうか？無事に吹き出し会話を実装することが出来ましたか？はてなブログで使うことはできましたか？もし分からない所があればコメント欄なので、お気軽にご相談ください(^^)/