Amazonチャージで最大2.5%還元

WordPressテーマ「STORK」のヘッダーフォントを変更してみよう

ヨノイ

STORKのヘッダーフォントを変更したい!
やり方を教えて!

そのようなお悩みにお応えします。

当ブログはWordPressで運営しているのですが、開始当初は「STORK」という有料テーマを使用していました。

STORKはデザイン性は高いのですが、ブログの方向性によってはデザインの雰囲気とあわないことも出てきます。

特にデフォルトのヘッダーフォントはちょっとかわいい感じなので、ブログのジャンルによっては他のフォントへ変えておきたいところ。

ヘッダーフォントの変更は難しくありませんので、ぜひこちらの記事を参考に試してみていただければと思います。

「STORK」とは?

STORK(ストーク)」とは、WordPressの有料テーマを配信しているOPENCAGE(オープンケージ)さんが制作した人気テーマのひとつ。

ブログマーケッターのJUNICHIさんが監修されており、スマホでの見やすさにこだわったモバイルファースト設計と美しいデザインが特長です。

OPENCAGEでは他にも「スワロー」や「ハミングバード」などのテーマを販売しています。

どれもかなりおしゃれなテーマなので、WordPress導入を検討されている方は一度チェックしてみるのがおすすめです。

「STORK」のヘッダーフォントとは?

今回変更したいフォントはトップページのこの英字部分のことです。「Happy WordPress Blog」と表示されているところですね。

STORK:ヘッダーフォントの変更

デフォルトのフォントではかなりかわいらしくポップなフォントが採用されています。

サイトカラーもデフォルトはシアン系をベースにしているので、統一感はあったりするのですが、このように落ち着いた色調を採用すると、

ストーク:ヘッダーフォントの変更

若干違和感が出ます。

そこで、このフォントを変えてしまおうというというのが今回の計画です。

ヘッダーフォントの変更はGoogleフォントを利用しよう

使用できるフォントについては、「内部フォント」の指定と「Webフォント」の指定の2種類があります。

簡単に説明すると、内部フォントとはPCやスマホのブラウザに搭載されているフォントのことです。

内部フォントを指定した場合、表示されるフォントは内部フォントが優先されます。

一方、Webフォントとは、Web上で公開されているフォントを指します。

Webフォントを指定した場合、内部フォントと比較してWebフォントを優先的に読み込んで使用します。

それぞれにメリット、デメリットはありますが、今回は後者の「Webフォントの指定」で設定を行います。理由は、単純にデザインがよく、種類も多いからです。

今回はWebフォントのひとつ、「Googleフォント」を利用することにします。

Googleフォントの使い方と追加CSSへの設定方法

Googleフォントはこちらで公開されています。

https://fonts.google.com

かなり数が多いので、好みのフォントを一から探すのは困難です。

人気フォントを紹介してくれているサイトを参考にしてもよいかと思います。

https://kinsta.com/jp/blog/best-google-fonts/

具体的な手順については下記のサイトの手順通りに進めます。

https://saruwakakun.com/html-css/basic/google-fonts#section2

CSSで利用するので、この手順の中の「【参考】CSSから読み込む場合」にあるとおり、@importをクリックして表示されたコードをコピペして使用します。

とりあえず表示された内容をそのままコピペしておきます。

WordPressの「追加CSS」へは、上記の記事などを参考に、下記のとおり記入します。

@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
h2.en.gf{font-family:'Roboto', sans-serif; font-size: 2.3em !important;}

太字の部分がフォント名を指定している箇所です。

1行目は@インポートからのコピペをそのまま使うとして、2行目の太字の部分はフォント名ですので、1行目のフォント名にあわせて書き直す必要があります。

また、font-sizeは文字の大きさなので、自分のイメージあった大きさに変えてもOKです。

まとめ

実際に変更してみました。

ストーク:ヘッダーフォントの変更

Robotoを使用してみたのですが、デフォルトに比べるとカタくなってしまいますね。

やはり、実際に変えてみるとかなり印象が変わります。

大文字小文字、細字太字の違いでも雰囲気はかなり異なってきますので、いろいろ試してみるのがおすすめです。

コメントを残す

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