ブログで吹き出し会話第３弾！より使いやすくパワーアップ！

吹き出しで会話 アプリ／ツール
2018.02.17

吹き出しで会話するためのプラグインなんてもう必要ない！

以前、無料ブログでも吹き出しが使えるようにと以下の記事を書いたことがあります。

[st-card id=503 label=” name=”]

今回、少しパワーアップして「考え中吹き出し」を追加しました！！

さらにCSS内の変数を排してHTML上から吹き出しの文字や背景色を変更できるようにしました。というか以前のものもHTML上から変更できたんですが、わかりやすいようにHTMLの記述を増やしています。

これによって何ができるかというと、キャラクターごとに吹き出しの色を変更することができるので、よりキャラクター色をだせるようになります。

さらに！もちろん無料ブログだけでなく、ワードプレスでも使えます。（仕組みは同じなのであたりまえなんですけどね。）実際に僕も「Speech Bubble」といったプラグインはやめて、こちらに移行しています。（一部、変更が行き届いていない記事が残っているかもしれませんが…）

でもですよ。とくにビジュアルモードで記事を書いていると、記事中に吹き出しのHTMLタグを入れるのがめんどくさいんですよね。なので、プラグインである「Post Snippets」と「AddQuicktag」を使った吹き出しすっきり活用法も併せて紹介したいと思います。

最近では、ワードプレスのテーマに標準で搭載されるようになってきた吹き出しではありますが、なかなか「考え中」の吹き出しはありませんので、「考え中」吹き出しが欲しいという方は参考にしてみてください。

では、説明をはじめていきます。

管理人は吹き出しマニアか

スタイルシートの編集

スタイルシートの編集は、以下のコードを貼り付けるだけです。
※2019.03.21：スマホやタブレットでの表示を考慮してなかったというか、記述漏れがあったので「スマホ・タブレット表示時の設定」を追加しました。

今回、以下のコードのみでPCでもスマホでも共通で表示することができように調整しています。

もしかしたら、お使いのテーマによって多少の調整は必要になるかもしれませんが、基本的には以下のコードになります。

もし、キャクターと吹き出しが2行に分かれてしまうというような場合は、メインコンテンツの幅が狭いことが考えられます。そのため、以下のコード内の31行目にあるmax-widthの値をすこし小さくしてみてください。
※スマホやタブレットの場合は、124行目のmax-width。

