お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

コピペで簡単!STORK(ストーク)のフォントを変更

投稿日:2017年8月18日 更新日:



WordPressテーマ「STORK(ストーク)」を使っていると、「まわりと被るなー……」ってことが多いですよね。

今回は少しでもまわりと差別化したいー!という人のために、コピペだけでフォントを変更する方法をご紹介します。

これでさくっと他のストーク導入ブロガーと差別化しちゃいましょう。

ストークでフォントをGoogle Fontsに変更する

今回はGoogle Fontで配信されているフォントを使っていきます。

※一番上にコピペする、と指示のあるものはここにコピペしてください。

一番上にコピペする場合

コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪

子テーマについては「STORK(ストーク)で子テーマを導入する方法」で詳しく説明してあります。

WordPressでCSSを追加する3つの方法と各メリット・デメリット

Noto Sans Japanese

海は昼眠る、夜も眠る。
ごうごう、いびきをかいて眠る。

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Noto Sans Japanese', sans-serif;
}
[/box]

Mplus 1p

昔、昔、おお昔
海がはじめて、口開けて、

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Mplus 1p', sans-serif;
}
[/box]

さわらびゴシック

笑ったときに、太陽は、
目をまわして驚いた。

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Sawarabi Gothic', sans-serif;
}
[/box]

ニコモジ+Rounded M+ 1c

かわいい花や、人たちを、

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/nicomoji.css);
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/roundmplus1c.css" rel="stylesheet" />
[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Nico Moji', 'Rounded Mplus 1c', sans-serif;
}
[/box]

Rounded M+ 1c

海がのんでしまおうと、

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Rounded Mplus 1c', sans-serif;
}
[/box]

さわらび明朝

やさしく光る太陽は、

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Sawarabi Mincho', serif;
}
[/box]

こころ明朝+さわらび明朝

魔術で、海を眠らした。

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Kokoro', 'Sawarabi Mincho', serif;
}
[/box]

はんなり明朝+さわらび明朝

海は昼眠る、夜も眠る。
ごうごう、いびきをかいて眠る。

クリックでCSSを表示

Google Fontを呼び出すコードです。「CSS」はスタイルシートの一番上に、「HTML」は<head></head>内にコピペしてください。どちらか片方でOKです。

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

HTML
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
body {
font-family: 'Hannari', 'Sawarabi Mincho', serif;
}
[/box]

おわりに:コピペで簡単にストークのフォントを変更できる!

気に入るフォントは見つかりましたか?

超簡単なのでよかったらぜひフォント変更してみてください。

あなたのブログが素敵になりますように。ぱるでした!

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2024 All Rights Reserved.