ワードプレス有料テーマ サンゴでふきだしの色を複数設定する方法:SANGO+PORIPUカスタマイズ

ワードプレスの有料テーマ、サンゴと子テーマポリプを使っています。
サンゴではショートコードで簡単に吹き出しを利用できるようになっており、子テーマポリプを入れると外観→カスタマイズから左右の吹き出しの色も変更できるようになっています。

吹き出しの色を複数使いたい!サンゴで別の色のふきだしを追加する方法

ショートコードで行う方法

ショートコードで追加するならこちらがオススメ!

スミレ

私も事前に知っていたらこの方法にしたのにな〜

私が行なった、会話風ふきだしのカラー追加方法(CSS+タグだけの簡易設定)

注意
この方法はCSSを追加+AddQuicktagにショートコードでは無く直接タグを入れてそのまま呼び出して使うと言う、あまり美しくない方法です。
エディタ上もショートコードで短くスッキリしたい!と言う方は上記のショートコードを使う方法で行なってくださいね

まず、左右のふきだしの色は、子テーマポリプを入れると、外観→カスタマイズから吹き出しの色が自由に変更できるようになっています。
これで左右の吹き出し2色は色を設定できます。

スミレ

この左側からのふきだしと、
この右側からのふきだしは、子テーマポリプでダッシュボードから設定しているよ。めっちゃ簡単に設定できるようになってて感動!

夫 アオ

完成形はこんな感じ

アイコンの服の色に合わせて会話風ふきだしの色を変えてみたよ!

長男 ソラ

末っ子娘 モモ

このブログでは、方向は固定で使っているよ。
左右それぞれ用意したい場合は、その分AddQuicktagに登録するよ

次男 ダイ

作業その1:CSSを追加する(欲しい色の色指定を用意する)

外観→カスタマイズ→一番下の「追加CSS」に下記を追加しました。
※下記はこのブログで使用している例です。こども3人分で3色用意しました。色はご自身のブログに合わせて変更してくださいね。

MEMO
「.sora」「.dai」「.momo」と書いてある部分は、class名と言います。このブログではこども1人1人の名前をclass名にしています。
ここは、半角英数字でそれぞれ好きなclass名をつけてください。
例) 「.fukidashi01」「.fukidashi02」「.fukidashi03」など
色は#以下のコードで指定します。増やしたい数の分だけ下記のコードをclass名を変えて登録してください
コード
/*--------------------------------------
  長男ソラのふきだし 水色
--------------------------------------*/
 .sora {
    background: #93dee2 !important;
    border: solid 2px #92dee2 !important;
    color: #333 !important;
}
.sora:before,.sora:after {
    border-left-color: #92dee2 !important;
}
/*--------------------------------------
  次男ダイのふきだし 黄色
--------------------------------------*/
.dai {
    background: #ffe97b !important;
    border: solid 2px #ffe97b !important;
    color: #333 !important;
}
.dai:before,.dai:after {
    border-left-color: #ffe97b !important;
}
/*--------------------------------------
  末っ子娘モモのふきだし ピンク
--------------------------------------*/
.momo {
    background: #ffd3c9 !important;
    border: solid 2px #ffd3c9 !important;
    color: #333;
}
.momo:before,.momo:after {
    border-right-color: #ffd3c9 !important;
}

3色追加したい場合は、このコードのクラス名を変えたものを3つ用意して、追加します。

作業その2:AddQuicktagにコードを追加する

スミレ

AddQuicktagに下記のコードを追加しておけば、記事を書くときに呼び出して使えるよ。作業1のCSSでつけた「class名」を指定してね

下記は私のブログの場合なので、class名は「sora」「dai」「momo」とそれぞれこどもの名前になっています。ここは自分で指定したclass名に変えてくださいね。

コード
<!-- 長男ソラのふきだし 左側から -->
<div class="say right">
<div class="chatting"><div class="sc sora">ここに文</div></div>
<p class="faceicon"><img src="画像のURL"><span>長男 ソラ</span></p>
</div>

<!-- 次男ダイのふきだし 左側から -->
<div class="say right">
<div class="chatting"><div class="sc dai">ここに文</div></div>
<p class="faceicon"><img src="画像のURL"><span>次男 ダイ</span></p>
</div>

<!-- 末っ子娘モモのふきだし 右側から -->
<div class="say left">
<p class="faceicon"><img src="画像のURL"><span>末っ子娘 モモ</span></p>
<div class="chatting"><div class="sc momo">ここに文</div></div>
</div>

長男ダイのふきだしをAddQuicktagに登録、次男ダイのふきだしをAddQuicktagに登録…と地道に作業します。

私はこんな感じで、人物によってふきだしの方向は固定にして、1人につき5パターンの表情を登録しています。

MEMO
反対向きの吹き出しが欲しい場合は、その分追加で登録してください。
ふきだしの向きは、各ふきだしの1行目div class="say left"の[left][right]で指定できます。

注意!ビジュアルエディタの自動整形がオンの場合、spanが自動で消えて名前テキストのCSSが効かずに表示される場合があります


正しい表示

名前のテキストが大きい文字で表示されてしまう!😱

これは、ビジュアルエディタの自動整形でspanタグが消えてしまい、名前の部分に当たるはずのCSSが効かないために起こっています。

MEMO
外観→カスタマイズ→詳細設定で「自動整形をオフに(ビジュアルエディタ含む)」にチェックを入れておくと、この不具合は起こりません。

注意
ここにチェックを入れると、今までの記事を自動整形を使って書いていた場合に、それらが崩れてしまう可能性がありますのでご注意ください。
名前テキストの文字が少し大きくても気にしない、と言う方はそのままチェックを入れずに置いておいてください。

さいごに

若干無理やりな方法ですが、SANGOディフォルトのふきだしを使って色を変えたものを用意することができました。

末っ子娘 モモ

PORIPUで5色くらいダッシュボードから変えられるようになったらいいなぁ〜


ひとまずこのブログは、この方法で設定して使ってみてます!