/*-------------------------------------------------------
  吹き出しの設定
-------------------------------------------------------*/
.balloon{
    clear: both;
    display: block;
    overflow: hidden;
}
/* アイコン */
.left-icon,
.right-icon{
    width: 60px;
    height: 60px;
    margin: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.left-icon{
    float: left;
}
.right-icon{
    float: right;
}
/* 吹き出し本体 */
.left-balloon,
.left-think,
.right-balloon,
.right-think{
    position: relative;
    max-width: 68%;
    padding: 10px;
}
.left-balloon,
.left-think{
    float: left;
    color: #000000;
    margin: 10px 0px 10px 15px;
    background: #ABBDFF;
}
.left-balloon{
    border-radius: 0 10px 10px 10px;
    border-color: #ABBDFF transparent transparent transparent;
}
.right-balloon,
.right-think{
    float: right;
    color: #000000;
    margin: 10px 15px 10px 0px;
    background: #FF9999;
}
.right-balloon{
    border-radius: 10px 0 10px 10px;
    border-color: #FF9999 transparent transparent transparent;
}
.left-think,
.right-think{
    border-radius: 20px;
}
/* 吹き出し疑似要素 */
/* 通常吹き出し */
.left-balloon:before,
.right-balloon:before{
    content: "";
    position: absolute;
    top: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: inherit;
}
.left-balloon:before{
    left: -9px;
}
.right-balloon:before{
    right: -9px;
}
/* 考え中吹き出し */
.left-think:before,
.left-think:after,
.right-think:before,
.right-think:after{
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}
.left-think:before,
.right-think:before{
    top: 1px;
    width: 10px;
    height: 10px;
}
.left-think:before{
    left: -20px;
}
.right-think:before{
    right: -20px;
}
.left-think:after,
.right-think:after{
    top: 10px;
    width: 15px;
    height: 15px;
}
.left-think:after{
    left: -15px;
}
.right-think:after{
    right: -15px;
}
/*---スマホ・タブレットサイズ（750px以下）設定---*/
@media only screen and (max-width: 750px){
/* アイコン */
.left-icon,
.right-icon{
    width: 30px;
    height: 30px;
}
/* 吹き出し設定 */
.left-balloon,
.left-think,
.right-balloon,
.right-think{
    max-width: 75%;
}
}

吹き出しHTML

吹き出しのHTMLは以下の通りです。以前のものと大きな変更はありませんが、文字や背景色を設定する部分を追加しています。

文字や背景色の設定は必ずしも行う必要はなく、設定していない場合はデフォルト色で表示されます。

左側にキャラクタを配置した通常の吹きだし

<!--通常の左キャラ吹き出し-->
<div class="balloon">
<div class="left-icon" style="background-image: url('画像URL')"></div>
<div class="left-balloon" style="color:; background:; border-top-color:">
<!--ここにセリフ-->左にキャラアイコンを配置した通常の吹き出しです。
</div>
</div>
 
左にキャラアイコンを配置した通常の吹き出しです。

3行目のstyleで文字や背景色を変更することができます。

文字の色を変更するときは”color:＃ABCDEF;”のようにカラーコードを入れます。

背景色を変更するときは”background”と”border-top-color”の両方に同じカラーコードを指定する必要がありますので、
“background:＃FEDCBA; border-top-color＃FEDCBA”のようになります。

現在の色は、何も設定していないデフォルト色です。

右側にキャラクタを配置した通常の吹きだし

<!--通常の右キャラ吹き出し-->
<div class="balloon">
<div class="right-icon" style="background-image: url('画像URL')"></div>
<div class="right-balloon" style="color:; background:; border-top-color:">
<!--ここにセリフ-->右にキャラアイコンを配置した通常の吹き出しです。
</div>
</div>
 
右にキャラアイコンを配置した通常の吹き出しです。

色の変え方は、上記の「左側にキャラクタを配置した通常の吹きだし」と同じです。

現在の色は、何も設定していないデフォルト色です。

左側にキャラクタを配置した考え中吹きだし

<!--考え中左キャラ吹き出し-->
<div class="balloon">
<div class="left-icon" style="background-image: url('画像URL')"></div>
<div class="left-think" style="color:; background:">
<!--ここにセリフ-->左にキャラアイコンを配置した考え中吹き出しです。
</div>
</div>
 
左にキャラアイコンを配置した考え中吹き出しです。

通常吹き出しと同じく3行目のstyleで文字や背景色を変更することができます。

文字の色を変更するときは”color:＃ABCDEF;”のようにカラーコードを入れます。

背景色を変更するときは”background:＃FEDCBA”のようにカラーコードを入れます。

現在の色は、何も設定していないデフォルト色です。

右側にキャラクタを配置した考え中吹きだし

<!--考え中右キャラ吹き出し-->
<div class="balloon">
<div class="right-icon" style="background-image: url('画像URL')"></div>
<div class="right-think" style="color:; background:">
<!--ここにセリフ-->右にキャラアイコンを配置した考え中吹き出しです。
</div>
</div>
 
右にキャラアイコンを配置した考え中吹き出しです。

色の変え方は、上記の「左側にキャラクタを配置した考え中吹きだし」と同じです。

現在の色は、何も設定していないデフォルト色です。

ワードプレスで吹き出しを使った記事作成を簡単にする方法

吹き出しはやりたいけど、HTMLタグの挿入が何かとめんどくさいし、間違えたらおかしくなるしってありますよね。

とくに、普段ビジュアルモードで記事を書いている場合は、吹き出しを入れるたびにテキストモードに切り替えないといけないので、ちょっとしたことですけど、積もり積もると嫌になります。

ということで「Post Snippets」と「AddQuicktag」を使って簡単にかつ記事作成中の画面をすっきりさせたいと思います。

「Post Snippets」と「AddQuicktag」は、インストール済であることを前提に話を進めていきますので、事前にインストールしておいてくださいね。それに、どちらのプラグインもかな～り使えるプラグインなので、吹き出しに関係なくインストールしておくことをお勧めします。

Post Snippetsの設定

まずPost Snippetsの設定を開いて設定を行っていきます。

Post Snippetsの設定

Post Snippetsの設定

  1. 新しく登録を行うために「Add New Snippet」をクリックすると
  2. 新規登録用の項目が出てきます。

Post Snippetsの設定

Post Snippetsの設定

ここで吹き出しの終了タグを登録します。

  1. 吹き出し終了ということがわかる名称を入力します。ここでは「speak-end」としました。
  2. 吹き出しの終了タグを入力します。
  3. なくてもいいのですが、わかりやすいようにメモを書いておきます。
  4. 「Shortcode」にチェックいれます。
  5. 入力が終わったら「Update Snippets」をクリックして終了タグの登録完了です。

Post Snippetsの設定 

続いて終了タグと同じ要領で吹き出しの開始タグを登録します。

  1. 「Add New Snippet」で新しく入力項目を追加したら、どのキャラクターの吹き出しかわかりやすいように名称を入力します。ここでは、「charname-speak」としました。
  2. 吹き出しの開始タグを入力します。このとき、表示したい画像URLへ変更しておいてください。また、文字、背景の色を変えたい場合は、カラーコードを指定しておいてください。
  3. わかりやすいようにメモを残しておきます。
  4. 「Shortcode」にチェックいれ、「Update Snippets」をクリックします。

同じ要領でキャラクターや左右の違いによって、吹き出し開始タグを追加登録しておきます。
※吹き出しの終了タグは、一つだけの登録で大丈夫ですからね。

と、ここまでの登録で十分に使えるのですが、Post Snippetsだけだと吹き出しの開始タグと終了タグを別々で呼び出さないといけないので、終了タグを挿入し忘れちゃったなんてことにならないように「AddQuicktag」を利用します。

AddQuicktagの設定

では、AddQuicktagの設定を行っていきます。

AddQuicktagの設定

  1. キャラクター名や通常の吹き出しなのか考え中吹き出しなのかがわかりやすいように名称を入力します。
  2. 開始タグのショートコードを入力ですが、⑧で入力した名称を[]で挟んで入力します。
  3. 終了タグのショートコードの入力です。③で入力した名称を[]で挟んで入力します。
  4. チェックを入れます。
  5. 変更を保存で終了です。

実際に使ってみる

吹き出しの挿入

AddQuicktagを使っていると記事作成画面に「Quicktags」という項目がありますので、その中から⑫で入力した名称を選択すると関連する吹き出しを使用することができます。

この方法を使えば、開始タグも終了タグもショートコードで表示されるため、セリフの入力も非常に行いやすく、間違いも少なくなると思います。

まとめ

吹き出しネタで第3弾…どんだけ吹き出し好きなんだよって感じですが、僕自身はあまりうまく活用できていないように感じる今日この頃です。

そうだよねぇ。私たちの登場はとてつもなく局所的だもん。
これまで、管理人を擁護してきたワタシもそう思います。

とまぁ、楽しくブログってきましょう(笑)

コメント

  1. 唯。 より:
    2019-03-21 21:13

    こんばんわ。
    挨拶が遅れまして申し訳ございません。

    うちのコメントに残していただいたように書き換えたらうまいこと表示されるようになりました！ありがとうございます(*ﾉωﾉ)

    返信
  2. ロフ より:
    2019-03-22 11:39

    うまくいきましたか！よかったです。
    あと、今回リンクをいただいたことで、本記事を読み返していたら、レスポンシブ（スマホ、タブレットでの表示最適化）ができていないことに気づき、CSS（111行目以降）に追記しました。
    良かったら、試してみてください。

    返信
タイトルとURLをコピーしました