I/O Most popular TAGS
SWELLのFONTや色を変更できない部分を変更する方法
contents
まずはサイドバーの変更できないFONTとかサイズを変えてみる
笑顔な助手みなさんSWELLしてますかー？
SWELLは超簡単に操作できる。
拡張性が無いなんて意見もありますけど
日頃の操作を簡単に直感的にできる仕様にすると
必然的にそうなりますね。
なんか考え方がAppleぽいですがそれはそれでいいと思うのです。
マニアックな拡張性より生産性を上げる仕様が
一般受けするまさにAndroidとiPhoneみたいｗ
で 本題に戻りますが サイドバーのたとえばカレンダーとか
アーカイブとかのタイトルって
FONT変えたりサイズ変えたりできませんよね。
まぁこれはCSSの然るべきセレクタのプロパティに
値をぶち込んでやれば良いわけですが
んじゃどのセレクタ触りゃ良いんじゃいって話になります。
前回厳選１０個記事のなかで紹介したChromeの拡張アプリの中に
「CSS Peeper」ていうヤツあったの覚えてますか？
あわせて読みたい
入れておくと 便利になる 厳選Chrome拡張
【Chrome拡張 おすすめ１０選】 今日は僕が普段使いしているChromeの拡張機能を１０個紹介。 Blog運営するの為の必須拡張は是非おすすめ。 なお各アプリの名称はサイト…
あれ使うと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}わかりやすいように３行に分けて同じセレクタに各プロパティの値を入れてます。
各行の意味
- タイトル部分に Quicksand か Noto sans
もしも両方ダメだったらsans-serifならなんでもいいから表示 - 文字の感覚を2px広げてゆったり間だせ
- 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 見たいな表記も受け付けるよ。
笑顔な助手読んでくれてありがと またね！
SWELL – シンプルなのに、高機能 – もっと気軽に、楽しく記事を書こう。 それを可能にするWordPressテーマです。
SWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます。
このBLOGももちろんSWELL使ってますよ！
ロリポップレンタルサーバー
手軽に始めやすい220円〜 まずは10日間お試し
筆者もお世話になっているレンタルサーバー
ハイスピードプランはガチで速いっすよ。コストパフォーマンス満足度
使い続けたいレンタルサーバー
アフィリエイト、ブログで使いたいレンタルサーバー
サポート対応満足度
すべて1位
