SWELLのFONTや色を変更できない部分を変更する方法

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

まずはサイドバーの変更できないFONTとかサイズを変えてみる

笑顔な助手

みなさんSWELLしてますかー？

SWELLは超簡単に操作できる。

拡張性が無いなんて意見もありますけど

日頃の操作を簡単に直感的にできる仕様にすると

必然的にそうなりますね。

なんか考え方がAppleぽいですがそれはそれでいいと思うのです。

マニアックな拡張性より生産性を上げる仕様が

一般受けするまさにAndroidとiPhoneみたいｗ

で 本題に戻りますが サイドバーのたとえばカレンダーとか

アーカイブとかのタイトルって

FONT変えたりサイズ変えたりできませんよね。

まぁこれはCSSの然るべきセレクタのプロパティに

値をぶち込んでやれば良いわけですが

んじゃどのセレクタ触りゃ良いんじゃいって話になります。

「CSS Peeper」というChrome拡張機能。

これ使うとCSSのセレクタ名とかプロパティの中身を

画面の要素ごとに確認できる便利TOOLなんです。

そいつで調べて必要な手続きをしてやれば

自由に変更できるものも多いってことですね！

では実際の作業

んでサイドバー上あるタイトルはちとオリジナルのままだと

無骨な感じもしますので Google WEB Font の

Quicksand あたりでおしゃれ感だしてみましょう。

どんな感じのFONT？ こんな感じ

笑顔な助手

変更前よ

管理人

変更後だぜ

管理人

CSSpeeperでセレクタ調べたりはやってみたい人はやってみてください。
この記事は結果のみ共有する目的で書いてますので調べ方の説明は省きます。

STEP

まずGoogleFONTを持ってくる宣言しなければ・・

<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

上記のHTMLをコピって

WordPress設定画面で 外観 ー＞ カスタマイズ ー＞高度な設定

を 選択して開いてください。

上の欄の 「headタグ終了直前に出力するコード」

という項目あるのでそこに 上記を貼り付けてください。

下記のサンプル画像は１行目に別の宣言の末尾が見えてますが

無視してください。

特に何も追加されてなければここは空白のはずです。

得意げな助手

貼り付けたら 右上の公開済みを忘れずに。

STEP

次にセレクタ指定してプロパティ改変する

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}

わかりやすいように３行に分けて同じセレクタに各プロパティの値を入れてます。

各行の意味

1. タイトル部分に Quicksand か Noto sans
   もしも両方ダメだったらsans-serifならなんでもいいから表示
2. 文字の感覚を2px広げてゆったり間だせ
3. FONTの大きさを20pxにしておしゃれ感だせ

管理人

上記の値は自分の好みで数値を変えれば良いと思います。私と同じでよければそのままで。

上記をコピペして 外観 ー＞ カスタマイズ ー＞ 追加CSS に貼り付け

以下のような感じ。 ここも何か追加していなければ空白のはずです。書いてあるなら追記で。

笑顔な助手

これも描き終わったら必ず 公開済み 忘れないように。

作業は以上です。

得意げな助手

簡単でしょ？

管理人

CSSpeeperでセレクタ調べ上げて色んな変更してみるのも楽しいよｗ

2022/2/28 追記

フッター１、２、３にウィジェットでアーカイブとかタグとか入れた場合は

.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は遅くなるから嫌だという人はこれ試してみて↓

あわせて読みたい

SWELLで 最新版 Font Awesomeや GoogleFontを 高速に使う方法 【最新版Font AwesomeやgoogleフォントをWordPress ローカルで 高速に読み出す。】 Blogでも普通にHTML書いてもやはりかっこいいアイコンは使いたい。 私のBLOGもアイコ…

ボタンの色も変えてみよう

同じ要領で 追加CSSの項目に

.p-adBox__btn.-btn1{background:色コード}

.p-adBox__btn.-btn2{background:色コード}

２種類のボタンがあるのでそのどちらも色変更できる。

これを追加してやると任意の色で本来なら変更できない(青色固定)

↓にあるような 「広告タグ」で作成したアフィ用のボタンの色を

任意に変更できる。

サンプル

本来の青色固定ボタンサンプル（画像）

↓こうなる

サンプルここまで

ここを任意の色に変えたい場合は上記を使うと良いよ 色コードは #FF0000 みたいな感じの表記と blue とか red 見たいな表記も受け付けるよ。

笑顔な助手

読んでくれてありがと またね！