WordPress Sydney(シドニー) でフォントを変更してスライダーのタイトルに反映させる | そう備忘録

WordPress Sydney(シドニー) でフォントを変更してスライダーのタイトルに反映させる

日本語フォントの変更

WordPressのテーマ、Sydney(シドニー)で日本語のフォントを変更した時の備忘録。

海外製のテーマは日本語のフォントが指定できなかったり、また指定しても反映されない領域があったりする。

シドニーでも本文のフォントは変わるのだがスライダーのタイトルや行動喚起ボタンのフォントがCSSで指定をしないと変更できなかったので、その時の事を記事にしておく。

シドニーでCSSで指定をしないとフォントが変更できない領域

今回はGoogleのWEBフォントに変更したがフリーのフォントを使用したい時はこちらの記事を参照してほしい。

WEBフォント

フォントをGoogle Fonts + 日本語から選択する。

元のフォントとの違いが分かるように”はんなり明朝”に変更してみる。

Google WEBフォントからはんなりを選択する

手順

主な手順は以下の通り。

  1. 選択したフォントのHTML部分をコピーする
  2. header.phpにてWebフォントを読み込む設定をする
  3. style.cssでフォントを指定する

HTMLのコピー

”はんなり明朝”のHTML部分をコピーする。

HTML部分のコピー

header.phpの変更

header.phpを変更する。

子テーマを使用している場合は親テーマとはディレクトリを別にしているので親テーマのheader.phpを子テーマのディレクトリにコピーした後、編集する。

手順

  1. 子テーマのディレクトリに移動する
  2. 親テーマのheader.phpを子テーマにコピーする
  3. 権限をwww-dataに変更する
  4. 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

HTML部分を追記したheader.php

尚、流れでheader.phpをコピーした後、viエディターで編集をしたがWordPressのメニューから外観、テーマエディターで子テーマのテーマヘッダー(header.php)を呼び出して修正、「ファイルを更新」しても良い。

WordPressの外観、テーマエディターからの変更

style.cssでフォントの指定

先程のメニューからスタイルシート(style.css)を選択するか、WordPressのメニューから外観、カスタマイズ、追加CSSにて下記を追加する。

2020年4月2日 追記

ヘッダースライダーのタイトルのフォントの指定方法を変更した。

/* 本文 */
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";}

追加CSS

フォントが”はんなり明朝”に変更された。

はんなり明朝に変更された

以上でシドニーでの日本語フォントの変更についての記事を終了する。

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

9件のフィードバック

  1. こむぎこ より:

    参考にさせていただいております!
    header.phpを子テーマにコピーしましたが、「権限をwww-dataに変更する」の手順がわかりません
    教えていただければ幸いです

    • souichirou より:

      こむぎこ さん
      コメントありがとうございます。
      権限の変更は記事中の下記のコマンドで行っています。

      sudo chown www-data:www-data header.php

      WordPressのサーバーにターミナルでログインをして上記のコマンドを実行して権限を変更しています。
      ただwww-dataはUbuntu OSがWEBサーバー(Apache、nginxなど)の操作に使用するユーザーですので、環境がUbuntuでない場合は別のユーザ名になります。

  2. yukaz より:

    コメント失礼します。
    Sydneyでホームページを作成したのですが、メニューバーのテキストの文字色が変更できなくて困っています。
    メニューテキストのカラーを変更しても、検索の虫眼鏡マークのみしか変わらない状態です。
    突然のコメント申し訳ございません。もしよろしければお助けいただけますと幸いです。

    • yukaz より:

      先ほど解決する事が出来ました!
      メニュー項目の設定がうまくできていなかった為でした。
      お騒がせしてしまい申し訳ございませんでした。失礼しました。
      コメントの方は削除していただいて結構です。
      ありがとうございました。

  3. fun より:

    いつも参考にさせて頂いております。

    Sydneyでサイト制作をしており、スライダーテキストのフォントや大きさなどを変えたくて、こちらの記事に辿りつきました。
    上記の手順でやってみたのですが、上手く出来ずに困っております…
    テーマがアップグレードされたからなのか、権限の変更が分からず飛ばしているからなのか…
    一瞬だけフォントが変わったのですが、リロードしたら元に戻ってしまいました。

    何か原因なのかさっぱりで、お力にお貸し下さい!!
    よろしくお願い致します。

    • souichirou より:

      funさん
      キャッシュが残っている可能性はありませんか?
      Windowsの場合ですが、Ctrl+F5で強制キャッシュクリアされます。

      • fun より:

        返信頂きありがとうございます。

        解決しました!
        フォントをM PLUS Rounded 1cにしたかったのですが、M +PLUS+Rounded+1cにしてしまったことが原因だったようです。
        キャッシュクリアした後に、もしかしたら思いやってみたら出来ました!
        初歩的なミスです…
        お騒がせしました。

        ありがとうございました!!

yukaz へ返信する コメントをキャンセル

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。