【コピペだけ!】STORK(ストーク)のフォントを変更する方法!

ここあです。

 

同じテーマを使っている人が多いと

どうしても見た目の印象がかぶるのが

気になりますよね…^^;

 

他の人と見た目の印象を変え

差別化するのに最も効果的な手法が

ブログのフォントを変えるという方法です。

 

ブログの場合は…

  • 記事のタイトルや見出し
  • 記事の本文
  • メニュー

に至るまで

フォントがほとんどの割合を占めています。

 

だから、フォントを変えるだけで

ブログの印象を大きく変えることができます。

 

ということで、今回は初心者のあなたでも簡単にできる

コピペだけフォントを簡単に変更する方法ご紹介します。

 

やり方はとても簡単なので

あなたのサイトを「他の人と差別化したい」という場合は

ぜひフォントを変更してみてください。

 

 2019年5月21日:記事の一部を改訂しました。

 

STORK(ストーク)のフォントをGoogle Fontに変更しよう!

フォントの変更方法はいろいろありますが

今回はWebフォントであるGoogle Fontを使った

フォントの変更方法をご紹介します。

 

Webフォントとは?

Webフォントである

Google Fontがどういうものかと言うと…

 

WebアイコンフォントであるFont Awesomeのように

Googleに用意されている日本語フォントを

専用サーバーに読みに行って表示させるという方法です。

 

この方法を使うと…

自分のサーバーにフォントデータをおく必要がないので

サーバーへの負担を軽減できます。

 

さらに、専用サーバーからフォントを読み込むため

訪問者のマシン環境がWindowsだろうとMacだろうと

文字化けするということがありません。

 

ただし、専用サーバーからフォントデータを

読み込む時間が必要になるため

表示速度に若干影響が出るというデメリットもあります。

 

しかし、そのデメリットを解消すべく

超ハイスペックなサーバーからの読み込みを可能にし

 

極限まで読み込み速度を速くしたWebフォントが

Google Fontなんです。

さすが世界のGoogleですね(笑)

 

Google Font(日本語)の種類

Google Font

 

現在リリースされている

日本語のGoogle Fontは全部で以下の8種類。

 

  • M PLUS 1p
  • M PLUS Rounded 1c
  • さわらび明朝
  • さわらびゴシック
  • Noto Sans JP
  • Noto Serif JP
  • Kosugi
  • Kosugi maru

 

それほど数は多くありませんが

個性的なフォントが多いので

印象を大きく変えることができます。

 

それではフォントの変更方法についてご説明していきますね。

 

STORK(ストーク)のフォントの変更方法

STORKでGoogle Fontを使う場合は

2段階の設定が必要となります。

 

1つはテーマのスタイルCSSに。

もう1つはCSS追加の部分に設定していきます。

 

まずは、わたしが使用している

さわらびゴシックの設定を方法を紹介します。

1つやり方を覚えれば、あとは同じ手順で全て設定できます。

 

さわらびゴシックに変更する方法

当ブログで使っているさわらびゴシックとはこんな書体です。

さわらびゴシック

 

まずは以下のコードを

スタイルCSSにコピー
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

 

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

外観 → テーマの編集をクリックし

ダッシュボードメニュー

 

子テーマのスタイルシート(style.css)

ペースト(貼り付け)します。

スタイルシート

 

コードを貼り付ける場所の目安は

一番上の行か2行目にしてください。

スタイルシート

 

※もしも子テーマにスタイルシート(style.css)がない場合は

以下の記事を参考にしてください。

「親テーマ」のファイルを「子テーマ」で編集する方法

 

上記コードをスタイルシートに貼り付けできたら

次に以下のコードを

追加CSSにコピー
body {
font-family: 'Sawarabi Gothic', sans-serif;
}

 

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

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

ダッシュボードメニュー

 

追加CSSの部分に貼り付けてください。

追加CSS

 

CSSコードの貼り付けができた瞬間に

フォントが変更されます。

以上が、設定方法です。簡単ですよね?^^

 

各フォントのCSSコードをそれぞれ記載しますので

あなたのお好みに合わせて所定の場所にコピーしてみてください。

 

M PLUS 1p

↓ 書体見本

M PLUS 1p

スタイルCSSにコピ
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap');
追加CSSにコピー
body {
font-family: 'M PLUS 1p', sans-serif;
}

 

M PLUS Rounded 1c

↓ 書体見本

M PLUS Rounded 1c

 

M + 1pの丸ゴシック体です。

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap');
追加CSSにコピー
body {
font-family: 'M PLUS Rounded 1c', sans-serif;
}

 

さわらび明朝

↓ 書体見本

さわらび明朝

 

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap');
追加CSSにコピー
body {
font-family: 'Sawarabi Mincho', sans-serif;
}

 

さわらびゴシック

↓ 書体見本

さわらびゴシック

 

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap');
追加CSSにコピー
body {
font-family: 'Sawarabi Gothic', sans-serif;
}

 

Noto Sans Japanese

↓ 書体見本

Noto Sans Japanese

 

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
追加CSSにコピー
body {
font-family: 'Noto Sans JP', sans-serif;
}

 

 

Noto Serif JP

↓ 書体見本

Noto Serif JP

 

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
追加CSSにコピー
body {
font-family: 'Noto Serif JP', serif;
}

 

Kosugi

↓ 書体見本

Kosugi

 

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=Kosugi&display=swap');
追加CSSにコピー
body {
font-family: 'Kosugi', sans-serif;
}

 

Kosugi Maru

↓ 書体見本

Kosugi Maru

 

スタイルCSSにコピー
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap');
追加CSSにコピー
body {
font-family: 'Kosugi Maru', sans-serif;
}

 

以上8種類。お気に入りのフォントが見つかったら

ぜひ設定してみてくださいね。

 

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

ブログのフォントを変更したら

記事の本文サイズが小さく見えたりと

フォントサイズが気になると思います。

 

フォントサイズの変更方法も

合わせてご紹介しておきますので

一緒に調整してみてください。

 

CSSコードはこちらです。

クリックでCSSコードを表示
.entry-content p,ul,ol {
font-size: 103%;
}

 

私が紹介するコードは一部

グローバルメニューのサイズも変わってしまいますが

 

基本的には

  • 記事本文:pタグ
  • リスト文字:ulタグ、olタグ

のフォントサイズを調整するコードにしてあります。

 

なので、フォントサイズを変えても

見出し(h2タグやh3タグなど)のフォントサイズは

変わらないコードにしています。

 

フォントサイズを調整する場合

あまり大きくし過ぎたりすると

全体のレイアウトが崩れる可能性があります。

 

プレビュー画面を見ながら

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

 

私はさわらびゴシックを使用していますが

フォントサイズは103%に止めています。

 

STORK(ストーク)のフォントを変更する方法まとめ

STORK(ストーク)のフォントを変更する方法まとめ

 

今回はSTORKのフォントを変更する方法をご紹介しました。

いかがでしたか?

 

フォントの変更自体は所定の場所に

コードを貼り付けるだけなので

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

 

ストークはデフォルトの書体が悪いというワケではありませんが

フォントを変えるだけで、訪問者の印象が変わるだけでなく

あなたのブログに対する気持ちも変わると思います。

 

ブログをどんどんカスタマイズして愛着が湧けば

それだけ「がんばって記事を書こう!」

という気持ちにも繋がります。

 

  • 「そろそろブログの見た目にも飽きてきた」
  • 「とりあえずカスタマイズしてみよう」

という場合は、フォントの変更をぜひ一度してみてください。

 

それだけで何となくモチベーションがアップしますよ(笑)

 

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

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?