SWELLのFONTや色を変更できない部分を変更する方法
まずはサイドバーの変更できないFONTとかサイズを変えてみる
みなさんSWELLしてますかー?
SWELLは超簡単に操作できる。
拡張性が無いなんて意見もありますけど
日頃の操作を簡単に直感的にできる仕様にすると
必然的にそうなりますね。
なんか考え方がAppleぽいですがそれはそれでいいと思うのです。
マニアックな拡張性より生産性を上げる仕様が
一般受けするまさにAndroidとiPhoneみたいw
で 本題に戻りますが サイドバーのたとえばカレンダーとか
アーカイブとかのタイトルって
FONT変えたりサイズ変えたりできませんよね。
まぁこれはCSSの然るべきセレクタのプロパティに
値をぶち込んでやれば良いわけですが
んじゃどのセレクタ触りゃ良いんじゃいって話になります。
「CSS Peeper」というChrome拡張機能。
これ使うとCSSのセレクタ名とかプロパティの中身を
画面の要素ごとに確認できる便利TOOLなんです。
そいつで調べて必要な手続きをしてやれば
自由に変更できるものも多いってことですね!
では実際の作業
んでサイドバー上あるタイトルはちとオリジナルのままだと
無骨な感じもしますので Google WEB Font の
Quicksand あたりでおしゃれ感だしてみましょう。
どんな感じのFONT? こんな感じ
変更前よ
変更後だぜ
CSSpeeperでセレクタ調べたりはやってみたい人はやってみてください。
この記事は結果のみ共有する目的で書いてますので調べ方の説明は省きます。
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
上記のHTMLをコピって
WordPress設定画面で 外観 ー> カスタマイズ ー>高度な設定
を 選択して開いてください。
上の欄の 「headタグ終了直前に出力するコード」
という項目あるのでそこに 上記を貼り付けてください。
下記のサンプル画像は1行目に別の宣言の末尾が見えてますが
無視してください。
特に何も追加されてなければここは空白のはずです。
貼り付けたら 右上の公開済みを忘れずに。
GoogleFONTの読み込みは上記の宣言で完了しているので
次は然るべきセレクタにデーターを入れていきます。
データーを入れる場所は 外観 ー> カスタマイズ ー> 追加CSS です。
.c-widget__title.-side{font-family:'Quicksand', "Noto Sans Japanese", sans-serif} .c-widget__title.-side{LETTER-SPACING:2px} .c-widget__title.-side{FONT-SIZE:20px}
わかりやすいように3行に分けて同じセレクタに各プロパティの値を入れてます。
各行の意味
- タイトル部分に Quicksand か Noto sans
もしも両方ダメだったらsans-serifならなんでもいいから表示 - 文字の感覚を2px広げてゆったり間だせ
- FONTの大きさを20pxにしておしゃれ感だせ
上記の値は自分の好みで数値を変えれば良いと思います。私と同じでよければそのままで。
上記をコピペして 外観 ー> カスタマイズ ー> 追加CSS に貼り付け
以下のような感じ。 ここも何か追加していなければ空白のはずです。書いてあるなら追記で。
これも描き終わったら必ず 公開済み 忘れないように。
作業は以上です。
簡単でしょ?
CSSpeeperでセレクタ調べ上げて色んな変更してみるのも楽しいよw
2022/2/28 追記
フッター1、2、3にウィジェットでアーカイブとかタグとか入れた場合は
.c-widget__title.-side,.c-widget__title.-footer{font-family:'Quicksand', "Noto Sans Japanese", sans-serif} .c-widget__title.-side,.c-widget__title.-footer{LETTER-SPACING:2px} .c-widget__title.-side,.c-widget__title.-footer{FONT-SIZE:20px}
これでどちらでもいけます。
WEB FONTは遅くなるから嫌だという人はこれ試してみて↓
ボタンの色も変えてみよう
同じ要領で 追加CSSの項目に
.p-adBox__btn.-btn1{background:色コード}
.p-adBox__btn.-btn2{background:色コード}
2種類のボタンがあるのでそのどちらも色変更できる。
これを追加してやると任意の色で本来なら変更できない(青色固定)
↓にあるような 「広告タグ」で作成したアフィ用のボタンの色を
任意に変更できる。
サンプル
本来の青色固定ボタンサンプル(画像)
↓こうなる
サンプルここまで
ここを任意の色に変えたい場合は上記を使うと良いよ 色コードは #FF0000 みたいな感じの表記と blue とか red 見たいな表記も受け付けるよ。
読んでくれてありがと またね!