bitcoin変動中!初めての口座開設はビットフライヤーがおすすめです

コピペ一発!SANGOの吹き出しの色を変えるカスタマイズ

だいたい 5 分で読めます。

SANGOには、吹き出しのショートコードがあります。

ヨメ

この「ふきだし」のことだよ♪

今回は、吹き出しのショートコード[say]の色を変えます。

子テーマのstyle.cssにコピペするだけで「SANGOのふきだしデザインを上書きする方法」です。

この修正を行うと、過去の記事で使っている吹き出しのショートコードにも反映されます。

つまり…今まで使ってきたSANGOの吹き出しも一気に変わる!!!

マサオカ

こんな人向け

  • ショートコードの置き換えはもうやりたくない
  • 左右の吹き出しの色をそれぞれ変えてみたい
  • 過去記事まで全ての吹き出しを一気に変えたい

それでは、完成図はコチラ!!

 

今回は、サンプルとしてTwitter風とLINE風を用意しました。

カラーコードを置き換えれば、自分の好きな色に変更して使うこともできます。

吹き出しの色を選ぶ

Twitter風ふきだし


Twitter風(左).css
/*--------------------------------------
  ふきだしの色を変える(←左)
--------------------------------------*/
.sc {
 border: solid 2px #d5d5d5;/*外枠の線の色*/
 background: #00aced  ;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.sc:before {
 border: 12px solid transparent;
 border-right: 12px solid #d5d5d5;/*ふきだしの線の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
border-right: 12px solid #00aced;/*ふきだしの中の色*/
content: "";
}
Twitter風(右).css
/*--------------------------------------
  ふきだしの色を変える(右→)
--------------------------------------*/
.right .sc {
 background: #00aced ;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #d5d5d5;/*ふきだしの線の色*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #00aced ;/*ふきだしの中の色*/
}

LINE風ふきだし

コード
/*--------------------------------------
  チャットの色を変える(←左)
--------------------------------------*/
.sc {
 border: solid 2px #d5d5d5;/*外枠の線の色*/
 background: #5ae628;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.sc:before {
 border: 12px solid transparent;
 border-right: 12px solid #d5d5d5;/*ふきだしの線の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
border-right: 12px solid #5ae628;/*ふきだしの中の色*/
content: "";
}
LINE風(右)
/*--------------------------------------
  ふきだしの色を変える(右→)
--------------------------------------*/
.right .sc {
 background: #5ae628 ;/*ふきだしの中の色*/
  color: #000000;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #d5d5d5;/*ふきだしの線の色*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #5ae628 ;/*ふきだしの中の色*/
}

オリジナルカラーの作り方

ふきだしに使っている色は3色。

  • ふきだしの線の色
  • ふきだしの中の色
  • 文字の色

この3つの色を変更するだけです。下のコードの、赤字の6桁のカラーコードを変更するだけで、ふきだしの色が変わります。

左のサンプル


左のふきだし
/*--------------------------------------
  ふきだしの色を変える(←左)
--------------------------------------*/
.sc {
 border: solid 2px #d5d5d5;/*ふきだしの線の色*/
 background: #F9B36B;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.sc:before {
 border: 12px solid transparent;
 border-right: 12px solid #d5d5d5;/*ふきだしの線の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
border-right: 12px solid #F9B36B;/*ふきだしの中の色*/
content: "";
}

右のサンプル

右のふきだし
/*--------------------------------------
  ふきだしの色を変える(右→)
--------------------------------------*/
.right .sc {
 background: #D8EDFF ;/*ふきだしの中の色*/
  color: #000000;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #d5d5d5;/*ふきだしの線の色*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #D8EDFF ;/*ふきだしの中の色*/
}

ふきだしをコピペする

ふきだしの色さえ決まれば、コピーしたコードをSANGO子テーマのスタイルシートに貼り付けるだけでOKです。

ショートコードを普通に使えば色が変わります。解説していきます。

子テーマで編集する

今回も、安全を考慮して子テーマを使って修正していきます。

SANGOの子テーマインストール方法は「WordPressで子テーマを活用して安全にカスタマイズを行う方法」を参考にしてください。

コピペする場所

スタイルCSSを変更するだけなので、一番簡単なWordpressの管理画面からの修正方法を案内します。

WordPress管理画面外観テーマの編集スタイルシート(style.css)

から行います。

 

確認する

ショートコードを使ってふきだしを入力して見ましょう。色が変化しましたね。

左右を同じ色にしても、きれいですよ。

さいごに

CSSをコピペするだけのカスタマイズでした。

めんどくさがりなので、こういうカスタマイズになりがちですがお許しください。

テーマカラーに合わせてもきれいだと思います

マサオカ

コメントを残す