【コピペ18選】CSSでSTORK(ストーク)のヘッダーフォントをカスタマイズ

スポンサードリンク

みなさんこんにちは!かめりさです♡

今回は、WordPress有料テーマSTORK(ストーク)の「ヘッダーフォント」をカスタマイズする方法をご紹介します!!

18種類のフォントを私なりに厳選してみたので、お気に入りを見つけてみてくださいね♡

ヘッダーの場所はどこ?

ヘッダーとは、メニューの下のスペースのこと。ヘッダーのフォントとは、下の傍線のところのフォントを指します。

ストークにはもともとヘッダー機能が付いていて、クリックボタンや画像を挿入することが出来ます  🙂

ブロガーのあんちゃさんもクリックボタンと画像を使用されています。

画像

まじまじぱーてぃー

ストークを使っている人たちを見ても、そのままのデフォルトで使っている人が多いので、ブログのデザインにこだわりたかったらカスタマイズをすることをオススメします 😎

ヘッダーフォントがこんな風になるよ

実際に、私のヘッダーを例に挙げます 🙂

○デフォルトのまま

○カスタマイズした後

ヘッダー画像

日付も変わるよ

そして、日付のフォンとも同じく変わります♡

画像この手描き感がたまらない!(笑)

コピペする場所

コピペをする場所は、「外観→カスタマイズ→追加CSS」追加CSSにコピペします!
CSSのどの辺にコピペするのかは追って紹介しますね♡

CSS

それでは、フォントをご紹介しますね♡

フォントの種類18選

今回も、Google Fontを使っていきたいと思います。

Google Fontってなんだ?って思った人はこの記事に書いてあるので見てみてください♡

関連記事=【コピペ】CSSでカスタマイズ!STORK(ストーク)の本文のフォント6選

私は手描き感のあるフォントが好きなので手描き感の出るフォントをメインに取り上げたいと思います。

①を追加CSSの一番上に、②を追加CSSの一番下の欄にコピペしてきださい♡

※二つ選択はできません。一つのフォントを選んでください。

Pacifico

画像

@import url(https://fonts.googleapis.com/css?family=Pacifico);


.gf {
font-family: ‘Pacifico’, cursive;
letter-spacing: 0.1em;
}

Acme

画像

@import url(https://fonts.googleapis.com/css?family=Acme);


.gf {
font-family: ‘Acme’, cursive;
}

Walter Turcoat

画像

@import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);


.gf {
font-family: ‘Walter Turncoat’, cursive;
}

Ribeye Marrow


@import url(https://fonts.googleapis.com/css?family=Ribeye+Marrow);


.gf {
font-family: ‘Ribeye Marrow’, cursive;
}

Freckle Face

画像

@import url(https://fonts.googleapis.com/css?family=Freckle+Face);


.gf {
font-family: ‘Freckle Face’, cursive;
font-size: 120%;
}

Shadow Into Light

画像

@import url(‘https://fonts.googleapis.com/css?family=Shadows+Into+Light);


.gf {
font-family: ‘Shadows Into Light’, cursive;
}

 

Sacramento

画像

@import url(‘https://fonts.googleapis.com/css?family=Sacramento);


.gf {
font-family: ‘Sacramento’, cursive;
}

Homemade Apple

画像

@import url(‘https://fonts.googleapis.com/css?family=Homemade+Apple);


.gf {
font-family: ‘Homemade Apple’, cursive;
}

Covered By Your Grace

画像

@import url(‘https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);


.gf {
font-family: ‘Covered By Your Grace’, cursive;
}

Rock Salt


@import url(‘https://fonts.googleapis.com/css?family=Rock+Salt);


.gf {
font-family: ‘Rock Salt’, cursive;
}

Gochi Hand


@import url(‘https://fonts.googleapis.com/css?family=Gochi+Hand);


.gf {
font-family: ‘Gochi Hand’, cursive;
.gf {

Nanum Pen Script


@import url(‘https://fonts.googleapis.com/css?family=Nanum+Pen+Scrip)


.gf {
font-family: ‘Nanum Pen Script’, cursive;
}

Give You Glory


@import url(‘https://fonts.googleapis.com/css?family=Give+You+Glory);


.gf {
font-family: ‘Give You Glory’, cursive;
}

Sedgwick Ave


@import url(‘https://fonts.googleapis.com/css?family=Sedgwick+Ave);


.gf {
font-family: ‘Sedgwick Ave’, cursive;
}

Sedgwick Ave Display


@import url(‘https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display);


.gf {
font-family: ‘Sedgwick Ave Display’, cursive;
}

Princess Sofia


@import url(‘https://fonts.googleapis.com/css?family=Princess+Sofia);


.gf {
font-family: ‘Princess Sofia’, cursive;
}

TEKO


@import url(‘https://fonts.googleapis.com/css?family=Teko);


.gf {
font-family: ‘Teko’, sans-serif;
}

Russo One


@import url(‘https://fonts.googleapis.com/css?family=Russo+One);


.gf {
font-family: ‘Russo One’, sans-serif;
}


いかがでしたでしょうか?

フォントを変えるだけで雰囲気がガラッと変わりますよね♡

お気に入りのフォントをみつけて、誰にも真似できないヘッダーにしてみてはいかがですか? 🙂

 

 

スポンサードリンク

この記事をシェア♡

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です