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

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

 

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

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

さわらびゴシック

 

 

まずは以下のコードを

@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 PLUS 1p

↓ 書体見本

M PLUS 1p

 

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

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

 

 

M PLUS Rounded 1c

↓ 書体見本

M PLUS Rounded 1c

 

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

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

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

 

 

さわらび明朝

↓ 書体見本

さわらび明朝

 

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

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

 

 

さわらびゴシック

↓ 書体見本

さわらびゴシック

 

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

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

 

Noto Sans Japanese

↓ 書体見本

Noto Sans Japanese

 

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

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

 

 

Noto Serif JP

↓ 書体見本

Noto Serif JP

 

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

body {
font-family: 'Noto Serif JP', serif;
}

 

 

Kosugi

↓ 書体見本

Kosugi

 

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

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

 

 

Kosugi Maru

↓ 書体見本

Kosugi Maru

 

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

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

 

 

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

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

 

 

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

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

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

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

 

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

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

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

 

CSSコードはこちらです。

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

 

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

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

 

基本的には

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

いかがでしたか?

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

合わせて読みたい!

 

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

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

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

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

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

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

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

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

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

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

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

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