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

ぱるろぐ

ブログカスタマイズ

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

投稿日:2017年9月20日 更新日:



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

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

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

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

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

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

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

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

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

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

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

カスタマイズ方法

ストークをカスタマイズしているぱる

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

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

[aside type="boader"]

[/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]

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

得意げなぱる

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

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

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

おすすめ関連記事

-ブログカスタマイズ

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