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 {[/box]
font-family: 'Noto Sans Japanese', sans-serif;
}
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 {[/box]
font-family: 'Mplus 1p', sans-serif;
}
さわらびゴシック
目をまわして驚いた。
クリックで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 {[/box]
font-family: 'Sawarabi Gothic', sans-serif;
}
ニコモジ＋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" />[/box]
<link href="https://fonts.googleapis.com/earlyaccess/roundmplus1c.css" rel="stylesheet" />
次はただ追加すればOK。
[box class="blue_box"]CSS
body {[/box]
font-family: 'Nico Moji', 'Rounded Mplus 1c', sans-serif;
}
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 {[/box]
font-family: 'Rounded Mplus 1c', sans-serif;
}
さわらび明朝
クリックで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 {[/box]
font-family: 'Sawarabi Mincho', serif;
}
こころ明朝＋さわらび明朝
クリックで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" />[/box]
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
次はただ追加すればOK。
[box class="blue_box"]CSS
body {[/box]
font-family: 'Kokoro', 'Sawarabi Mincho', serif;
}
はんなり明朝＋さわらび明朝
ごうごう、いびきをかいて眠る。
クリックで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" />[/box]
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
次はただ追加すればOK。
[box class="blue_box"]CSS
body {[/box]
font-family: 'Hannari', 'Sawarabi Mincho', serif;
}
おわりに：コピペで簡単にストークのフォントを変更できる！
気に入るフォントは見つかりましたか？
超簡単なのでよかったらぜひフォント変更してみてください。
あなたのブログが素敵になりますように。ぱるでした！