WordPressテーマ（Luxeritas）カスタマイズ記録
By 田中(゜p゜)
もう新しい会社での勤務始まってしまってるというのに、サイトのデザインが気になってしまい、デフォルトのカスタマイズ機能に加え、CSSにも手を加え始めました。なんかもう収集着かない気がするけど。
Luxeritasテーマは前に使ってたCatch Boxに比べると遥かに動作が早く、カスタマイズ性に富んでます。
昔田中(゜p゜)は自分のサイトのHTMLもCSSもJavascriptも手で書いてたので、便利になったものだなぁ、と感動することしきりです。
備忘録も兼ねて、変更内容まとめときます。
大まかな変更ポイント
だいたい以下のような感じです。だいぶイメージ変わりました。
- サイト全体のカラーイメージを緑に変更。Androidはブラウザのヘッダーも緑に。
- フォントを丸っこく変更し、田中(゜p゜)のアレっぽさを向上。
- 見出しのスタイルを変更
- Nest/Prevウィジェットのスタイル変更
Luxeritasの外観カスタマイズ
これはWordPress管理機能だけでいけるので、詳しい手順は割愛。
・フォント変更
・背景色変更
Luxeritas Childのstyle.cssに追記
WordPressのテーマエディターからCSSを直接編集。対応する内容はコメントに追記。
比較的ライト。
Luxeritas Childのadd-headers..phpに追記
これも比較的カンタンなやつ。ヘッダのカラーを変更。ただしAndroidのみ。
PHPなのでコメントは「#」で。
Luxeritasのstyle.cssカスタマイズ
これが一番しんどかったやつ。投稿下部のNext/Prevのアイコンサイズが大きくて気になって死にそうだったんだけど、ずっと画像だと勘違いして、テーマのフォルダをあさりまくったりした。
これってフォントなんすね。こんな感じ。 →
コードはこんな感じ。
<i class=”fas fa-home fa-lg”>
いうことで、CSSの該当箇所を発見し、以下のように編集。正直、デフォルトはフォントの位置とか微妙に調整してあって、けっこう苦戦。
「#」はコメントかと思ってたけど、Luxeritasの場合はOFF/ONできるウィジェットの変数？みたいですね。
まとめ
テーマへの理解深まりました。なんかCSSとかPHPもだんだん思い出してきた気がする。今だったらやりたいことはほぼ何でもできそう。
でも、これ以上行くとHTML5とかになって、収集つかなくなるような気も。
ま、勉強だからいいか。