Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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

contents

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

笑顔な助手

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前回厳選10個記事のなかで紹介したChromeの拡張アプリの中に

「CSS Peeper」ていうヤツあったの覚えてますか?

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

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

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

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

では実際の作業

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

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

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

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

笑顔な助手

変更前よ

管理人

変更後だぜ

管理人

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


STEP
まずGoogleFONTを持ってくる宣言しなければ・・
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

上記のHTMLをコピって

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

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

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

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

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

無視してください。

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

得意げな助手

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


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}

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

各行の意味

  1. タイトル部分に Quicksand か Noto sans
    もしも両方ダメだったらsans-serifならなんでもいいから表示
  2. 文字の感覚を2px広げてゆったり間だせ
  3. 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 見たいな表記も受け付けるよ。

笑顔な助手

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents