Simplicity2で『Google Fonts + 日本語 早期アクセス』を使う方法

ブログ運営

ここ最近はすっかりInstagram(インスタグラム)にハマってしまって、ブログ更新がおざなりになってしまっている、あらくま(@sa_arakuma)です。

この「あらくまブログ」ではフォントをSimplicity2デフォルトの仕様ではなく、『Google Fonts + 日本語 早期アクセス』で用意されている9種類の書体のなかから【Noto Sans Japanese】という書体 を使っています。

今回は『Google Fonts + 日本語 早期アクセス』の「Noto Sans Japanese」をSimplicity2で使うための方法とこのブログでのフォントの設定についてお伝えしていきますよ!

スポンサーリンク

『Google Fonts + 日本語 早期アクセス』にある日本語9書体

『Google Fonts + 日本語 早期アクセス』にある書体は以下の9書体になります。

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝(ひらがな・カタカナのみ)
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ(カタカナのみ)
  • ニコモジ(ひらがな・カタカナ・英数字のみ)
  • Noto Sans Japanese

漢字が用意されていない書体もあり、ブログに使える書体は太字の6書体ということになりますね。

どのような書体なのかは『Google Fonts + 日本語 早期アクセス』で確認してください。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available fro...

『Google Fonts + 日本語 早期アクセス』にある書体をSimplicity2で使えるようにする方法

どのフォントを使うと決めてもSimplicity2で使えるようにするのは同じ方法なので、当ブログで使っている「Noto Sans Japanese」をブログ全体へ設定する場合 で説明していきます。

1.『Google Fonts + 日本語 早期アクセス』で使うフォントを決める。

まずはどのフォントを使うのかを決めます。今回の例では「Noto Sans Japanese」を選びます。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available fro...
使用するフォントを「Noto Sans Japanese」に決めた理由は、Chrome・IE・Safariのいずれでも綺麗にフォントが表示されたからです。

2.『HTML』をSimplicity2の子テーマにある「header-insert.php」に追記する。

「Noto Sans Japanese」を選んでクリックします。

すると画像の場所に「HTML」というhead内に追記するコードがありますので、これをコピーします。

Simplicity2の子テーマにある「header-insert.php」へペーストします。最後にファイルの更新するのを忘れずに。

「Noto Sans Japanese」をお使いになるんでしたら、以下のものをコピペして使っていただいてもOKです。これは『Google Fonts + 日本語 早期アクセス』にあるコードと同じものです。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
Simplicity2をカスタマイズするときは、必ず子テーマを利用しましょう。
参考 【Simplicity2カスタマイズ】親テーマではなく子テーマでカスタマイズしていこう!

3.『CSS』を書き換えてSimplicity2の子テーマにある「スタイルシート」に追記する。

「Noto Sans Japanese」の画像の場所(「HTML」の下)に「CSS」というスタイルシートに記述するコードがありますので、このコードのうちの「font-family: “Noto Sans Japanese”;」だけをコピー します。

そして以下のような記述を作成します。

body {
    font-family: "Noto Sans Japanese";
}

上記のコードを子テーマのスタイルシートの「Simplicity子テーマ用のスタイルを書く」の直後に追記しましょう。最後にファイルを更新するのを忘れずに。

今回の説明ではSimplicity2全体にフォントを適用する方法です。見出しなどブログの一部分に適用したい場合は、Chromeのデベロッパーツールなどでフォントを適用させたい場所を検証して、その場所に「font-family: “Noto Sans Japanese”;」を追記してください。
参考 WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

万一のための保険をかけておく

ここまででSimplicity2全体のフォントが「Noto Sans Japanese」になりますが、このブログでは 『san-serif(サンセリフ)』 も使い、以下のようにしています。

body {
    font-family: "Noto Sans Japanese", san-serif;
}

「san-serif(サンセリフ)」を追加しておくことで、『万一、「Noto Sans Japanese」が表示できなかった場合の保険になる』とのことでしたので。

「san-serif」は、指定したWebフォントが表示できなかった場合や、Webフォントに含まれていない文字を 『ユーザの環境にある同じ系列の書体(この場合はサンセリフ体)を表示する』という設定(=保険)です。

「Google Fonts+ 日本語 早期アクセス」を使ってみる

「Noto Sans Japanese」デフォルトでは太いのでフォントの太さを調整

ここまででSimplicity2のフォントを「Noto Sans Japanese」に変更することができましたが、デフォルトのままではフォントが少し太くてスマートではなかったので、フォントの太さを変更しました。

こちらのサイトを参考にフォントの太さを比べていって最終的に落ち着いたのが「font-weight:200;」で、太すぎず細すぎずになったと思ってます。

【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。
これ、いつから使えるようになっていたのでしょうか?今さらなのかもしれませんが Google Web Fonts で日本語フォントの[Noto Sans Japanese]が利用できるようになっていたので、その導入方法を紹...

最終的にSimplicity2の子テーマのスタイルシートには以下のように記述しました。

body {
    font-family: "Noto Sans Japanese", san-serif;
    font-weight: 200;
}

おわりに

この他にもフォントの太さをカスタマイズしているんですがそれについてはおいおいご説明するとして、これでこのブログと同じように「Noto Sans Japanese」をSimplicity2に適用することができますよ!

Simplicity2デフォルトのフォントを変えるだけでも他のブログとちょっとだけですけど差別化することができます。

今回も最後までお付き合いくださって、ホントにありがとうございます!また次回お会いしましょう!!

あらくま
列車やバスに乗って全国各地を訪れるのが趣味な中年オヤジ。現在は2周目となるJR全線完乗、私鉄と公営鉄道と第三セクター線の初完乗を目指して全国各地を乗り鉄旅をしています。
あらくまをフォローする
ブログ運営
スポンサーリンク
あらくまをフォローする
青春18きっぷ&お得なきっぷで乗り鉄の旅ブログ
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus