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

【コピペだけ!】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の種類は全部で8つ

Google Font

 

 

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

  • Noto Sans JP(THE THORの設定にあるWebフォント)
  • M PLUS 1p
  • Noto Setif JP
  • Sawarabi Mincho
  • Sawarabi Gothic
  • M PLUS Rounded 1c
  • Kosugi Maru
  • Kosugi

になります。

 

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

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

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

 

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

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

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

 

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

Google Font

 

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

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

Japaneseを選んでください。

Google Font

 

 

そうすると、以下のように日本語書体のみが表示されます。

Google Font

 

 

日本語書体が表示されたら好きな書体を選び

右上のある赤丸+のマークをクリックしましょう。

Google Font

 

 

そうすると、画面右下にフォントを設定するための

ウインドウがチラッと表示されますので

右端にある「ー」マークをクリックします。

Google Font

 

 

右端の「ー」をクリックすると

下から画面がにょきっと飛び出します。

Google Font

 

 

下から画面が飛び出したら、続いて

画面真ん中にある「@IMPORT」の文字をクリックします。

Google Font

 

 

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

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

Google Font

 

 

ということで、場所だけ覚えておいてください(笑)

 

今回は、上記2箇所のコードは

全て私の記事に書いていますのであなたがわざわざ

Google Fontのサイトに飛ばなくても大丈夫です^^

 

THE THOR(ザ・トール)のフォント変更方法

ということで、続いて

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

 

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

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

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

 

とりあえず、THE THORの設定にもある

「Noto Sans JP」を例に挙げて

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

 

※「Noto Sans JP」は先ほど説明した基本スタイル設定の中にありますので、このフォントを使用する場合は「基本スタイル設定」から設定してください。

 

Noto Sans JPに変更する方法

Noto Sans JP

 

 

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

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

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

ダッシュボードメニュー

 

 

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

 

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

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

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

 

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

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

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

 

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

style-user.css

 

 

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

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

 

 

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

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

ダッシュボードメニュー

 

 

さらに追加CSSをクリック

追加CSS

 

 

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

.postContents p {
font-family: 'Noto Sans JP', sans-serif;
}

↓こんな感じに

追加CSS

 

 

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

追加CSS

 

 

保存すればTHE THORの記事部分のフォントが

「Noto Sans JP」に変わります。

 

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

 

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

 

 

THE THOR(ザ・トール)のフォントを変更してみよう!

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

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

 

M PLUS 1p

M PLUS 1p

 

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

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

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap');

.postContents p {
font-family: 'M PLUS 1p', sans-serif;
}

 

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

M PLUS 1p

 

 

Noto Setif JP

Noto Setif JP

 

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

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

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

.postContents p {
font-family: 'Noto Serif JP', serif;
}

 

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

Noto Setif JP

 

 

Sawarabi Mincho

Sawarabi Mincho

 

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

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

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

.postContents p {
font-family: 'Sawarabi Mincho', sans-serif;
}

 

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

Sawarabi Mincho

 

 

Sawarabi Gothic

Sawarabi Gothic

 

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

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

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

.postContents p {
font-family: 'Sawarabi Gothic', sans-serif;
}

 

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

Sawarabi Gothic

 

ちなみに私が今このブログで設定しているフォントが

「さわらびゴシック」です^^

 

なので、この書体を設定したらどう見えるか

非常にイメージしやすいと思います。

 

 

M PLUS Rounded 1c

M PLUS Rounded 1c

 

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

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

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap');

.postContents p {
font-family: 'M PLUS Rounded 1c', sans-serif;
}

 

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

M PLUS Rounded 1c

 

 

Kosugi Maru

Kosugi Maru

 

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

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

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

.postContents p {
font-family: 'Kosugi Maru', sans-serif;
}

 

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

Kosugi Maru

 

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

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

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

 

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

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

 

 

Kosugi

Kosugi

 

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

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

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

.postContents p {
font-family: 'Kosugi', sans-serif;
}

 

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

Kosugi

 

 

以上、最初に設定方法でご紹介した「Noto Sans JP」を含め

全8種類のGoogle FontをTHE THORの記事部分のみに反映する

指定コードを紹介しました。

 

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

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

 

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

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

 

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

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

ということで、あらかじめベースのフォントサイズを

調整したいというあなたはダッシュボードメニューから

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

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

 

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

 

↓こんな感じに

追加CSS

 

上記指定コードにある

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

基本スタイル設定

 

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

残念ながらありません^^;

 

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

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

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

 

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

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

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

 

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

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

 

↓こんな感じに

 

 

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

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

 

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

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

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

 

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

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

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

 

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

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

高くなってしまいます。

 

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

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

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

 

私が使っているSTORKは

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

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

 

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

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

変更しましょう。

 

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

  • フォント(Google Fontに)
  • フォントサイズ
  • フォントカラー

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

 

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

追加CSS

 

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

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

 

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

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

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

 

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

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

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

 

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

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

sample

 

 

それでは困りますよね?

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

 

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

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

 

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

外観 → カスタマイズ → 追加CSSの部分に

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

 

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

 

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

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

サンプル

 

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

ということで、最後までお読みいただき

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

 

フォントの変更はコピペだけでできるので

迷うことはないと思いますが^^;

 

もしも設定で分からないことがありましたら

お気軽にご相談くださいね。

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

デザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?