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ディレクトリに作成している前提
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にて下記を追加する。
ヘッダースライダーのタイトルのフォントの指定方法を変更した。
/* 本文 */
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";}
フォントが”はんなり明朝”に変更された。
以上でシドニーでの日本語フォントの変更についての記事を終了する。
最近のコメント