はてなブログで「吹き出し」記事のやり方

2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。

キャラクターが誕生したらやりたかったのが吹き出し。
ブログの見せ方の幅が広がるし、キャラとの会話形式のやり取りが可能になります。
今回は設定の仕方と使い方について説明します。
※GoogleCrome拡張機能を使います

表示させる画像の準備

吹き出しを使うに当たって、コメントを発する人の画像が必要になります。
当ブログでは、管理人やキャラのイラストを設定してコメントをしていきますが、 コメントを発する人やキャラの写真・イラストなどをまず準備しましょう。
はてなブログを活用したやり方を紹介するので、今回ははてなブログのサービスである、「はてなフォトライフ」を使用します。

１、 管理画面の右上にある「四角（３×３）の升」ボタンで「利用中のサービス」から「はてなフォトライフ」をクリックします。
２、はてなフォロライフの画面が表示されるので、ここに吹き出しコメントをさせたい写真・イラストをアップしましょう。
３、アップされた画像を右クリックし、「画像アドレスをコピー」する 

画像の準備は一旦ここで終了です。
コピーした画像アドレスは後ほど使用します。

GoogleChrome拡張機能をインストール

では次にGoogleChromeの拡張機能をインストールしましょう。
以下chromeウェブストアからインストールできます。

拡張に追加を許可するとブラウザの右上に、鉛筆アイコンが出てきます。
拡張機能を使うには、このボタンを使い編集してきます。

CSSにコードを追加

次に、CSSにコードを追加します。

PC表示の場合の設定

下記のコードをデザイン→カスタマイズ→デザインCSSにコピペするのですが、コードの一番下にある項目は、ユーザー自身で書き換える必要があります。
一旦メモ帳か何かにコピーして、書き換えてからペーストすると良いでしょう。

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
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: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

書き換えるのは一番下の「クラス名」の部分と「画像のURL」の部分です。
「クラス名」には分かりやすく覚えやすい名前を付けるといいでしょう。
クラス名で使用できる文字は、半角の英数字、ハイフン（ – ）、アンダーバー（ _ ）です。アルファベットで始めなければなりません。（数字や記号で始めてはならない）
そして「画像のURL」の部分には、前述した「はてなフォトライフ」にアップした画像からコピーした「画像アドレス」を貼り付けましょう。
人物やキャラが増えていったら、クラス名を下に追加していきましょう。

スマホ表示の場合の設定

 スマホで適用する場合（レスポンシブに設定していない場合）は、デザイン→スマートフォン→ヘッダー→タイトル下のHTMLにCSSを記述します。<style>この中にCSS</style>で囲ってその間にCSSを記述して下さい。

<style>
この中にCSS
</style>

GoogleChrome拡張機能での使い方

では肝心の使い方です。 

１、吹き出しにしたい文章を選択します。
２、選択したら、ブラウザ右上の鉛筆アイコンをクリックしてポップアップを表示させます。
３、真ん中あたりの入力欄に、吹き出しを左側（画像が右側）にしたい場合は「l-fuki クラス名」と入力して「Add Class」をクリック（EnterキーでもOK）します。「l-fuki」と「クラス名」の間には半角スペースを空けて下さい。

 吹き出しを右側（画像が左側）にしたい場合は「r-fuki クラス名」と入力して「Add Class」をクリック（EnterキーでもOK）します。「r-fuki」と「クラス名」の間には半角スペースを空けて下さい。 
※「クラス名」はCSSで設定したクラス名です

これで、吹き出しコメントができるはずです。

注意点

以下が注意点になります。

・プレビューモードでしか見れない
・吹き出しの中で改行する場合は、「Shift」+「Enter」で改行して下さい。

編集見たままでは吹き出しになっているかはわからないので、「プレビュー」表示で確認しながらブログを書いていきましょう。
吹き出しの中での改行も「Enter」だけではできず、おかしなことになってしまうので、注意しましょう。

最後に  

吹き出しをブログで使うと、「発言」的な見え方になり、コメントに親近感を感じます。
また、キャラを発生させることで、解説的な手法を取ることができ、ブログのシチュエーションを増やすことができます。
設定は一手間ありますが、一度設定して慣れると簡単に使いこなすことができるのでお勧めです。