はじめに
のっけからつまらないやり取りをしていましましたが、こんな風に吹き出し会話の記事を良く見るようになりました。
視覚的にわかりやすくて見た目もポップなので、場面によって使いこなしたいなぁと、当ブログにも導入してみました。
当記事では、はてなブログのCSSをカスタマイズして、吹き出し会話を設定する方法と、Google Chromeの拡張機能を利用したより簡単な使い方について紹介します。
参考にさせて頂いたとてもわかりやすい記事はこちらです。
設定方法
CSSをコピー
下記のコードをコピーし、メモ帳やWordに貼り付けましょう。
.entry-content .left-fukidashi,
.entry-content .right-fukidashi {
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 .left-fukidashi {
margin: 20px 20% 40px 0;
}
.entry-content .right-fukidashi {
margin: 20px 0 40px 19%;
}
.entry-content .left-fukidashi::before,
.entry-content .right-fukidashi::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 .left-fukidashi::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .right-fukidashi::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .left-fukidashi::after,
.entry-content .right-fukidashi::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 .left-fukidashi::after {
right: -110px;
}
.entry-content .right-fukidashi::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .left-fukidashi,
.entry-content .right-fukidashi {
width: 70%
}
.entry-content .left-fukidashi {
margin-right: 30%;
}
.entry-content .right-fukidashi {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .left-fukidashi::after,
.entry-content .right-fukidashi::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .left-fukidashi::after {
right: -84px;
}
.entry-content .right-fukidashi::after {
left: -84px;
}
}
.クラス名１::after {background-image:url(画像のÚRL);}
.クラス名２::after {background-image:url(画像のURL);}
CSSの書き換え：クラス名と画像
クラス名
コード最下部の赤字になっているクラス名１やクラス名２という部分を、実際に使うクラス名に変更します。
自分のアイコンはkeitalog、その他は男性アイコンをman、女性アイコンをwomanとしました。後から見てわかりやすいクラス名がおすすめです。
はてなブログで吹き出しを使う時は、ここで設定したクラス名を指定することになりますので、覚えておきましょう。下記に画像の設定方法を書いていますが、設定した画像も表示されるようになります。
画像
画像のURLって何？と思うかもしれません。
画像のURLは、はてなブログの編集画面で画像を貼り付けた後、HTML編集画面で見た時に表示されているURLです。
使用するアイコン選びに悩むと思いますが、写真を使いたい場合は「PAKUTASO（ぱくたそ）」、イラストの場合は「かわいいフリー素材集いらすとや」なんかがおすすめです。どちらも圧倒的に人気があり利用者も多いです。
気に入った画像を見つけたら、ペイントやSnipping Tool等を用いて顔の部分だけ切り取り、吹き出しアイコンとして使いましょう。
吹き出しの数は増やせます
ここでは、2人分の吹き出しだけですが、吹き出しに使いたい人物が多ければ、コードをコピーして追加し、クラス名と画像を設定しましょう。
はてなブログに反映
CSSのコードが準備できたら、はてなブログに反映されるよう設定しましょう。
まずは、はてなブログのダッシュボード画面で、デザインを選びます。
スパナマークをクリックし、下の方にある「デザインCSS」を選択します。
ボックスに、先ほど準備したCSSを貼り付けます。
貼り付けできたら、「変更を保存する」ボタンを忘れずに押しましょう。
これで、はてなブログの設定は完了です。
【参考】CSSの書き換え：LINE風やTwitter風に
上記のCSSを書き換えれば、形や色を変えてLINE風やTwitter風にすることもできます。
私はTwitter風にカスタマイズしました。
イケてるね！
私はピンク色にしてみよっかな！
コードを読み書きできる人向けですが、おすすめです。
不用意にいじるとおかしくなっちゃうので、かならずバックアップ取ってから書き換えを行うようにしましょう。
コピーするだけでLINE風やTwitter風にできる記事もまとめていますので、参照下さい。
吹き出しの追加方法
ここからは、吹き出しを実際に追加する方法について紹介します。
基本的な追加方法
記事に吹き出しを追加したい場合、HTML編集を使います。
＜例＞
私はTwitter風にカスタマイズしました。
イケてるね！
私はピンク色にしてみよっかな！
例えば、このやり取りの文章をHTML編集で見ると、
<p>私はTwitter風にカスタマイズしました。</p>
<p>イケてるね！</p>
<p>私はピンク色にしてみよっかな！</p>
一文ずつ、段落を表すpタグで囲まれています。
吹き出しにするには、頭の<p>をこのように書き換えます。
<p class="left-fukidashi keitalog">私はTwitter風にカスタマイズしました。</p>
<p class="right-fukidashi man">イケてるね！</p>
<p class="right-fukidashi woman">私はピンク色にしてみよっかな！</p>
使う吹き出しの種類（自分の会話か、相手の会話か）と、自分で指定したクラスを書きます。
基本的な使い方、仕組みはこのような形です。
Chromeの拡張機能を使って簡単に追加！
基本的な使い方を知った上で、時短・効率良く吹き出しを追加するChromeの拡張機能を紹介します。
Chrome拡張機能を追加
まずは、chromeウェブストアでにアクセスし「Chrome Add-on for Hatena」と検索すると出てきますので、拡張機能を追加しましょう。
追加すると、ツールバーにChrome Add-on for Hatenaのアイコンが加わります。
吹き出しを追加
ツールバーのChrome Add-on for Hatenaアイコンをクリックすると、クラス名を入力する欄があります。
ここに自分で設定したクラス名を入力することで、吹き出しのHTMLが反映されます。
ここは結構重要なポイントなのですが、記事に会話の文章をあらかじめ用意しておき、吹き出しにする会話の文章を選択した状態で、 Chrome Add-on for Hatenaを使いましょう。
こうすることで、HTML編集画面に行かず編集見たまま画面だけを使い吹き出し会話を作ることができるので、とても便利です！
後述していますが、クラス名を一から入力するのも面倒なので、単語登録して入力を省力化するのもおすすめです。
単語登録で簡単に追加！
ブラウザにChromeを使っていない人も多いと思いますので、そんな方々には単語登録をおすすめします。
吹き出しを使う度、毎回入力するのも面倒です。
「吹き出し」と入力すると<p class="left-fukidashi keitalog"></p>が出てくるように単語登録しておくなど、工夫するとより使いやすくなります。
単語登録すれば、Chromeを使っている人もあえて拡張機能を使う必要もなかったりします。（私は、他の機能も多用するため、拡張機能から使っています。）
最後に
はてなブログの無料版のように、少しデザインが味気ないなとか、見た目に一工夫加えたいなとか感じている方は、吹き出しのアイコンを使ってみてはいかがでしょうか。
プログラミング経験がなかったり少なかったりすると、CSSをいじるのって何か抵抗があるのですが、きちんとバックアップを取ってやれば失敗しても元に戻せるので、気負わずやってみるのが良いと思います。
PC版とスマホ版で、表示のされ方も違ったりするので、カスタマイズした際は必ずチェックすることも忘れずに。
少しでも参考になれば幸いです。
ぜひとも、お試しあれ！
