SANGO|文字の背景色を増やしてみたよ【初心者カスタマイズ】

どうも、としまです

SANGOでは背景をうっすらと灰色にできる文字装飾がありますが、配色のデパートリーは現時点で一色しかありません

他にも何色か作ることができれば、表現力の幅も広がるんじゃないかな…と言う気がしたんで、背景色を増やしてみました

としま
としま

自分の備忘録用と、カスタマイズ初心者の方の参考になれば。と思ったんで記事にしておきます

スポンサーリンク

SANGO カスタマイズ
STEP1.文字の背景色を増やすCSSコードをコピペ

以下のCSSコードが背景色を増やすコードです。ダッシュボードの[外観]→[カスタマイズ]→[追加CSS]に貼り付けて下さい

薄いオレンジの背景色

style.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は好きなように変更して大丈夫です。今回は分かりやすいようにローマ字でハイケイオレンジとしてみました

セレクタを好きなように変更する場合、日本語はさけて英数字にしておく方がエラーの原因にならないので良いです

薄い赤色の背景色

style.css
.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.文字をコードで挟む

HTMLコード
<span class="haikeiorengi">背景色を変えたい文字をここへ</span>

背景色を付けたい文章を上のコードで挟んであげると、以下のように実装することができます

 

背景色を変えたい文字をここへ

薄い赤色にしたい時はhaikeiorengiの部分をhaikeiakaに書き換えて下さい

としま
としま

コードはテキストエディタの方に書かないと反映されないので気をつけましょう!

背景色や文字色は自由に変更可能

以下を参考にすると分かりやすいと思います

背景色background: #fff1dc;
文字色color: rgba(0,0,0,.6);
文字の大きさfont-size: .9em;
赤枠の部分を好きなように変更して下さい

濃い色にすると文字が目立たなくなるので、背景色を選ぶ時には薄い色にすると良いですね

参考 薄い色のカラーコード

まとめ

文字の背景色を増やすCSSコードについて紹介しました。是非自分のサイトにあった背景色を見つけて、実装してみて下さいね

としま
としま

また今回の内容で疑問点などあれば分かる範囲でお答えします。コメント欄よりお問い合わせ下さい

おしまい!

んじゃ

スポンサーリンク

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)