【コピペだけ!】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つやり方を覚えれば、あとは同じ手順で全て設定できます。

 

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

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

さわらびゴシック

 

 

まずは以下のコードを

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

 

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

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

ダッシュボードメニュー

 

 

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

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

スタイルシート

 

 

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

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

スタイルシート

 

 

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

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

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

 

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

次に以下のコードを

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

 

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

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

ダッシュボードメニュー

 

 

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

追加CSS

 

 

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

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

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

 

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

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

 

M + 1c

↓ 書体見本

M + 1p

 

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

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

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

 

 

Rounded M + 1c

↓ 書体見本

Rounded M + 1c

 

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

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

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

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

 

 

さわらび明朝

↓ 書体見本

さわらび明朝

 

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

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

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

 

 

Noto Sans Japanese

↓ 書体見本

 Noto Sans Japanese

 

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

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

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

 

 

はんなり明朝

↓ 書体見本

はんなり明朝

 

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

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

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

 

 

こころ明朝

↓ 書体見本

こころ明朝

 

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

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

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

 

 

ニコモジ

↓ 書体見本

ニコモジ

 

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

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

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

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

 

 

ニクキュウ

↓ 書体見本

ニクキュウ

 

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

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

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

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

 

 

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

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

 

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

上記、紹介したGoogle Fontは

単体だけなく組み合わせて使うことも可能です。

いわゆる合わせ技というやつですね…^^

 

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

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

 

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

↓ 書体見本

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

 

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

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

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

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

 

2種類のコードを併記することで

こころ明朝の仮名書体とさわらび明朝の漢字書体が表示されます^^

 

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

↓ 書体見本

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

 

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

組み合わせてみます。

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

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

 

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

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

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

 

CSSコードはこちらです。

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

 

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

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

 

基本的には

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

いかがでしたか?

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

合わせて読みたい!

 

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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