【はてなブログ】吹き出しで会話形式にする方法をインスタント化にしてみた！（定型文貼り付け）

f:id:takabonyade:20210908114014p:plain

吹き出しで会話形式にするのって面倒なことなのかな？

やっぱり手間がかなりかかるのでは？

ワワワワワ～～～～ン！

ハッハッハッハッハ！ちょのも吠えてるわ！

その吹き出しを誰でもかんたんにできるように
インスタント化にしようかと・・・。

このように吹き出しで会話形式にしているブログってよく見かけますよね。吹き出しで書きたいけどやり方がわからないって人も結構いると思います。でも最初の設定さえきちっとしてしまえば、後はかんたんに吹き出しを使うことが可能なんですよ。

例の「定型文貼り付け」に設定してしまえば、ワンタッチで吹き出しの会話を書くことができます。面倒ですがこの記事を見ながら吹き出しで会話形式にする設定だけを済ませておけばあとはかんたんに吹き出しを使えます。

というわけで今回は『【はてなブログ】吹き出しで会話形式にする方法をインスタント化にしてみた！（定型文貼り付け）』について解説させていただきたいと思います。

こんばんは！たかぼんブログドットコムのたかぼんです。

【目　次】

タップできます

出演するメンバーの画像をブログに投稿しておく
「CSS」コードをコピペする（2ヶ所）
2-1.PC用のコピペ
 2-2.スマホ用のコピペ
「HTML」コードを「定型文」に貼り付ける
まとめ

出演するメンバーの画像をブログに投稿しておく

まずはブログに登場するメンバーの画像（写真またはイラスト）を投稿しておきます。

ちなみに「takabonblog.com」の登場人物です。

f:id:takabonyade:20210902205114p:plain
筆者の家内

f:id:takabonyade:20210907170322j:plain
長女のくるみ

f:id:takabonyade:20210902205137p:plain
次女のなつか

f:id:takabonyade:20210906170948j:plain
愛犬のちょの助

たかぼん

筆者

そしてそれぞれの画像のURLが必要になってくるので、URLのコピーのしかたを説明します。

写真の投稿する画面

①の「写真の投稿」をクリックして②の「はてなフォトライフで編集する」をクリックします。

Hatena Blogをクリックする

次に上記の「Hatena Blog」をクリックします。するとブログに掲載している画像がズラーッと出てきます。

選択してクリックする

その中の1枚の画像を選択してクリックします。

新しいタブで画像を開く

するとクリックした画像が上記のように大きく出てくるのでその画像を右クリックして「新しいタブで画像を開く」をクリックします。

新しいタブに開いた画像のURLをコピーしてメモ帳やWordなどに貼り付けておきます。

登場人物の人数分の画像のURLをすべてメモ帳やWordなどに貼り付けておきます。

「CSS」コードをコピペする（2ヶ所）

ダッシュボード画面

次に「ダッシュボード」の画面から「デザイン」タブをクリックします。

PC用のコピペ

カスタマイズをクリックする

その中の上の方にある3つのマークの真ん中の「カスタマイズ」という工具のようなマークをクリックします。

デザインCSSをクリックする

「デザインCSS」をクリックします。

デザインCSSのボックスの中にCSSコードをコピペする

「デザインCSS」のボックスの中に次のCSSコードをコピペします。

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% - 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff;
z-index: 1;
box-sizing: border-box;
}
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 60px;
height: 60px;
top: -6px;
border-radius: 50%;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;
}
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}
.人物の名前::after {background-image:url(画像のURL);}
.人物の名前::after {background-image:url(画像のURL);}
.人物の名前::after {background-image:url(画像のURL);}