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

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

ここあです。

 

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

どうしても見た目の印象がかぶりますよね。

 

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

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

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

 

ブログの場合は「記事のタイトル」や「見出し

記事の本文」や「メニュー」に至るまで

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

 

なので「フォントを変える」だけで

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

 

今回は初心者のあなたでも簡単にできる

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

 

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

ちょっと他の人と差別化したい」という人は

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

 

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

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

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

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

 

Webフォントとは?

Webフォントである「Google Font」がどういうものかと言うと…

 

Webアイコンフォントを使用する「Font Awesome」のように

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

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

 

この方法を使うと…

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

サーバーへの負担を減らせます。

 

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

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

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

 

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

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

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

 

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

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

 

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

Google Fontです。さすが世界の「Google」^^

 

Google Font(日本語)の種類

現在リリースされている

日本語の「Google Font」は全部で9種類。

  • M + 1p(漢・平・片)
  • Rounded M + 1c(漢・平・片)
  • はんなり明朝(平・片のみ)
  • こころ明朝(平・片のみ)
  • さわらび明朝(漢・平・片)
  • さわらびゴシック(漢・平・片)
  • ニコモジ(平・片のみ)
  • ニクキュウ(片のみ)
  • Noto Sans Japanese(漢・平・片)

※「漢=漢字」、「平=ひらがな」、「片=カタカナ」を表しています。

 

数は多くありませんが個性的なフォントが多いので

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

それでは具体的にフォントの変更方法を説明します。

 

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 + 1c

↓ 書体見本

M + 1p

 

◎漢字・ひらがな・カタカナが全て揃っている書体です。

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

body {
font-family: 'Mplus 1p', sans-serif;
}

 

Rounded M + 1c

↓ 書体見本

Rounded M + 1c

 

◎漢字・ひらがな・カタカナが全て揃っている書体。

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

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

body {
font-family: 'Rounded Mplus 1c', sans-serif;
}

 

さわらび明朝

↓ 書体見本

さわらび明朝

 

◎漢字・ひらがな・カタカナが全て揃っている書体。

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

body {
font-family: 'Sawarabi Mincho', serif;
}

 

Noto Sans Japanese

↓ 書体見本

 Noto Sans Japanese

 

◎漢字・ひらがな・カタカナが全て揃っている書体。

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

body {
font-family: 'Noto Sans Japanese', sans-serif;
}

 

はんなり明朝

↓ 書体見本

はんなり明朝

 

◎ひらがな・カタカナのみの書体。

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

body {
font-family: 'Hannari', serif;
}

 

こころ明朝

↓ 書体見本

こころ明朝

 

◎ひらがな・カタカナのみの書体。

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

body {
font-family: 'Kokoro', serif;
}

 

ニコモジ

↓ 書体見本

ニコモジ

 

◎ひらがな・カタカナのみの書体。

かなり個性の強いフォントですね^^;

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

body {
font-family: 'Nico Moji', sans-serif;
}

 

ニクキュウ

↓ 書体見本

ニクキュウ

 

◎カタカナのみの書体。本文にはキツそうです^^;

ロゴなどには使えそうですけどね…

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

body {
font-family: 'Nikukyu', sans-serif;
}

 

以上9種類。

お気に入りのフォントが見つかったら

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

 

Google Fontを組み合わせて使う方法

上記、紹介した「Google Font」は

組み合わせて使うことも可能です。

 

2つだけやり方を説明しておきますので

組み合わせて使いたいという場合は参考にしてくださいね。

 

「こころ明朝」と「さわらび明朝」を組み合わせて使う方法

↓ 書体見本

「こころ明朝」と「さわらび明朝」を組み合わせて使う方法

 

Google Font」を組み合わせて使う場合は

2種類のコードを記述します。

スタイルCSSにコピー

@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

 

追加CSS」の方にも同様に2つのコードを追加しましょう。

CSS追加にコピー

body {
font-family: 'Kokoro', 'Sawarabi Mincho', serif;
}

これでこころ明朝の仮名書体と

さわらび明朝の漢字書体が表示されます^^

 

「はんなり明朝」と「さわらびゴシック」を組み合わせて使う方法

↓ 書体見本

「はんなり明朝」と「さわらびゴシック」を組み合わせて使う方法

 

次は「はんなり明朝」と「さわらびゴシック」を

組み合わせてみます。

スタイルCSSにコピー

@import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

 

追加CSS」の方にも同様に2つのコードを追加しましょう。

CSS追加にコピー

body {
font-family: 'Hannari', 'Sawarabi Gothic', sans-serif;
}

これではんなり明朝の仮名書体と

さわらびゴシックの漢字書体が表示されます。

 

いくらGoogle Fontを組み合わせても

読みにくかったら意味がありませんので

一番読みやすそうなフォントを選んでくださいね^^:

 

また組み合わせる場合は…

漢字、ひらがな、カタカナがある書体と

ひらがな、カタカナのみの書体で組み合わせてください。

 

漢字、ひらがな、カタカナがある書体同士組み合わせても

どちらか一方が反映されるので意味がありません^^;

 

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

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

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

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

 

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

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

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

 

CSSコードはこちらです。

CSS追加にコピー

.entry-content p,ul,ol {
font-size: 103%;
}

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

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

 

基本的には

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

いかがでしたか?

 

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

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

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

 

ストークはデフォルトの書体が悪い

というワケではありませんが

フォントを変えるだけで

 

訪問者の印象が変わるだけでなく

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

 

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

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

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

 

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

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

 

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

 

もしもやり方がよくわからなければ

いつでも気軽にご相談くださいね。

 

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

 

その他、ストークのカスタマイズしたい場合

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

 

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

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

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

 

合わせて読みたい!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。