WPテーマ「STORK」の吹き出しをカスタマイズする方法！

ここあです。

私はブログの記事を書く時に

STORKのデフォルト機能として実装されている

「吹き出し機能」をあまり使わないのですが…

前回、記事を書いた時に

せっかくなので「使ってみよう！」と

試してみました。

しかし、吹き出し機能を使ってはみたものの

シンプルなデフォルトの吹き出し機能で

このような会話形式にした場合…

どちらが話している会話か

少し分かりにくいなって思ったんですね…＾＾；

なので、色を着けたら見やすくなるかな？と思い

↓ こんな風にカスタマイズしてみました。

どうですか？少しは分かりやすくなっていますか？

ということで、今回は…

STORKのオリジナルショートコード「吹き出し機能」の

色を変える方法について詳しくご紹介したいと思います。

STORKの吹き出し機能：デフォルトの色は3種類

STORKにデフォルトで実装されている

吹き出し機能の色は全部で3種類。

• シンプルな吹き出し
• Facebook風
• LINE風

それぞれ、以下の3パターンです。

他にもアイコンのサイズを変えたり

アイコンの周りに色をつけたりもできますが

基本的なベースはこれら3つになります。

もちろん、これだけでも上手く使えば

使い分けできないこともありませんが

せっかく使うなら、もっと自分らしい

オリジナル感を出したいですよね…。

吹き出しはある程度、記事の面積を占める分

色を変えると、記事の印象も変わります。

ということで、あなたもお好みの色にレッツトライ!＾＾

吹き出しのカスタマイズ方法

まずは最初に、吹き出しをカスタマイズするための

CSSコードの記述先を説明しておきますね。

CSSコードはダッシュボードメニューから

外観 → カスタマイズをクリック。

追加CSSをクリックし

↓ここにCSSコードを記載してくださいね。

それでは吹き出し機能の色を変える方法について

順番に解説していきます＾＾

STORKの吹き出しをカスタマイズしよう！

STORKの吹き出しも

いろいろとカスタマイズできるので

ぜひ試してみてください。

吹き出しのカスタマイズで使うショートコード

STORKの吹き出し機能は全部で3色あると

説明しましたが、今回使用するのは

一番オーソドックスな吹き出しのショートコードです。

“画像のURL”の部分には、あなたがアイコンにしたい画像のURLを

name="名前"の部分にはアイコンの下に表示させたい名前を

type="l girl"の部分は「l（エル）」ならアイコンは左

「r」ならアイコンは右に表示されます。

さらにgirlの部分はあなたが好きな単語を

アルファベットで入れてください。

ちなみに…、シンプルな吹き出し。アイコンは左です。と

なっている部分が吹き出し内に会話として表示されます。

ここまでは大丈夫ですか？＾＾

吹き出しの枠線をカスタマイズする方法

それでは順番に説明していきますね。

まずは、枠線の色を変更する方法。

枠線の色を変える場合は、以下のCSSコードを

追加CSSに記述してください。

CSSコード


.voice.girl .voicecomment{
border-color: #f29da6;
}.voice.l.girl .voicecomment:before{
border-right-color: #f29da6;
}.voice.r.girl .voicecomment:before{
border-left-color: #f29da6;
}

上記、コードを追加すると枠線の色は

以下のようなピンクになります。

なので、あなたのお好みに合わせて

6桁のカラーコード#f29da6の部分を

3カ所とも全て同じカラーコードで変更してください。

また、今回はショートコードの部分にtype="l girl"としているので

CSSコードの.voice.girl .voicecommentの部分を.girlとしていますが

ここはあなたが設定した英単語のアルファベットに変更してください。

例えば、type="l boy"としたら

CSSコードは.voice.boy .voicecommentと変更しましょう。

さらにアイコンの位置を右にしたい場合は「l」から「r」に変更し

type="r boy"とすれば、アイコンの位置も変わります。

これでもう完璧ですよね＾＾

吹き出しの線幅をカスタマイズする方法

次に、吹き出しの線幅を変える方法です。

