DiverのフォントをNoto Sans JPにカスタマイズする2つの方法

このブログでは、ワードプレスの有料テーマ「Diver」を使っていますが、デフォルトでは「遊ゴシック」というフォントになってるんですよね。

最近のブログでは色んなフォントを見かけるようになりましたが、このブログのフォントも変えたい!

というわけで、Diverカスタマイズ第1回目となる今回は、

Diverの初期フォント「遊ゴシック」を、人気のグーグルフォント「Noto Sans JP」に変更する、の巻です。

遊ゴシックはスマートで読みやすいけど…

Diverに初期設定されてたのは「遊ゴシック」。

diver初期フォント

最近ワードプレスをビジュアルエディタで書き始めた私には、見やすくてスマートなのはわかるけど、

ちょっと真面目じゃない?

いや、真面目というよりスマートか。

万人受けするきちっとした読みやすさ。

仕事もプライベートも、そつなくこなすエリートマン風(さらにイケメン)。

 

悪くないよ、ちっとも悪くなんかない。

でももう少しだけ、親しみやすさが欲しい!

人気のグーグルフォント【Noto Sans JP】とは?

web上で表示されるフォントには様々な種類が溢れてるけれど、フリーフォントだとデバイスによっては表示されなかったりすることも。

そこで、色んなサイトで見かけるようになったwebフォント【Noto Sans JP】に変更することにしました。

Noto Sans Jpの見本
引用:Google Fonts + Japanese

Noto Sans JP】は、googleとAdobeが共同で開発したフォントで、他にも色んな種類があるんですが、フォント名に「Noto」と付けられています。

どうやらデバイス上で文字化けした際に、代わりに表示される四角(□)がネットスラングでは豆腐と呼ばれているらしく、

どんな言語でも(□)で表示されないような(文字化けしない)フォントを開発しよう】という思いを込めて、

「No more 豆腐(tofu)」⇒「Noto」

と名付けたのだとか。

ぶち

それでアイキャッチが豆腐の写真なわけか。わかりづらいな…

(開発者が豆腐嫌いだっただけじゃないことを願うよね。)

元々は「Noto Sans Japanese」という早期アクセス版がでてたのですが、「Noto Sans JP」はその正式版ということで公開されています。

webフォントに変更するデメリット

webフォントを外部から読み込む場合、デフォルトのフォントを使用するより表示速度が遅くなる、というデメリットがあります。

サイトの表示速度は大事。

ですが、早期アクセス版(Noto Sans Japanese)に比べて、正式版の【Noto Sans JP】は比較的軽量化されているということで変更に踏み切ることにしました。

Noto Sans JPに変更するカスタマイズ方法は?

Noto Sans JPへのフォント変更方法はweb上でもいくつか紹介されていますが、ここでは2つの方法をご紹介します。

…とその前に。

カスタマイズする時に、以下の点はお忘れなく。

注意すること!

・子テーマを使用する
・変更前にバックアップをとる
・自己責任の覚悟を決める

header.phpファイルにコードをコピペする

一般的なカスタマイズ方法といえばこちらになるのではないでしょうか。

まずは、google fontにアクセスしてNoto Sans JPのコードを取得します。

Noto Sans JPのコード取得方法
使用したいフォント(今回はNoto Sans JP)を選び、画面右上あたりに表示されているSELECT THIS FONT(+マーク)をクリックすると、画面右下に黒いバーがでてくるので、そちらをクリック。

Noto Sans JPの設定
CUSTOMIZEをクリックして、欲しいフォントの太さを指定します。(選択数が増えるとそれだけ重たくなるので、必要最低限にする)

light300も試してみましたが、薄すぎる感じがしたので、regular400にチェック。

EMBEDをクリックすると、コードが表示されるので、まるっとコピペ。

Noto Sans JPのコード
STANDARDのコードをheader.php(〜内)に貼り付けます。

Diverには最初から子テーマが用意されていますが、header.phpはありませんので、FTPソフト(FileZillaを使っています)で子テーマに複製してからコピペしました。

Diver子テーマのheader.php

後々わかりやすいように、</head>直前に貼っています。

CSSでfont-familyを指定する

header.phpにコードを貼り付けたら、子テーマのstyle.cssに戻って、font-familyの指定入力を行います。

/*Noto Sans JPを指定 */
body{
	font-family: "Noto Sans JP",sans-serif;
}

ページ全体にフォントを指定したいので、body に書いていますが、場所の指定をすることも可能です。

style.cssに追記するだけでNoto Sans JPに変更する方法

カスタマイズはしたいけど、functions.phpとかheader.phpはなるべく触りたくない。

その気持ち、よくわかります。(うんうん)

その場合には@importを使う方法で。

※@importは使いたくない、推奨しないという意見もあります。

先ほどのグーグルフォント(Noto Sans JP)に戻ります。

グーグルフォントの読み込みコード
@IMPORTをクリックすると表示されるコードをコピペ。
するようになってるんですが、エラーになったので以下を参照してください。

※<style></style>ごと貼り付けたらエラーになったので、以下のコードだけ抜き出しました。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

このコードを、「外観」→「テーマエディター」からdiver_child:スタイルシート(style.css)に追記していくんですが、どうせならfont-familyの指定も一緒にしちゃったほうがいいですよね。

なので、スタイルシートには以下のコードを追記しました。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

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

デフォルトで入力されている/* カスタマイズする場合にはこれより下に追記してください */の直後に貼り付けています。

(変更されないようなら、キャッシュクリア)

フォントが少し太めな分、文字の色が黒では重たいので、カスタマイザー(外観→カスタマイズ)の基本カラーで、文字色が#333だったところ全て、#666666に変更してあります。

文字間も気になったので段落スペースを変更

Noto Sans Jpの太さ400にしたことで、段落スペースがわかりにくく、全体的に文章が詰まってしまった感があったので、

Diverオプション」→「投稿設定」から、段落スペースを変更しました。

diverカスタマイズ(行間)

フォントサイズも(PC)16px、(SP)15pxに変更してみました。

こういう調整が簡単にできちゃうのもDiverの魅力の一つですね!

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事