【2020年版】SANGOで吹き出しの色をカスタマイズする方法

SANGO吹き出し

みなさん、こんにちは!

あぶそ(@absorb123)です。

 

今回はWordPressの有料テーマであるSANGOで吹き出しの色をカスタマイズ(変更する)方法について解説していきます。

 

ブロガー

SANGOをインストールしたけど、吹き出しの色が自分のテーマと合っていないんだよな。。
吹き出しの色は簡単に変更できるよ!!

あぶそ

ブロガー

でもカスタマイズを失敗したら自分のブログが壊れるって聞いたんで、怖くてできません!

 

こんな心配ありませんか?!

 

大丈夫です!!

 

このブログもSANGOを使っていますが、今回紹介する手順で簡単に吹き出しの色を変えることができました。

 

また、今回はカスタマイズする前のバックアップ手順から解説しますので、初心者ブロガーさんでも安全に吹き出しの色を変更することができます。

 

・SANGOで吹き出しの色を変えたい

 

・カスタマイズするのは怖い

こんな方に向けての記事になります。

 

※この記事はSANGOの公認子テーマであるPORIPUを使っていない人に向けた手順となっています。

SANGOで吹き出しのカスタマイズを行うための事前準備

カスタマイズを行うときは必ず子テーマで!

今回の吹き出しのカスタマイズではSANGOテーマのスタイルシートを修正します。

その場合に親テーマのスタイルシートを直接修正するのではなく、必ず子テーマのスタイルシートを修正するようにしてください。

※親テーマを直接修正すると、万が一、修正箇所に誤りがある場合にサイトの復旧が難しくなる場合があります。

 

最初のうちは、カスタマイズする場合には子テーマでという理解で問題ありません。

 

それでは具体的な手順を見ていきましょう。

STEP.1
テーマエディターの編集
ダッシュボードメニューから[外観]ー[テーマエディター]を選択します。

STEP.2
SANGOの子テーマ編集
編集するテーマでSANGO childを選択し、スタイルシート(style.css)を選択します。

ここで選択したスタイルシート(style.css)を修正することで吹き出しの色を変更することが可能となります。

 

カスタマイズを行う前にはバックアップをとろう!

初心者ブロガー

よし、じゃあ早速カスタマイズを..
ちょっと待って!

カスタマイズする前は必ずバックアップを取っておこう!

あぶそ

初心者ブロガー

え?!バックアップって必要なの?

 

ブログにおいて、テーマやスタイルシートを修正することは非常にリスクが高いです。

万が一、その途中に問題が発生したり修正内容が間違っていた場合、ブログのレイアウト表示が崩れてしまったり、最悪ブログが閲覧できなくなってしまうということが発生します。

 

そんなときでもバックアップを取っていれば、修正前の状態に戻すことができます。

 

バックアップを取っておく方法として、

・style.cssファイルを直接退避する方法

 

・style.cssの中身をテキストファイルに保存しておく方法

の2種類があります。

 

今回はより簡単である中身をテキストファイルで保存する手順を解説します。

STEP.1
CSS本文の選択
スタイルシートを選択した状態で[ctrlキー]+[A]を押下します。

STEP.2
CSS本文のコピー
[ctrlキー]+[C]を押下し、スタイルシートの全文をコピーします。
STEP.3
エディターへ貼り付け
お好みのテキストエディタ―を開き、[ctrlキー]+[v]を押下し貼り付けます。

STEP.4
テキストファイルの保存
コピペしたCSSファイルの内容を任意のテキストファイル名で保存しておきます。

 

ここまでこれば準備万端です。実際の変更コードは次の手順から確認していきましょう!

 

※さらにバックアップの詳細を知りたい場合は以下の記事を参照ください。

SANGOBACKUP【2020年版】SANGOでカスタマイズする前のバックアップ手順

SANGOで吹き出しの色を変えるための方法

 

吹き出しの色を変えるコードとは

以下の内容をコピーしてスタイルシートの末尾に貼り付けてください。

※ここから先は、必ず自己責任で実施お願いします。

吹き出し変更
/*--------------------------------------
  ふきだしの色を変える(←左)
--------------------------------------*/
.sc {
 background: #e2efff;/*ふきだしの中の色*/
 border-color: #e2efff;/*ふきだしの線の色(ここを消すと外枠が灰色に)*/
 color: #000000;/*文字の色*/
}
.sc:before,
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
 border-right: 12px solid #e2efff;/*ふきだしの線の色(三角部分)*/
 content: "";
}
.sc:after {
 left: -20px;
 border-right-color: #e2efff;/*ふきだしの中の色(三角部分)*/
}
/*--------------------------------------
  ふきだしの色を変える(右→)
--------------------------------------*/
.right .sc {
 background: #e2efff ;/*ふきだしの中の色*/
 border-color: #e2efff;/*ふきだしの線の色(ここを消すと外枠が灰色に)*/
 color: #000000;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #e2efff;/*ふきだしの線の色(三角部分)*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #e2efff ;/*ふきだしの中の色(三角部分)*/
}

上記の内容をスタイルシートに貼り付けた後は、必ず「ファイル更新」を押下して修正内容を更新してください。

あぶそ

この状態で吹き出しを確認するとすでに色が変わっているよ!

#e2efffのカラーコードはこの吹き出しと同じ色だよ!

任意の色に変更するには

前述のコードをコピペすることで、吹き出しの色は”#e2efff”というコードに割り当てられた色で塗りつぶしされます。

これを任意の色に変更する場合は、

/*ふきだしの中の色*/

 

/*ふきだしの線の色(ここを消すと外枠が灰色に)*/

 

/*ふきだしの線の色(三角部分)*/

 

/*ふきだしの中の色(三角部分)*/

で設定されている4か所の色を変更してください。

 

4か所すべて同じコードで設定した場合、吹き出しの枠線が無い状態となり、

“ふきだしの線の色”部分だけ色を分けて設定した場合、吹き出しの枠線の色と吹き出しの中の色を分けて設定することが可能です。

 

おすすめのカラーコード

私がオススメするSANGOの雰囲気に合いそうなおすすめの色は以下の通りです。

皆さんも様々な色を設定してみて、自分のサイトにあった色を見つけてください。

オススメ1
赤系
#fed2e7

オススメ2
黄系
#fefcd2

オススメ3
緑系
#d2fef2

オススメ4
青系
#d2e2fe

いかがでしたでしょうか?

今回の記事は初心者の方でも簡単に吹き出しの色を変えられるようにと作成した手順となります。皆さんのブログライフの役に立てば幸いです。

このほかにもSANGOユーザにオススメのカスタマイズもまとめていますので、もし興味があればそちらもご参照ください。

【2019年版】WordPress有料テーマのSANGOで初心者が実施したカスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です