線幅の変更する場合は

以下のCSSコードを追加してください。

CSSコード

.voice.girl .voicecomment{
border-width: 1px;
}.voice.l.girl .voicecomment:before{
border-right-width: 8px;
border-bottom-width: 7px;
border-top-width: 7px;
top: 11px;
left: -8px;
}.voice.r.girl .voicecomment:before{
border-right-width: 8px;
border-bottom-width: 7px;
border-top-width: 7px;
top: 11px;
left: -8px;
}

そうすると、表示はこうなります。

少し分かりづらいですが…

吹き出しの枠線が極細の状態になっています。

このコードで変えるべきは…

一番上のブロックのborder-width: 1px;の部分と

2つ目と3つ目のブロックの一番下left: -8px;の部分です。

ここの数字をborder-width: 2px;や

left: -9px;と調整すれば、線幅を太くしたりと調整ができます。

ちなみに、上記コードの2つ目のブロックは

アイコンが左にある場合のCSSコード

3つ目のブロックはアイコンが右側にある場合のCSSコードです。

なので「俺は絶対に左側しか使わん！」という場合は…

3つ目のブロックのCSSコードは不要です（笑）

つまり、違いは1行目.voice.r.girl .voicecomment:before{の部分が

「r」になっているか、「l」になっているかだけなので

ぱっと見「何が違うの？」と思うかもしれませんが

両方とも大事なコードなので気を付けてくださいね。

吹き出しの枠線と背景の色をカスタマイズする方法

続いて、吹き出しの枠線と背景色の色を変える方法。

枠線と背景色を変更したい場合は

以下のCSSコードを記述してください。

CSSコード

.voice.girl .voicecomment{
background-color: #fdeef4;
border-color:#f29da6;
}.voice.l.girl .voicecomment:before{
border-right-color: #f29da6;
}.voice.l.girl .voicecomment:after{
border-right-color: #fdeef4;
}.voice.r.girl .voicecomment:before{
border-left-color: #f29da6;
}

.voice.r.girl .voicecomment:after{
border-left-color: #fdeef4;
}

上記コードを追加すると、以下のような表示になります。

枠線の色や背景色を変える場合は

追加したCSSコードのカラーコード

#fdeef4;と#f29da6;を好きな色に変更してください。

ただし、気を付けて欲しいのは…

追加したCSSコードでそれぞれが1セットになるので

背景色であれば#fdeef4;の3箇所を

枠線の色も#f29da6;の3箇所それぞれを

全て同じカラーコードで設定してください。

でないと、てんでバラバラな色になってしまいます＾＾；

それでもいいという場合は別ですが…（笑）

吹き出しの文字色をカスタマイズする方法

せっかくなので、吹き出しの文字色を

カスタマイズする方法もお伝えしておきますね。

吹き出し内の文字色をカスタマイズする場合は

以下のCSSコードを追加してください。

CSSコード

.voice.girl .voicecomment{
color: #f29da6;
}

CSSコードを追加すると、文字の色がピンク色に変わります。

文字の色を変える場合はcolor: #f29da6;のカラーコードを

あなたの好きな色に変更してくださいね。

正直、これだけでもだいぶ印象が変わりますよね…。

あなたは吹き出しの背景色を変えるのと…

文字色だけを変えるのと…

どちらがお好みですか？

私は意外と文字色の方がシンプルで好きかも…＾＾；

STORKの吹き出しを個別にカスタマイズする方法

STORKの吹き出しがカスタマイズできるようになったら

今度は個別にカスタマイズして、あなただけの

オリジナル吹き出しを増やしてみましょう。

つまり、どういうことかと言うと…

↓こういうことですね＾＾

ここまで説明してきた流れというのは以下1つのショートコード

に対するCSSコードです。

つまり、指定コードを分けなければ、全て同じ設定になります。

逆にそれぞれの指定コードを分けることで、上記画像のような

2種類のオリジナル吹き出しを一度に表示させることも可能です。

STORKのオリジナル吹き出しを増やす場合は

まず指定コードを複数用意しましょう。※今回は2つだけ…

今回の記事では、ショートコードをtype="l girl"というカタチで

進めてきたので、もう1つのショートコードは分かりやすく

type="r boy"としておきますね。

指定コードA：[voice icon="画像のURL" name="名前" type="l girl"]アイコンは左です。[/voice]

指定コードB：[voice icon="画像のURL" name="名前" type="r boy"]アイコンは右です。[/voice]

※アイコンのURLにはあなたの画像のURLを入れてください。

ショートコードが2つ用意できたら

あとはCSSコードも2つに分けるだけです。

私が用意したCSSコードは以下の2つ。

girlに対するCSSコード

.voice.girl .voicecomment{
background-color: #fdeef4;
border-color:#f29da6;
}.voice.l.girl .voicecomment:before{
border-right-color: #f29da6;
}.voice.l.girl .voicecomment:after{
border-right-color: #fdeef4;
}.voice.r.girl .voicecomment:before{
border-left-color: #f29da6;
}

.voice.r.girl .voicecomment:after{
border-left-color: #fdeef4;
}

boyに対するCSSコード

.voice.boy .voicecomment{
background-color: #eaf6fd;
border-color:#87b2e0;
}.voice.l.boy .voicecomment:before{
border-right-color: #87b2e0;
}.voice.l.boy .voicecomment:after{
border-right-color: #eaf6fd;
}.voice.r.boy .voicecomment:before{
border-left-color: #87b2e0;
}

.voice.r.boy .voicecomment:after{
border-left-color: #eaf6fd;
}

これら2つのショートコードとCSSコードを使えば

以下の吹き出しと全く同じ状態が作れます。

なので、ショートコードとCSSコードの

girlやboyの部分をあなたの好きなワードに変えて

さらに、それらを複製して各コードを増やせば…

何人分でもオリジナルの吹き出しを

作ることができます。

やり方さえ分かってしまえば、スゴく簡単なので

もっと吹き出し機能を活用したいという場合は

ぜひチャレンジしてみてくださいね＾＾

STORKの吹き出しをカスタマイズする方法まとめ

今回はSTORKの吹き出し機能をカスタマイズする方法を

解説してみましたが、いかがでしたでしょうか？

あなたにもできそうですか？

最近でこそワードプレスのテーマも

いろいろなものが増えてきて、それぞれの良いところを

上手く取り入れているテーマも多いので

吹き出し機能が実装されているテーマも

かなり増えてはきていますが…

STORKにこの機能がついた時はかなり

「目玉の機能」だったんじゃないかな？と思います。

しかし、だからと言ってせっかくでフォルトで

ついている機能を活用しないのはもったいないし

こうしてカスタマイズすることで

オリジナリティも出せますよね…

なので、ぜひ「ここだ！」と思うところで

吹き出し機能を活用して、読者の方たちを

飽きさない、読みやすい工夫をしてくださいね。

ちなみに、わたしがなぜ今まで

吹き出し機能を使わなかったかと言うと…

単に使うタイミングがなかっただけ！（笑）

という理由に加えて、たま〜に吹き出し機能を

うれしがって乱立しているようなサイトがあり

正直、私はそういうサイトを見ると

すごく読みにくくてイラっとするので

速攻離脱するんですね…＾＾；

だから、その辺は人それぞれで捉え方が違うので

何がベストとは言えませんが…

やはり便利な機能を使うのしても

「ほどほどが一番！」（笑）

と私は思っています＾＾

いくら見た目が面白くても

読みにくければ本末転倒。

つまり、何をするにしても記事の読みやすさや

ユーザビリティ（使い勝手）が一番なので

便利な機能を使えば、もちろん

記事を書くのも楽しくなるし

良いことだと思いますが…

あくまでも、あなたの記事を読むのは

あなたではなくユーザーである読者なので

「ユーザーファースト」ということを忘れずに

吹き出し機能や、その他便利な機能を

使うようにしてくださいね＾＾

最後までお読みいただきありがとうございました！