今回は有料のWordPressテーマ「STORK（ストーク）」
の吹き出しをカスタマイズする方法をご紹介します！
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r"]吹き出しはコレだよ[/voice]
ストークを使っているあなたは１度は使ったことがあるんじゃないですか？実は私もこの吹き出し機能に憧れてストークを購入しました（笑）
ただ、デフォルトの吹き出しは薄い灰色でとてもシンプルですよね。Facebook風やLINE風もあるけど、自由に色が変えられたらな……。
「吹き出しの線や背景色を変えたい」「でもコピペで簡単にできるのがいい」そんなあなたへ向けた記事です。いつもの吹き出しが華やかになりますよ♪
ストークの吹き出し機能
ストークには初めから吹き出し機能がショートコードで使用できます。
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l"]シンプルな吹き出しだよ[/voice]
[box class="blue_box"][voice icon="画像のURL" name="名前" type="l"]吹き出し内の文字[/voice][/box]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l fb"]フェイスブック風の吹き出しだよ[/voice]
[box class="blue_box"][voice icon="画像のURL" name="名前" type="l fb"]吹き出し内の文字[/voice][/box]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l line"]LINE風の吹き出しだよ[/voice]
[box class="blue_box"][voice icon="画像のURL" name="名前" type="l line"]吹き出し内の文字[/voice][/box]
ストークの吹き出し機能をカスタマイズする
使うショートコードはこちら。記事に貼り付けて使用してください。
[box class="blue_box"][voice icon="画像のURL" name="名前" type="l sample"]これはアイコンが左側だよ[/voice]
[voice icon="画像のURL" name="名前" type="r sample"]これはアイコンが右側だよ[/voice][/box]
これから紹介するコードをコピペするだけでOKです。
コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪
子テーマについては「STORK（ストーク）で子テーマを導入する方法」で詳しく説明してあります。
WordPressでCSSを追加する3つの方法と各メリット・デメリット
文字の色を変える
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample6"]文字の色が変わるよ[/voice]
クリックでCSSを表示
/* --- 吹き出し（文字色変更） --- */
.voice.sample .voicecomment{
color: 好きなカラーコード;
}
枠線を細くする
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r sample2"]少し細くなったよ[/voice]
クリックでCSSを表示
/* --- 吹き出し（細め） --- */
.voice.sample .voicecomment{
border-width: 2px;
}
.voice.l.sample .voicecomment:before{
border-right-width: 8px;
border-bottom-width: 7px;
border-top-width: 7px;
top: 11px;
left: -10px;
}
.voice.r.sample .voicecomment:before{
border-left-width: 8px;
border-bottom-width: 7px;
border-top-width: 7px;
top: 11px;
right: -10px;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample"]極細だよ[/voice]
クリックでCSSを表示
/* --- 吹き出し（極細） --- */
.voice.sample .voicecomment{
border-width: 1px;
}
.voice.l.sample .voicecomment:before{
border-right-width: 8px;
border-bottom-width: 7px;
border-top-width: 7px;
top: 11px;
left: -8px;
}
.voice.r.sample .voicecomment:before{
border-left-width: 8px;
border-bottom-width: 7px;
border-top-width: 7px;
top: 11px;
right: -8px;
}
枠線の色を変える
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r sample3"]枠線の色が変わるよ[/voice]
クリックでCSSを表示
/* --- 吹き出し（枠線の色変更） --- */
.voice.sample .voicecomment{
border-color: 好きなカラーコード;
}
.voice.l.sample .voicecomment:before{
border-right-color: 好きなカラーコード;
}
.voice.r.sample .voicecomment:before{
border-left-color: 好きなカラーコード;
}
枠線と背景色を変える
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample5"]枠線と背景色が変わるよ[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r sample4"]同じ色にするとフラットっぽいよ[/voice]
クリックでCSSを表示
/* --- 吹き出し（背景色変更） --- */
.voice.sample .voicecomment{
background-color: 好きなカラーコード（背景）;
border-color: 好きなカラーコード（枠線）;
}
.voice.l.sample .voicecomment:before{
border-right-color: 好きなカラーコード（枠線）;
}
.voice.l.sample .voicecomment:after{
border-right-color: 好きなカラーコード（背景）;
}
.voice.r.sample .voicecomment:before{
border-left-color: 好きなカラーコード（枠線）;
}
.voice.r.sample .voicecomment:after{
border-left-color: 好きなカラーコード（背景）;
}
ストークの吹き出しのアイコンをカスタマイズする
枠線の太さを変える
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample01"]細い枠線だよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（枠線の太さ） --- */
.voice.sample .icon img {
border-width: 1px;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample02"]枠線がなくなるよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（枠線の太さ） --- */
.voice.sample .icon img {
border-width: 0px;
}
枠線の色を変える
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample03"]枠線の色が変わるよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（枠線の色） --- */
.voice.sample .icon img {
border-color: 好きなカラーコード;
}
枠線と背景色を変える
画像が透過済みの場合、背景色も設定できます。
[voice icon="https://palulog.com/wp-content/uploads/2017/08/IMG_3994.png" name="ぱる" type="r sample05"]枠線と背景色が変わるよ[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/08/IMG_3996.png" name="ぱる" type="l sample04"]同じ色にするとフラットっぽいよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（枠線と背景色） --- */
.voice.sample .icon img {
background-color: 好きなカラーコード（背景）;
border-color: 好きなカラーコード（枠線）;
}
枠線の種類を変える
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r sample06"]二重線だよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（二重線） --- */
.voice.sample .icon img {
border-style: double;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="l sample07"]破線だよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（破線） --- */
.voice.sample .icon img {
border-style: dashed;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r sample08"]ドットだよ[/voice]
クリックでCSSを表示
/* --- 吹き出しアイコン（ドット） --- */
.voice.sample .icon img {
border-style: dotted;
}
おわりに：ストークでオリジナルの吹き出しを作れる
コピペで簡単に吹き出しをカスタマイズする方法をご紹介しました。
[voice icon="https://palulog.com/wp-content/uploads/2017/08/IMG_3994.png" name="ぱる" type="l sample10"]こんな風に[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/08/IMG_3996.png" name="ぱる" type="r sample11"]何パターンも作りたい！[/voice]
というあなたは、ショートカットとCSSにあるsampleを別名に変えてみてください！
例えば男の子と女の子のアイコンで別々の吹き出しを作りたい場合。
男の子は「boy」女の子は「girl」と名前をつけたとすると、それぞれsampleをboyに、sampleをgirlに変更してください！
あなたが素敵なブログをつくれますように。ぱるでした！