WordPress Sydney(シドニー) でフォントを変更してスライダーのタイトルに反映させる
Contents
日本語フォントの変更
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ディレクトリに作成している前提
※ ubuntu OS の場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ
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";}
フォントが”はんなり明朝”に変更された。
以上でシドニーでの日本語フォントの変更についての記事を終了する。
参考にさせていただいております!
header.phpを子テーマにコピーしましたが、「権限をwww-dataに変更する」の手順がわかりません
教えていただければ幸いです
こむぎこ さん
コメントありがとうございます。
権限の変更は記事中の下記のコマンドで行っています。
WordPressのサーバーにターミナルでログインをして上記のコマンドを実行して権限を変更しています。
ただwww-dataはUbuntu OSがWEBサーバー(Apache、nginxなど)の操作に使用するユーザーですので、環境がUbuntuでない場合は別のユーザ名になります。
コメント失礼します。
Sydneyでホームページを作成したのですが、メニューバーのテキストの文字色が変更できなくて困っています。
メニューテキストのカラーを変更しても、検索の虫眼鏡マークのみしか変わらない状態です。
突然のコメント申し訳ございません。もしよろしければお助けいただけますと幸いです。
先ほど解決する事が出来ました!
メニュー項目の設定がうまくできていなかった為でした。
お騒がせしてしまい申し訳ございませんでした。失礼しました。
コメントの方は削除していただいて結構です。
ありがとうございました。
yukaz さん
無事に解決したとの事、良かったです。
わざわざ、解決の報告のコメントもありがとうございます?
いつも参考にさせて頂いております。
Sydneyでサイト制作をしており、スライダーテキストのフォントや大きさなどを変えたくて、こちらの記事に辿りつきました。
上記の手順でやってみたのですが、上手く出来ずに困っております…
テーマがアップグレードされたからなのか、権限の変更が分からず飛ばしているからなのか…
一瞬だけフォントが変わったのですが、リロードしたら元に戻ってしまいました。
何か原因なのかさっぱりで、お力にお貸し下さい!!
よろしくお願い致します。
funさん
キャッシュが残っている可能性はありませんか?
Windowsの場合ですが、Ctrl+F5で強制キャッシュクリアされます。
返信頂きありがとうございます。
解決しました!
フォントをM PLUS Rounded 1cにしたかったのですが、M +PLUS+Rounded+1cにしてしまったことが原因だったようです。
キャッシュクリアした後に、もしかしたら思いやってみたら出来ました!
初歩的なミスです…
お騒がせしました。
ありがとうございました!!
fun さん
解決したようで何よりです?