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

ブログカスタマイズ

STORK(ストーク)の日付の数字と英語のフォントをカスタマイズ

投稿日：2017年9月20日更新日：2017年12月8日

今回は有料のWordPressテーマ「STORK（ストーク）」の「日付の数字と英語のフォント」をカスタマイズする方法をご紹介します！

この記事を読んでほしい人はこんな人だけです……

細かいところまでデザインにこだわりたい！！！

こんなところまで見てくれている人がいるとは思いませんでしたが、意外と需要があったので記事にしました！

「日付の数字と英語のフォント」とは？

画像で見たほうが早いので、こちらをご覧ください！

デフォルトのストークのフォントと違うの、わかりますか？ここをカスタマイズしていきます。

これから紹介するコードをコピペするだけでOKです。

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

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

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

カスタマイズ方法

今回はコピペで簡単にフォント変更ができる「Google Fonts」を使っていきます。

下にサンプルも用意してみました。「これにする」をクリックで飛びますよ◎（スクロールしてじっくり選んでもOK！）

[aside type="boader"]

Pacifico　→　これにする
ABCabc123
Acme　→　これにする
ABCabc123
Walter Turncoat　→　これにする
ABCabc123
Sigmar One　→　これにする
ABCabc123
Limelight　→　これにする
ABCabc123
Montserrat Subrayada　→　これにする
ABCabc123
Ribeye　→　これにする
ABCabc123
Fascinate Inline　→　これにする
ABCabc123
Ribeye Marrow　→　これにする
ABCabc123
Londrina Outline　→　これにする
ABCabc123
Monoton　→　これにする
ABCabc123
Freckle Face　→　これにする
ABCabc123
Nosifer　→　これにする
ABCabc123
ニコモジ　→　これにする
ABCabc123

[/aside]

『Pacifico』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

HTML
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Pacifico', cursive; letter-spacing: 0.1em; }[/box]

『Acme』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

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

『Walter Turncoat』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);

HTML
<link href="https://fonts.googleapis.com/css?family=Walter+Turncoat" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Walter Turncoat', cursive; }[/box]

『Sigmar One』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);

HTML
<link href="https://fonts.googleapis.com/css?family=Sigmar+One" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Sigmar One', cursive; }[/box]

『Limelight』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

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

『Montserrat Subrayada』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat+Subrayada);

HTML
<link href="https://fonts.googleapis.com/css?family=Montserrat+Subrayada" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Montserrat Subrayada', cursive; }[/box]

『Ribeye』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

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

『Fascinate Inline』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Fascinate+Inline);

HTML
<link href="https://fonts.googleapis.com/css?family=Fascinate+Inline" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Fascinate Inline', cursive; font-size: 120%; }[/box]

『Ribeye Marrow』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Ribeye+Marrow);

HTML
<link href="https://fonts.googleapis.com/css?family=Ribeye+Marrow" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Ribeye Marrow', cursive; }[/box]

『Londrina Outline』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Londrina+Outline);

HTML
<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Londrina Outline', cursive; letter-spacing: 0.05em; font-size: 120%; }[/box]

『Monoton』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

HTML
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Monoton', cursive; font-size: 120%; }[/box]

『Freckle Face』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

[box class="blue_box"]CSS
@import url(https://fonts.googleapis.com/css?family=Freckle+Face);

HTML
<link href="https://fonts.googleapis.com/css?family=Freckle+Face" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Freckle Face', cursive; font-size: 120%; }[/box]

『Nosifer』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

HTML
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet" />[/box]
次はただ追加すればOK。
[box class="blue_box"]CSS
.gf { font-family: 'Nosifer', cursive; font-size: 120%; }[/box]

『ニコモジ』

[aside type="normal"]サンプル
2017.09.20
RECOMMEND[/aside]

クリックでコードを表示

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

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

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

おわりに：コピペで簡単にストークの日付の数字と英語フォントを変更できる！

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

細部までこだわりたい人は是非試してみてください!

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

こちらの記事も人気です

STORK（ストーク）カスタマイズ！コピペでできるものまとめ

おすすめ関連記事

-ブログカスタマイズ

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