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

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

 

ここあです。

 

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

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

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

 

前回、記事を書いた時に

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

試してみました。

 

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

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

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

 

吹き出し

 

 

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

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

 

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

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

吹き出し

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

 

 

ということで、今回は…

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

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

 

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

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

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

 

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

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

 

Aさん
シンプルでいいですね…
ここあ
Facebook風もあるよ
Aさん
LINE風もある〜!

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

 

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

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

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

 

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

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

ダッシュボードメニュー

 

 

追加CSSをクリックし

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

追加CSS編集画面

 

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

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

 

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

STORKの吹き出しも

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

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

 

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

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

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

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

 

ベースはこれを使用します

[voice icon="画像のURL" name="名前" type="l girl"]シンプルな吹き出し。アイコンは左です。[/voice]

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

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

 

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

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

 

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

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

 

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

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

 

ここまでは大丈夫ですか?^^

 

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

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

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

 

枠線の色を変える場合は、以下の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コードを追加してください。

/* 吹き出し(線幅) */
.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コードを記述してください。

/* 吹き出し(枠と背景色変更) */
.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;/*背景*/
}

 

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

STORK吹き出しカスタマイズ

 

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

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

#fdeef4;/*背景*/#f29da6;/*枠線*/を好きな色に変更してください。

 

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

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

 

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

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

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

 

でないと、てんでバラバラな色になってしまいます^^;

それでもいいという場合は別ですが…(笑)

 

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

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

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

 

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

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

/* 吹き出し(文字色変更) */
.voice.girl .voicecomment{
color: #f29da6;
}

 

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

STORK吹き出しカスタマイズ

 

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

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

 

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

 

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

STORK吹き出し

 

 

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

STORK吹き出しカスタマイズ

 

どちらがお好みですか?

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

 

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

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

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

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

 

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

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

STORK吹き出し

 

 

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

[voice icon="画像のURL" name="名前" type="l girl"]シンプルな吹き出し。アイコンは左です。[/voice]

に対する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つ。

/* 吹き出し(枠線と背景色変更) */
.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;/*背景*/
}

/* 吹き出し(枠線と背景色変更) */
.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コードを使えば

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

STORK吹き出し

 

 

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

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

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

 

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

作ることができます。

 

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

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

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

 

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

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

 

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

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

単に使うタイミングがなかっただけ!(笑)

 

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

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

 

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

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

速攻離脱するんですね…^^;

 

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

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

 

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

「ほどほどが一番!」(笑)

と私は思っています^^

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。