WordPress Sydney（シドニー） でフォントを変更してスライダーのタイトルに反映させる
日本語フォントの変更
WordPressのテーマ、Sydney（シドニー）で日本語のフォントを変更した時の備忘録。
海外製のテーマは日本語のフォントが指定できなかったり、また指定しても反映されない領域があったりする。
シドニーでも本文のフォントは変わるのだがスライダーのタイトルや行動喚起ボタンのフォントがCSSで指定をしないと変更できなかったので、その時の事を記事にしておく。
今回はGoogleのWEBフォントに変更したがフリーのフォントを使用したい時はこちらの記事を参照してほしい。
WEBフォント
フォントをGoogle Fonts + 日本語から選択する。
元のフォントとの違いが分かるように”はんなり明朝”に変更してみる。
手順
主な手順は以下の通り。
- 選択したフォントのHTML部分をコピーする
- header.phpにてWebフォントを読み込む設定をする
- style.cssでフォントを指定する
HTMLのコピー
”はんなり明朝”のHTML部分をコピーする。
header.phpの変更
header.phpを変更する。
子テーマを使用している場合は親テーマとはディレクトリを別にしているので親テーマのheader.phpを子テーマのディレクトリにコピーした後、編集する。
手順
- 子テーマのディレクトリに移動する
- 親テーマのheader.phpを子テーマにコピーする
- 権限をwww-dataに変更する
- header.phpに先程コピーしたHTML部分を追記する
※子テーマをsydney-childディレクトリに作成している前提
|
1 2 3 4 |
cd /var/www/wordpress/wp-content/themes/sydney-child sudo cp ./../sydney/header.php ./ sudo chown www-data:www-data header.php sudo vi header.php |
HTML部分を追記したheader.php
尚、流れでheader.phpをコピーした後、viエディターで編集をしたがWordPressのメニューから外観、テーマエディターで子テーマのテーマヘッダー（header.php）を呼び出して修正、「ファイルを更新」しても良い。
style.cssでフォントの指定
先程のメニューからスタイルシート（style.css）を選択するか、WordPressのメニューから外観、カスタマイズ、追加CSSにて下記を追加する。
2020年4月2日 追記
ヘッダースライダーのタイトルのフォントの指定方法を変更した。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 本文 */ body { font-family: "Hannari"; } /* ヘッダースライダーのタイトル */ .text-slider .maintitle { font-family: "Hannari"; font-size : 40px; } /* 行動喚起ボタン */ a.roll-button.button-slider { font-family: "Hannari"; } /* メニュー */ #mainnav ul li a { font-family: "Hannari";} |
フォントが”はんなり明朝”に変更された。
以上でシドニーでの日本語フォントの変更についての記事を終了する。
