【コピペだけ！】THE THOR（ザ・トール）のフォントを変更する方法！

デザインコンサルタントのここあです。

ワードプレス有料テーマ「THE THOR（ザ・トール）」は

ベースとなる基本書体をダッシュボードメニューから

外観 → カスタマイズ → 基本設定 → 基本スタイル設定とクリックすると

サイト全体のフォントを4種類の中から選び設定することができます。

また、記事編集の際にはさらに

ビジュアルエディタから好きなフォントを選び

自由に記事のフォントを変えることもできます。

こんな感じに

とは言え、THE THORで使える書体は

ほとんどが基本書体とも言える一般的なフォント。

なので、全体のフォントファミリーから選ぶ場合は

Google Font（Webフォント）である「Noto Sans JP」を

選ぶ方が多いかもしれません。

しかし、たった4種類の中からフォントを選ぶよりは

もっと色々なフォントの中から選べる方が楽しいし嬉しいですよね？＾＾

ということで、今回はそんなあなたの期待に応えるべく

THE THOR（ザ・トール）のフォントを変更する方法をご紹介したいと思います。

THE THOR（ザ・トール）のフォントをGoogle Fontに！

フォントの変更といえば、やはりおすすめは

WebフォントであるGoogle Font。

このブログもGoogle Fontを採用しています。

Google Fontで設定しておけば

フォント情報をGoogleの専用サーバーに読みに行ってくれるので

Mac環境でもWindows環境でも文字化けすることはありませんし

Google Fontは読み込み速度を極限まで早めたフォントなので

表示速度が落ちるというデメリットもありません。

また、記事のフォント情報というのは

使用範囲も広いのでフォントのイメージを変えるだけで

サイト全体の雰囲気を簡単に変えられるというメリットがあります。

なので、自分のサイトを他の人と差別化したいと

考えているあなたには、フォントの変更はかなりおすすめです＾＾

Google Fontの種類は全部で12種類

現在リリースされているGoogleの日本語フォントは全部で12種類

• Noto Sans JP（THE THORの設定にあるWebフォント）
• Noto Serif JP
• Reggae One
• M PLUS Rounded 1c
• M PLUS 1p
• Potta One
• Hachi Maru Pop
• Yusei Magic
• Sawarabi Mincho
• Sawarabi Gothic
• Kosugi Maru
• Kosugi

になります。

Google Fontを使うための設定方法は

それほど難しくはありませんので

初心者のあなたでも全然できます！

ということで、Google Fontの設定方法を

順番に解説していきますので

ぜひあなたもチャレンジしてみてください！

まずはGoogle Fontのサイトにアクセスします。

Google Font

サイトにアクセスすると画面が暗いかもしれませんので、

背景を白にしたい場合は右上の太陽マークをクリックしましょう。

そうすると、画面が黒背景から、白背景に切り替わります。
そして、太陽マークが月のマークに変わります。

Google Fontのサイトにアクセスしたら

画面左上にあるLanguageのプルダウンメニューから

Japaneseを選んでください。

そうすると、以下のように日本語書体のみが表示されます（書体は全部で12種類）

日本語書体が表示されたら好きな書体を選んでクリックしましょう。

今回は分かりやすいように「Noto Serif JP」を選択します。

フォントをクリックすると以下の画面に切り替わりますので

続いて「＋Select this style」をクリックします。

「＋Select this style」をクリックすると、画面右側に

フォントを設定するためのウインドウが表示されます。

この画面表示は画面上、以下のアイコンをクリックすることで

表示/非表示が切り替えられます。

ちなみに何か1つでもfont styleを選んでいる場合は、右上に「赤い丸」が表示されます。

画面右側にフォントを設定するためのウインドウが表示されたら、

続いて画面真ん中にある「@IMPORT」の文字をクリックしてください。

今回、THE THORの記事フォントを変えるための

Googleフォントのコードは以下の２つを使用します。

なお、上記コードは一番細いフォント「Exra-Light200」のみ追加したコードになりますが、

いろんな太さを使いたい場合は、追加したい太さの「+Select this style」をクリックすることで

各コードが追加されますので、お好みに合わせて追加してみてください。

ということで、ここまではGoogle fontを使うための

コードの出し方と選び方について解説させていただきました。

とは言え、今回はGoogle font 11種類全てのコードを私の記事にまとめてますので

あなたがGoogle Fontのサイトに飛ばなくてもおそらく大丈夫かと思います。

THE THOR（ザ・トール）のフォント変更方法

ということで、続いて

THE THORのフォントを変更する方法を説明していきます。

フォントの変更方法は全て同じになりますので

やり方だけ覚えたら、実際にあなたが設定してみたい

フォントコードをコピーして色々試してみてくださいね＾＾

とりあえず、先にセレクトした「Noto Serif JP」を例に挙げて

