BUN HACK

MENU

【コピペOK】はてなブログに吹き出し会話を実装する方法

f:id:bunntinnmalu:20180119193212p:plain

スポンサードリンク
   

はてなブログに吹き出し会話を実装する方法

その①:デザインCSSに以下のコードを張り付ける

まず、「ダッシュボード」から「デザイン」を開いてください。すると、こんな画面が出てくるので、青丸で囲まれた部分をクリックして画面を切り替えてください。

f:id:bunntinnmalu:20180111165830p:plain

そうすると、「デザインCSS」という項目があるので、以下のコードをコピペして張り付けてください。

f:id:bunntinnmalu:20180119184333p:plain

 

/*****ここから会話の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編集」に以下のコードを張り付けます。

f:id:bunntinnmalu:20180119185707p:plain

<!--左の会話-->
<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を取得し張り付けなければなりません。

f:id:bunntinnmalu:20180119190134p:plain

その②:画像のURLを取得する

まず、「はてはフォトライフ」にアクセスします。そうするとこんな画面が出てくるので、青丸で囲まれた「アップロード」をクリックします。

f:id:bunntinnmalu:20180119190519p:plain

そしたら、こんな画面が出てくるので、「参照」をクリックし、話し手の画像を選択し、「アップロード」をクリックします。

f:id:bunntinnmalu:20180119191310p:plain

次に、画像のチェックボックスにチェックを入れて、「Hatena Blog」に選択します。

f:id:bunntinnmalu:20180119191520p:plain

次に、「ブログに張り付ける」をクリックします。

f:id:bunntinnmalu:20180119193912p:plain

 

そして、青丸で囲まれた「HTMLタグ」をコピペして、メモ帳にでも貼り付けます。

f:id:bunntinnmalu:20180119191848p:plain

以下の文章がコピペしたものです。

<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を張り付けます」に先ほどコピーしたものを張り付けたら、完成です。

f:id:bunntinnmalu:20180119192528p:plain

最後に

いかがったでしょうか?無事に吹き出し会話を実装することが出来ましたか?はてなブログで使うことはできましたか?もし分からない所があればコメント欄なので、お気軽にご相談ください(^^)/

スポンサードリンク