| なんかこれいやだなぁ。ちゃんとした吹き出しで話したいよ。 でもHTMLとかCSSとか変えないといけないんだよねぇ。わたしそのへん苦手だし簡単に吹き出しで話せる方法ないかな～ |
 |
| え？え～～～っ！？ | |
遊び心というかブログを書いているとマンネリ化してモチベーションが↓↓ってことありますよね。（まだ2記事目でそれをいうか（笑））
やっぱり、楽しく読んでもらうには楽しく書かなきゃって思うんです。
それで導入したいと思ったのが吹き出し。
最近の有料テンプレートだと標準で吹き出し機能があるんですが、超有名なワードプレス専用のプラグインがあるということで「Speech Bubble」を導入しました。ということで導入記録を残したいと思います。
※現在は「Speech Bubble」から下の記事で紹介している方法に変更しましたので、本記事のSpeech Bubbleでの吹き出しはすべて画像に差し替えてあります。
[st-card id=503 label=” name=”]
「Speech Bubble」の導入編
まずはプラグインの導入です。検索してインストールするだけなので簡単ですよ。
「Speech Bubble」のインストール
それではまずプラグインをインストールしなくては何も始まりませんのでインストールしちゃいましょう。
ワードプレス管理画面のプラグインから新規追加を選んで画面右上に「Speech Bubble」と入力します。
すると表示されましたね。「Speech Bubble」
これです。これ。この右上にある「今すぐインストール」をクリックするとほどなくインストールが完了し、
「有効化」というボタンに変わりました。これをクリックして有効化すると完了です。
おどろくほど簡単ですね。
「Speech Bubble」の使用編
インストールが終わったところでさっそく使ってみましょう。
「Speech Bubble」の使用方法
これもまた簡単です。
[speech_bubble type="std" subtype="L1" icon="1.jpg" name="A san" ]Ask something. [/speech_bubble] [speech_bubble type="std" subtype="R1" icon="2.jpg" name="B san" ]Answer something.[/speech_bubble]
このようなタグを投稿ページや固定ページのテキストに打ち込むとだけで
こんな感じで表示されます。
「Speech Bubble」画像の変更
画像の変更を行うにはまず、使いたい画像のアップロードが必要です。
画像のアップロード先は wp-content/plugins/speech-bubble/img/ になります。具体的に画像で見てみましょう。
※この例はXerver Web FTPです。
いつも使用しているFB-800とかりんの画像をアップロードしました。表示される画像は自動的に60px×60pxにリサイズされるのでアップロードする画像のサイズは少なくとも60px×60px以上の正方形がいいですね。
個人的には150px×150pxとか300px×300pxがいいかなと思っています。もし容量的に許せるなら300px×300pxがおススメです。とくに画像が立ち姿とかの場合は。（理由は後述します。）
画像のアップロードがすんだらiconの部分を表示したい画像の名称にします。
このとき、拡張子（ここでは.jpg）も正確に入れてください。
[speech_bubble type="std" subtype="L1" icon="FB-800-R.jpg" name="A san" ]iconがFB-800-R.jpgだとワタシFB-800になります。[/speech_bubble] [speech_bubble type="std" subtype="R1" icon="Karin-L.jpg" name="B san" ]わたしはKarin-L.jpgだよ。[/speech_bubble]
「Speech Bubble」名前の変更
勘のいいあなたならお気づきかとおもいますがnameの部分を書き換えると
[speech_bubble type="std" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]iconがFB-800-R.jpgだとワタシFB-800になります。[/speech_bubble] [speech_bubble type="std" subtype="R1" icon="Karin-L.jpg" name="かりん" ]わたしはKarin-L.jpgだよ。[/speech_bubble]
「Speech Bubble」吹き出しタイプの変更
typeとsubtypeを変更すると色々な吹き出しで楽しめます。それでは一つずつみてみましょう。
スタンダード版
[speech_bubble type="std" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="std"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="std" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="std"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="std" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="std"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="std" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="std"でsubtype="R2"だよ。[/speech_bubble]
facebook版1
[speech_bubble type="fb" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="fb"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="fb" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="fb"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="fb" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="fb"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="fb" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="fb"でsubtype="R2"だよ。[/speech_bubble]
facebook版2
[speech_bubble type="fb-flat" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="fb"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="fb-flat" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="fb"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="fb-flat" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="fb-flat"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="fb-flat" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="fb-flat"でsubtype="R2"だよ。[/speech_bubble]
LINE版1
[speech_bubble type="ln" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="ln"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="ln" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="ln"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="ln" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="ln"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="ln" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="ln"でsubtype="R2"だよ。[/speech_bubble]
LINE版2
[speech_bubble type="ln-flat" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="ln-flat"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="ln-flat" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="ln-flat"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="ln-flat" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="ln-flat"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="ln-flat" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="ln-flat"でsubtype="R2"だよ。[/speech_bubble]
ピンク版
[speech_bubble type="pink" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="pink"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="pink" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="pink"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="pink" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="pink"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="pink" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="pink"でsubtype="R2"だよ。[/speech_bubble]
rtail版
[speech_bubble type="rtail" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="rtail"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="rtail" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="rtail"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="rtail" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="rtail"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="rtail" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="rtail"でsubtype="R2"だよ。[/speech_bubble]
drop版
[speech_bubble type="drop" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="drop"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="drop"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="drop" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="drop"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="drop" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="drop"でsubtype="R2"だよ。[/speech_bubble]
think版
[speech_bubble type="think" subtype="L1" icon="FB-800-R.jpg" name="FB-800" ]type="think"でsubtype="L1"デス。[/speech_bubble] [speech_bubble type="think" subtype="R1" icon="Karin-L.jpg" name="かりん" ]type="think"でsubtype="R1"だよ。[/speech_bubble]
[speech_bubble type="think" subtype="L2" icon="FB-800-R.jpg" name="FB-800" ]type="think"でsubtype="L2"デス。[/speech_bubble] [speech_bubble type="think" subtype="R2" icon="Karin-L.jpg" name="かりん" ]type="think"でsubtype="R2"だよ。[/speech_bubble]
「Speech Bubble」のカスタマイズ編
ここではCSSを変更しますので、必ずプラグインを停止およびバックアップをとり自己責任でおねがいします。
「Speech Bubble」画像サイズを変えたい
次の吹き出しの色変更と一緒にみてください。
「Speech Bubble」吹き出しの色も変えたい
@charset "UTF-8";
/**
* .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
*
* コマ(アイコンと吹き出しをまとめたもの)部分
* frame(speaker icon and name, serief) part
*/
.sb-type-ln-flat {
overflow: hidden;
padding: 10px 20px;
margin: 0;
ln-height: 1.5;
color: #333333;
}
.sb-type-ln-flat > .sb-subtype-a:after,
.sb-type-ln-flat > .sb-subtype-b:after,
.sb-type-ln-flat > .sb-subtype-c:after,
.sb-type-ln-flat > .sb-subtype-d:after {
display: block;
clear: both;
content: "";
}
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker
*
* 話者領域
* Speaker Field
*/
/*@ここから追加*/
@media screen and (min-width:721px) {
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker {
float: left;
position: relative;
margin-right: -120px; /*@表示したいサイズを入力*/
width: 120px; /*@表示したいサイズを入力*/
}
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker {
float: right;
position: relative;
margin-left: -120px; /*表示したいサイズを入力*/
width: 120px; /*表示したいサイズを入力*/
}
}
@media screen and (max-width:720px) {
/*@ここまで追加*/
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker {
float: left;
position: relative;
margin-right: -70px;
width: 70px;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker {
float: right;
position: relative;
margin-left: -70px;
width: 70px;
}
} /*かっこで閉じる*/
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
*
* 話者のアイコン部分
* Speaker Icon part
*/
/*@ここから追加*/
@media screen and (min-width:721px) {
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-icon,
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-icon,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-icon,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-icon {
text-align: center;
height: 120px; /*@表示したいサイズを入力*/
}
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
border-style: none;
height: 120px; /*@表示したいサイズを入力*/
width: 120px; /*@表示したいサイズを入力*/
}
}
@media screen and (max-width:720px) {
/*@ここまで追加*/
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-icon,
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-icon,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-icon,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-icon {
text-align: center;
height: 60px;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
border-style: none;
height: 60px;
width: 60px;
}
} /*かっこで閉じる*/
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
*
* 話者の名称部分
* Speaker name part
*/
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-name,
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-name,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-name,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-name {
position: absolute;
top: 0;
overflow: hidden;
font-size: 12px;
white-space: nowrap;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-name,
.sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-name {
left: 80px;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-name,
.sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-name {
right: 80px;
}
/*----------------------------------------------------------------------------------*/
/* ln-flatタイプの吹き出し */
/* ln-flat Type (For a,b) */
/*----------------------------------------------------------------------------------*/
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content
* .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
*
* セリフ&引き出し 部分
* Serief& Tail part
*/
@media screen and (min-width:721px) {
.sb-type-ln-flat > .sb-subtype-a > .sb-content {
float: left;
position: relative;
padding-top: 26px;
margin-right: 120px; /*@表示したいサイズに変更*/
margin-left: 120px; /*@表示したいサイズに変更*/
}
}
@media screen and (max-width:720px) {
.sb-type-ln-flat > .sb-subtype-a > .sb-content {
float: left;
position: relative;
padding-top: 26px;
margin-left: 80px;
}
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content:before {
position: absolute;
top: 26px;
left: -8px;
z-index: 1;
height: 0;
width: 0;
border-style: solid none none solid;
border-width: 8px;
border-color: #EEEEEE transparent; /*@L吹き出しの色変更*/
content: "";
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content:after {
position: absolute;
top: 27px;
left: -6px;
z-index: 3;
height: 0;
width: 0;
border-style: solid none none solid;
border-width: 8px;
border-color: #EEEEEE transparent; /*@L吹き出しの色変更*/
content: "";
}
@media screen and (min-width:721px) {
.sb-type-ln-flat > .sb-subtype-b > .sb-content {
float: right;
position: relative;
padding-top: 26px;
margin-right: 120px; /*@表示したいサイズに変更*/
margin-left: 120px; /*@表示したいサイズに変更*/
}
}
@media screen and (max-width:720px) {
.sb-type-ln-flat > .sb-subtype-b > .sb-content {
float: right;
position: relative;
padding-top: 26px;
margin-right: 80px;
}
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content:before {
position: absolute;
top: 26px;
right: -8px;
z-index: 1;
height: 0;
width: 0;
border-style: solid solid none none;
border-width: 8px;
border-color: #FFDDFF transparent; /*@R吹き出しの色変更*/
content: "";
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content:after {
position: absolute;
top: 27px;
right: -6px;
z-index: 3;
height: 0;
width: 0;
border-style: solid solid none none;
border-width: 8px;
border-color: #FFDDFF transparent; /*@R吹き出しの色変更*/
content: "";
}
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
*
* 吹き出しの本体部分
* Speach bubble' body part
*/
.sb-type-ln-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble,
.sb-type-ln-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
position: relative;
z-index: 2;
padding: 6px 12px;
background-color: #EEEEEE; /*@L吹き出しの色変更*/
border-style: solid;
border-width: 1px;
border-color: #EEEEEE; /*@L吹き出しの色変更*/
border-radius: 15px;
color: #333333;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble {
border-radius: 0 15px 15px 15px;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
background-color: #FFDDFF; /*@R吹き出しの色変更*/
border-color: #FFDDFF; /*@R吹き出しの色変更*/
border-radius: 15px 0 15px 15px;
}
/*----------------------------------------------------------------------------------*/
/* ln-flat用に調整した考えてるタイプの吹き出し */
/* ln-flat-Think Type (For c,d) */
/*----------------------------------------------------------------------------------*/
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content
* .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
*
* セリフ&引き出し 部分
* Serief& Tail part
*/
@media screen and (min-width:721px) {
.sb-type-ln-flat > .sb-subtype-c > .sb-content {
float: left;
position: relative;
padding-top: 1.5em;
margin-left: 140px; /*@表示したいサイズ+20くらい*/
margin-right: 120px; /*@表示したいサイズに変更*/
}
}
@media screen and (max-width:720px) {
.sb-type-ln-flat > .sb-subtype-c > .sb-content {
float: left;
position: relative;
padding-top: 1.5em;
margin-left: 100px;
}
}
.sb-type-ln-flat > .sb-subtype-c > .sb-content:before {
position: absolute;
top: 24px;
left: -17px;
height: 12px;
width: 12px;
background-color: #EEEEEE; /*@L吹き出しの色変更*/
border:solid 1px #EEEEEE; /*@L吹き出しの色変更*/
border-radius: 10px;
color: #333333;
content: "";
}
.sb-type-ln-flat > .sb-subtype-c > .sb-content:after {
position: absolute;
top: 20px;
left: -28px;
height: 8px;
width: 8px;
background-color: #EEEEEE; /*@L吹き出しの色変更*/
border:solid 1px #EEEEEE; /*@L吹き出しの色変更*/
border-radius: 5px;
color: #333333;
content: "";
}
@media screen and (min-width:721px) {
.sb-type-ln-flat > .sb-subtype-d > .sb-content {
float: right;
position: relative;
padding-top: 1.5em;
margin-left: 120px; /*@表示したいサイズに変更*/
margin-right: 140px; /*@表示したいサイズ+20くらい*/
}
}
@media screen and (max-width:720px) {
.sb-type-ln-flat > .sb-subtype-d > .sb-content {
float: right;
position: relative;
padding-top: 1.5em;
margin-right: 100px;
}
}
.sb-type-ln-flat > .sb-subtype-d > .sb-content:before {
position: absolute;
top: 24px;
right: -17px;
height: 12px;
width: 12px;
background-color: #FFDDFF; /*@R吹き出しの色変更*/
border: solid 1px #FFDDFF; /*@R吹き出しの色変更*/
border-radius: 10px;
content: "";
}
.sb-type-ln-flat > .sb-subtype-d > .sb-content:after {
position: absolute;
top: 20px;
right: -27px;
height: 8px;
width: 8px;
background-color: #FFDDFF; /*@R吹き出しの色変更*/
border: solid 1px #FFDDFF; /*@R吹き出しの色変更*/
border-radius: 5px;
content: "";
}
/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
*
* 吹き出しの本体部分
* Speach bubble' body part
*/
.sb-type-ln-flat > .sb-subtype-c > .sb-content > .sb-speech-bubble,
.sb-type-ln-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
position: relative;
z-index: 2;
padding: 6px 12px;
background-color: #EEEEEE; /*@L吹き出しの色変更*/
border-style: solid;
border-width: 1px;
border-color: #EEEEEE; /*@L吹き出しの色変更*/
border-radius: 15px;
color: #333333;
}
.sb-type-ln-flat > .sb-subtype-c > .sb-content > .sb-speech-bubble {
border-radius: 15px 15px 15px 15px;
}
.sb-type-ln-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
background-color: #FFDDFF; /*@R吹き出しの色変更*/
border-color: #FFDDFF; /*@R吹き出しの色変更*/
border-radius: 15px 15px 15px 15px;
}
まとめ
Speech Bubbleをつかうと会話形式で楽しくブログが書けますね。
しかも吹き出しのパターンもたくさんあるので好みのパターンで会話をすれば楽しさ倍増。書き方にもよりますが読み手側も楽しく読めるのではないでしょうか。
どうしても吹き出しや画像をカスタマイズしたいという場合は少し大変かもしれませんが、勉強がてらにすこしコードをさわってみるのもいいかもしれませんね。
コメント