WordPress有料テーマのSangoには、文字の装飾に”ラベル”というものがあります。
例えば、赤枠の部分を強調したい場合に使います。
![編集前](https://www.orin-ya.com/wp-content/uploads/2022/01/0146c60e4fde3dff49edeb677d76a2a8.png)
書式変更(羽マーク)のプルダウンから、ラベル(メインカラー) or ラベル(アクセントカラー)を選択
![ラベル](https://www.orin-ya.com/wp-content/uploads/2022/01/fddf3e6431aa3edf42e1cf1859a60d78.png)
しかし、デフォルトでは字が小さく、白色文字なので協調が弱いですよね。
![編集後](https://www.orin-ya.com/wp-content/uploads/2022/01/9776680282215ad8b2c83d2ffed7ec64.png)
おりんパパは、個別に『文字大きめ』と『文字の色を黒』に変更していたのですが、
いよいよ めんどくさっ と なってきたので、
![おりんパパ](https://www.orin-ya.com/wp-content/uploads/2021/08/5c46a4d872709d3f2494d1e7346ea0b2.png)
くわっ
デフォルトの書式変更に踏み切りました。
~Sangoの”ラベル”書式を変更~
“ラベル”のclassやid(入れ物)を確認
① Google Cromeを使っているので、右クリック – 検証 でツールを開きます。
② “ラベル” を適用した部分のElements や Styleをチェック
![検索ツール](https://www.orin-ya.com/wp-content/uploads/2022/01/0ade41f2e33c6b72137d863b7de86464.png)
⇒ ターゲットは『sgb-label-accent-c』というclassという事がわかり、Styleを見るとfont-sizeが0.87em(×0.87倍の大きさ)になっている事が分かりました。
また、colorも白になっています。
![おりんパパ](https://www.orin-ya.com/wp-content/uploads/2021/06/4f03a044d3868beced7f0f045c2591c6.png)
では、{字の色 / 太字 / 大きさ}を変更していきます
CSSの変更
『sgb-label-accent-c』とラベル(メインカラー)の『sgb-label-main-c』に対して編集していきます。
Sangoの場合は2通りやり方があって、ダッシュボードの
外観 – カスタマイズ – 追加CSS に書き込むか
外観 – テーマファイルエディタ で sytle.css に書き込みます
追加するコードはこちら↓
.sgb-label-accent-c{
color: #000000; /*黒色*/
font-weight:bold; /*太字*/
font-size:1.2em; /*でか文字*/
}
.sgb-label-main-c{
color: #000000; /*黒色*/
font-weight:bold; /*太字*/
font-size:1.2em; /*でか文字*/
}
キャッシュをクリアする
CSSを反映させるには、プラグイン『WP Fastest Cache』などでキャッシュをクリアしておきます。
確認の為に自身でブラウザを閲覧する場合、そのブラウザのキャッシュもクリアした方がよいです。
Cromeの場合はこのようにします。
![cromeキャッシュ](https://www.orin-ya.com/wp-content/uploads/2022/01/4d1a53068cfb67ba691a8b760954e9c9.png)
そしてめでたく反映できました。
![CSS変更後](https://www.orin-ya.com/wp-content/uploads/2022/01/e18b5564e2d7f6763e23a53b35286d46.png)
これで楽になります!!
最後まで見ていただき、ありがとうございました。
広告
広告 |
広告 |