Google Fontの設定方法をご説明致します。

Noto Serif JPに変更する方法

THE THORのフォントをNoto Serif JPに変更する場合は

まず最初にダッシュボードメニューから

外観 → テーマエディターをクリックします。

テーマエディターをクリックすると以下のような画面に切り替わるので

画面右側にある「style-user.css」をクリックして

style-user.cssの設定画面に表示を切り替えます。

※style.cssに貼っても効果はないので気をつけましょう＾＾；

そうすると空欄のコード記入画面になりますので以下のコードを

↓以下、クリックするとコードが表示されます

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');&display=swap');

コピペしてこのように貼り付けましょう。

コードがコピペできたら「ファイルを更新」をクリックして

設定を保存してください。

続いて、ダッシュボードメニューに戻り

外観 → カスタマイズ をクリックし

さらに追加CSSをクリック

以下のコードをコピペします。

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Noto Serif JP', serif;
}

↓こんな感じに

最後に、画面上部にある「公開」ボタンをクリックし

保存すればTHE THORのほとんど部分が「Noto Serif JP」に変わります。

※記事以外の部分も変更されるようにCSSを設定しています。

↓Noto Serif JPに変更できていれば、こんな書体に変わります。

フォントの設定方法は以上です。

THE THOR（ザ・トール）のフォントを変更してみよう！

続いて、各フォントの設定用コードを記載致しますので

あなたが好きなフォントを選んで設定してみてくださいね＾＾

M PLUS 1p

THE THORの記事フォントを「M PLUS 1p」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'M PLUS 1p', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

Reggae One

THE THORの記事フォントを「Reggae One」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Reggae One', cursive;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

まぁ、本文には向かないと思いますけどね（笑）

Sawarabi Mincho

THE THORの記事フォントを「Sawarabi Mincho」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

クリックでCSSコードを表示

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Sawarabi Mincho', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

Sawarabi Gothic

THE THORの記事フォントを「Sawarabi Gothic」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Sawarabi Gothic', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

M PLUS Rounded 1c

THE THORの記事フォントを「M PLUS Rounded 1c」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'M PLUS Rounded 1c', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

Kosugi Maru

THE THORの記事フォントを「Kosugi Maru」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

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

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Kosugi Maru', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

次に紹介する「Kosugi」と「Kosugi Maru」は

英数字が少し半角っぽい感じになるので

フォント全体のバランスが悪く少し使いにくいかもしれません。

なので、「Kosugi」と「Kosugi Maru」を使う場合は

その点だけ気をつけてくださいね。

Kosugi

THE THORの記事フォントを「Kosugi」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Kosugi', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

Potta One

THE THORの記事フォントを「Potta One」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Potta One', cursive;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

Hachi Maru Pop

THE THORの記事フォントを「Hachi Maru Pop」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Hachi Maru Pop', cursive;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

Yusei Magic

THE THORの記事フォントを「Yusei Magic」に変更したい場合は

以下のコードを所定の場所にコピペしてください！

style-user.cssにコピペ

@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

追加CSSにコピペ

body p,ul,ol,span,.t-noto,.globalNavi__list li a,.bottomFooter__list li a,.profile__description{
font-family: 'Yusei Magic', sans-serif;
}

↓設定が上手くいっていれば、THE THORの記事フォントが以下のような書体に変わります。

以上、最初にTHE THORのデフォルト設定に入っている「Noto Sans JP」以外

全11種類のGoogle FontをTHE THORに反映する指定コードをさせていただきました。

設定方法さえ分かれば、コードをコピして保存するだけなので

WoerPress初心者のあなたでも簡単に変更できます。

なので、今の書体が「気に入らない！」というあなたは

ぜひチャレンジしてみてくださいね＾＾

記事フォントのサイズを変更する方法

記事のフォントサイズはビジュアルエディタの

記事編集画面や、最初にご紹介した基本スタイル設定から

「小、中、大」の中から選び、調整は可能ですが

フォントサイズを細く調整することはできませんし

わざわざフォントサイズを細かく指定するのも

正直、面倒だと思います。

なので、フォントサイズを変更する

CSSコードも合わせてご紹介しておきます。

記事全体のフォントをGoogle Fontに変更すると

少し大きく見えたり、小さく見えたりして

気になる方もいると思いますので。

もちろん、フォントサイズを調整しても

後からビジュアルエディタで個別に

フォントサイズを変更することもできます。

ということで、

あらかじめベースのフォントサイズを調整したいというあなたは

ダッシュボードメニューから外観 → カスタマイズ → 追加CSSをクリックし

以下のCSSコードをコピペしてください。

追加CSSにコピペ

.postContents p {
font-size:103%;
}

↓こんな感じに

上記指定コードにある

font-size:103%;の103%の数字を変えれば

フォントサイズが調整できます。

