STORK(ストーク)に Web フォントを適用してテキストの見た目をカスタマイズ

WordPress の有料テンプレートテーマ中でも利用ユーザが多いSTORK(ストーク)ですが、デフォルトの游ゴシック体からこのブログでも利用している Google Noto Fonts という Web フォントを適用するカスタマイズをご紹介します。

Google Noto Fonts はオープンソースで利用できます。Google によって開発されたフォントなので信頼と安心感があっておすすめです。

子テーマでカスタマイズ

WordPress の適用テーマをカスタマイズする際の推奨カスタマイズ方法の子テーマをまずはダウンロードしましょう。

STORK(ストーク)の子テーマは下記公式サイトからダウンロードできます。
https://open-cage.com/purchase-flow/child-theme-download/

なお、STORK(ストーク)本体テーマは公式販売サイトOPENCAGE(オープンケージ)から購入できます。本体テーマ自体はもちろん事前にテーマフォルダにアップロードしておく必要があります。

例えば /var/www/html/wordpress/wp-contents/theme/ のような場合に wp-contents/theme/ 以下に本体のテーマと子テーマの jstork_custom フォルダをアップロードします。

アップロードした後に管理画面から外観→テーマから子テーマを有効にします。下記の画像のようになると思います。

STORK(ストーク)に Web フォントを適用してテキストの見た目をカスタマイズ

外観→テーマの状態

本体テーマから header.php を子テーマにそのままコピー&ペースト

jstork フォルダの中の header.php をコピーして jsotrk_custom の中に置いて下さい。そうすると子テーマフォルダの中身は下記の構成になると思います。

  • functions.php
  • style.css
  • yarpp-template-relative.php
  • header.php (これが複製されたファイル)

Google Noto Fonts を読み込む

管理画面の「外観→テーマの編集」から header.php を選択します。

stork_custom: テーマヘッダー (header.php) というコードが書かれた表示になりますので、そこから読み込む設定を追記します。
上のほうに下記のコードがあります。

<?php get_template_part( 'head' ); ?>

ここの上に読み込むソースを入れ込みます。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css" rel="stylesheet" type="text/css">
<?php get_template_part( 'head' ); ?>

これで Google Noto Fonts を読み込む事ができました!

Noto フォントをCSSファイルに記載する

読み込むだけではまだ適用されません。

今度は子テーマの style.css を選んで下記を追記します。

body {
font-family: Noto Sans JP, sans-serif;
}

これで完了です!表示してフォントが適用されているかどうか確認してみてください。

ファイルを更新ボタンがでない場合は?

テーマの編集画面にいってみたものの、ファイルを更新ボタンが表示されず保存出来ない場合はアップロードした子テーマ内のファイルに書き込む権限がない状態です。

ファイルを書き込めるように各レンタルサーバ等のマニュアルに従ってファイルの書き込み権限を追加してください。

STORK(ストーク)テーマおすすめです!

このブログでも利用しているSTORK(ストーク)テーマですが、既にデザインやコードがとても良い感じになっているのですぐに使えます。スマホでの見た目も問題ないので公式テーマで物足りない人にはおすすめ出来るテーマの一つです。

また今回ご紹介したフォントを別で適用したりするとがらっと変える事が出来ますので、カスタマイズもしやすく自分色もだしやすいテーマだと思います。

WordPressテーマ「ストーク」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です