この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
どうも、としまです
SANGOでは背景をうっすらと灰色にできる文字装飾がありますが、配色のデパートリーは現時点で一色しかありません
他にも何色か作ることができれば、表現力の幅も広がるんじゃないかな…と言う気がしたんで、背景色を増やしてみました
自分の備忘録用と、カスタマイズ初心者の方の参考になれば。と思ったんで記事にしておきます
スポンサーリンク
SANGO カスタマイズ
STEP1.文字の背景色を増やすCSSコードをコピペ
以下のCSSコードが背景色を増やすコードです。ダッシュボードの［外観］→［カスタマイズ］→［追加CSS］に貼り付けて下さい
薄いオレンジの背景色
.haikeiorengi{
background: #fff1dc;
color: rgba(0,0,0,.6);
font-size: .9em;
word-break: break-all;
border-radius: 5px;
padding: .2em .3em;
margin: 0 2px;
}仕上がりのイメージがこちら
一行目に書いてあるセレクタの.から後の部分haikeiorengiは好きなように変更して大丈夫です。今回は分かりやすいようにローマ字でハイケイオレンジとしてみました
セレクタを好きなように変更する場合、日本語はさけて英数字にしておく方がエラーの原因にならないので良いです
薄い赤色の背景色
.haikeiaka{
background: #ffece2;
color: rgba(0,0,0,.6);
font-size: .9em;
word-break: break-all;
border-radius: 5px;
padding: .2em .3em;
margin: 0 2px;
} 仕上がりのイメージがこちら
SANGO カスタマイズ
STEP2.文字をコードで挟む
<span class="haikeiorengi">背景色を変えたい文字をここへ</span>背景色を付けたい文章を上のコードで挟んであげると、以下のように実装することができます
背景色を変えたい文字をここへ
薄い赤色にしたい時はhaikeiorengiの部分をhaikeiakaに書き換えて下さい
コードはテキストエディタの方に書かないと反映されないので気をつけましょう！
背景色や文字色は自由に変更可能
以下を参考にすると分かりやすいと思います
| 背景色 | background: #fff1dc; |
| 文字色 | color: rgba(0,0,0,.6); |
| 文字の大きさ | font-size: .9em; |
| 赤枠の部分を好きなように変更して下さい | |
濃い色にすると文字が目立たなくなるので、背景色を選ぶ時には薄い色にすると良いですね
まとめ
文字の背景色を増やすCSSコードについて紹介しました。是非自分のサイトにあった背景色を見つけて、実装してみて下さいね
また今回の内容で疑問点などあれば分かる範囲でお答えします。コメント欄よりお問い合わせ下さい
今回はこれでおしまい！
スポンサーリンク