ちなみにフォントサイズは1%刻みで指定ができ

1%でもかなりサイズが変わって見えるので

少しずつ調整してみてくださいね。

プレビュー画面で見ながら調整すると

調整しやすいので、画面を見ながら

読者の方が読みやすいように調整してみてください＾＾

記事フォントカラーを変更する方法

さらにTHE THORの記事フォントの色を変更する方法もご紹介します。

THE THORにはダッシュボードメニューから

外観→カスタマイズ→基本設定［THE］→基本スタイル設定から

投稿記事のリンク色を変える設定はあるものの

記事全体のフォントカラーを変更する設定は

残念ながらありません＾＾；

なので、記事全体のフォントカラーを変更するには

先ほどのフォントサイズ同様CSSコードを書いて

記事全体のフォントカラーを調整する必要があります。

ということで、記事のフォントカラーを変更したい場合は

ダッシュボードメニューから

外観 → カスタマイズ → 追加CSSをクリックして

以下のCSSコードを追加してください。

追加CSSにコピペ

.postContents p,ul,ol {
color:#5d5d5d;
}

↓こんな感じに

上記color:#5d5d5d;のカラーコードを変更することで

THE THORの記事フォント全体の色を変更することができます。

記事のフォントカラーはそれほど気になる方は

多くないかもしれませんが、実は

記事のフォントカラーは非常に重要です。

なぜなら、ブログの背景色は基本ホワイト（白）なので

ホワイトと真逆なブラックを記事のフォントカラーとして

設定していると読者の目が疲れてしまうからです。

そうなると、長文でしっかり書かれた記事は

最後まで読まれにくくなり、途中で離脱される可能性が

高くなってしまいます。

なので、記事本文のフォントカラーは

読者の目に優しい色に変更する方が

最後まで記事を読まれやすくなるのでおすすめです。

私が使っているSTORKは

流石にブロガー専用のテーマだけあってデフォルトカラーは

#3E3E3Eのグレーにあらかじめ設定されています＾＾

THE THORはデフォルトカラーがブラックなので

THE THORを使う場合は、早めにフォントカラーを

変更しましょう。

また、今回ご紹介した記事本文の

• フォント（Google Fontに）
• フォントサイズ
• フォントカラー

これらの指定コードは全て同じなので

以下のように指定コードをまとめておくと

後で管理もしやすく、重複した無駄なコードがなくなるので

SEO的にもほんと少しだけ良くなります＾＾

THE THORのリストカラーを変更する方法

最後にTHE THORのリストカラーを変える方法も

合わせてお伝えしておきます。

というのも、ここまでご紹介したコードは

記事本文の色は変更できますが

リストのフォントカラーまでは変更できません。

なので、今の状態のままにしてしまうと

このようにリストのフォントカラーだけ違う状態になってしまします。

それでは困りますよね？

もちろん「リストだけ目立たせたい！」という場合は別ですが（笑）

ということで、リストのフォントカラーも

記事本文と同じ色に変更したい場合は先ほどと同様

ダッシュボードメニューから外観 → カスタマイズ → 追加CSSの部分に

以下のコードをコピペしてください。

追加CSSにコピペ

.content ul,.content ol{
color:#5d5d5d;
}

上記、カラーコードcolor:#5d5d5d;を記事本文と同じにすれば

このように全ての文字色を統一することができます。

以上がリストのフォントカラーを変更する方法です。

THE THOR（ザ・トール）のフォントを変更する方法まとめ

今回はTHE THORの記事フォントを

「Google Font」に変更する方法を中心にご紹介致しました。

記事がメインとなるブログを運営する場合は

記事の見やすさや、フォントから与えるイメージ

というのも非常に大事になります。

なぜなら、例えフォントであっても、

今回の８書体を見てもわかる通り

女性らしいフォントや可愛いフォント

明朝体で少しかしこまったフォントなど書体を変えるだけで

読者に与えるイメージが変わるからです。

記事の書体を意識しないと

ニュースのような記事をPOPな書体で書いた場合

当然、記事に真実味はなくなるし

逆に、楽しい記事を明朝体で書いていても

読者にはその記事が楽しそうに見えないという

弊害が起こったりもします。

なので、もちろん、読者の「読みやすさ」という部分は

必ず配慮して欲しいのですが、フォントを変えるだけで

サイトの雰囲気や記事の伝わり方が大きく変わりますので

あなたのキャラクターや記事の内容に合うフォントを選び

多くの読者にあなたの記事を読んでもらえるように

ぜひ工夫してみてくださいね。

私自身、THE THORは非常に素晴らしいテーマだと

思っておりますので、一人でも多くの方にTHE THORで

楽しんでサイトを運営してもらえるよう

少しずつカスタマイズに関する記事を

増やしていければと思っています。

ということで、

最後までお読みいただきありがとうございました！