【吹き出し】はてなブログで記事中に吹き出しを入れる簡単な方法

こんにちはネコ部長です。

今日はどんな話題を教えてくれますか？

簡単に記事の中に吹き出しを入れる方法を教えるよ！

 といった具合に、記事の中に吹き出しを入れることで少し違った感じに

なりますよね！

そこで今回は、記事中に吹き出しを入れて会話形式にする方法を

紹介していきます。

 準備するもの

今回、参考にさせていただいたブログがこちらです。

www.notitle-weblog.com

 こちらのサイトはとても分かりやすく説明されていて、初心者の

私でも簡単にできました。

準備するものは、吹き出しに使う画像です。

アイコンなどの画像やフリー素材から使用すればいいと思います

が、イラストレーターさんなどにお願いして作成してもらう

こともできます。会話形式ですので、いくつか準備しておけば

いいでしょう。

www.nekobuchou.com

 HTML編集かGoogle Chromeの拡張機能を使った方法

やり方は2つありますが、記事を書いていく中でHTML編集を使うのか

見たまま編集で使うのかで選んでください。

（注意：カスタマイズは必ず自己責任でお願いします！）

CSSコード

いずれにしても使用するコードは一緒ですので、まずは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);} 

 このコードを、ダッシュボードのデザイン→カスタマイズ→デザインCSSに

コピペします。

書き換えが必要なのは、クラス名と画像のURLの部分だけです。

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

クラス名はわかりやすい名前（半角英文字）ですが、長い名前より短い名前のほうが

あとあと都合がいいと思います。

吹き出し人数を増やす場合は、この部分の行を増やすだけです。

画像URLは、はてなフォトライフに画像をアップロードして画像を右クリック

すれば「画像アドレスをコピー」という項目があるので、クリックして

画像URLの部分にペーストすればOKです。

吹き出し位置コード

吹き出しの位置についてのコードですが、

「l-fuki クラス名」（エル　ハイフン　フキ　半角スペース　クラス名）

は「左側吹き出し右側画像」です。

「r-fuki クラス名」（アール　ハイフン　フキ　半角スペース　クラス名）

は「右側吹き出し左側画像」です。

このコードを記事を書く時に挿入して編集していきます。

HTML編集

記事を書いていき、HTML編集に切り替えてPタグの後ろから

赤字の下記のコードを入れていきます。

<p class="l-fuki クラス名">テキスト</p>

 吹き出し位置とクラス名は書き換えてください。

Chrome拡張機能を使った編集

できればこちらの方法をおすすめします！

設定さえしてしまえばあとはとてもラクちんですよ！

導入・設定方法はこちらです。

chrome.google.com

www.notitle-weblog.com

設定が完了したらあとは使い方はとても簡単です！

・吹き出しにしたい文章を、左クリック押したしたままドラッグして囲みます

・赤矢印（はてなマーク）がついていれば導入されていますので
　ここをクリックすると上記画面がおりてきます。

・青矢印に吹き出し位置コード（r-fuki クラス名）を入力して

　黄色矢印のボタンを押せば完了です！

クラス名のまえは半角スペースですよ！

注意点

 ・必ずプレビューで確認しておきましょう！

・吹き出し内の記事を改行するときは、「ENTER」ではなく

　「SIFT+ENTER」です！

まとめ

いかがでしょうか？

吹き出しがあるだけで、ブログの印象も柔らかくなってきますし

記事の表現にも幅が広がるのではないでしょうか。

ありがとうございました。さっそくやってみます！

 それはよかったです！

それでは今回はここまでです。

ご覧いただきありがとうございました。