WordPressでブログのフォントをWebフォントに変えてみよう!

Webフォント|アフィリエイト主婦

Webフォント|アフィリエイト主婦

ブログを運営するときに一番大切なことは「記事を書くこと」ですが、やっぱりちょっとデザインもキレイにしたいですよね。

私も、カスタマイズにあまり時間をかけ過ぎないように気を付けつつ、ああでもないこうでもないとデザインを編集しています。
デザイン編集はするものの、ずっと気になっていた箇所がありました。

それは、読者が一番目にするところ。

文字のフォントです。

今までのフォントはなんとなく味気ないと感じていたので、もっとやさしくまるみのあるフォントにしたかったのです。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] さっそくググってみたところ、発見![/say]

「Webフォント」というフォントを使えば、どの端末で閲覧しても見られるフォントになるということを…。

というわけで、今回はWordPressでWebフォントを導入する方法についてのお話です!

フリーフォントを使ってアイキャッチ画像を作ろう!

WordPressでリンクアイコンを表示したい…FontAwesomeの使い方

もくじ

Webフォントとは

文字|アフィリエイト主婦

「Webフォント」とは、ウェブ上に置かれたフォントファイルを使って、ウェブサイト(ブログ)にフォントを反映させるものです。

…さくっと一行で説明しようと思ったら、ものすごくわかりづらくなってしまいました…。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] ちょっと詳しく説明しますね[/say]

本来、ウェブサイト(ブログ)でフォントを指定する場合は、「そのウェブサイト(ブログ)を見ている端末にインストールされているフォントに依存する」のが普通です。

例えば、私は「かんじゅくゴシック」というフリーフォントが好きなのですが、ブログの文字を「かんじゅくゴシック」で表示させたいとします。

ブログのフォント指定をCSSで「かんじゅくゴシック」にしても、ブログを見ているあなたのパソコンやスマホに「かんじゅくゴシック」がインストールされていなければ適用されないのです。

これは昔、HTMLベタ打ちでホームページを作っていた時から悩ましかったです。
もっと自分らしいフォントにしたいけど、すべての人がそのフォントで閲覧できるわけじゃない。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 結局、見出しとかは画像に頼らざるをえなかったんですよね…[/say]

それが今は「Webフォント」があるので、可能になりました!
基本的に誰が見ても同じフォントで表示されるというのは、画期的です。

Webフォントを反映させるのに必要なものは、ウェブサイト(ブログ)を編集できる環境だけ!
ウェブサイト(ブログ)の設定を変えるだけで、あっという間にフォントを変更できます。

私もつい先日Webフォントを指定したのですが、感動しました!
パソコンで見ても、スマホで見ても、タブレットで見てもおんなじフォントです。

ウェブフォント|アフィリエイト主婦

今回「Kosugi Maru」というフォントにしてみました。
すこーし丸っこくなりました!…よね?

Webフォントを使うデメリット

バツ|アフィリエイト主婦

それならみんなWebフォントを使えばいいじゃない!と思ったのですが、ものごとにはメリットがあればデメリットもあるわけで…。
Webフォントも例外ではありません。

Webフォントのデメリットとしてあげられるのは、「ブログの表示速度が遅くなる」点です。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 簡単にWebフォントが表示されるしくみを説明しますね[/say]

ブログにWebフォントを呼び出すコードを貼り付けると、ページを開くときに指定したWebフォントも読み込むことになるので、表示速度が遅くなるのです。

とはいっても今はそこまで遅くならないようなので、そこまで気にすることはないかもしれませんけどね。

それからもうひとつデメリットをあげるとすると、指定したWebフォントが反映されない人もいるということです。

なんで?みんなが指定フォントを見られるのがWebフォントじゃないの??

基本的にはそうなんですが、ウェブブラウザの設定で「ウェブサイトからのフォント指定を無効にする」を設定があるそうです。

これに関しては打てる手はないので、仕方ないと諦めましょう…。

他に考えられるデメリットとしては、Webフォントを使用するにあたってお金がかかることです。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] …おっと、待ったぁ![/say]

「じゃあもういいや」って画面を閉じようとしたあなた、無料で使えるWebフォントもあるのでご安心ください

Webフォントをブログで使うには、「Webフォントサービス」を利用しなければなりません。
Webフォントサービスを利用するには、使用料金を支払わなければならないケースがほとんどです。

が!

無料で使えるWebフォントサービスもあるんですよ~!

その名もGoogle Fonts

Googleの提供するWebフォントサービスで、種類は少ないのですがちゃんと使えます。
というか今このブログでも使ってますからね!

次の項目では、Google Fontsを使ってWebフォントを使う方法を解説!

WordPressでWebフォントを指定するには

キーボード|アフィリエイト主婦

では、いよいよWebフォントを指定してみましょう!
今回はWordPressで指定する方法ですが、HTMLやCSSの編集方法がわかれば他のブログサービスやウェブサイトでもできます。

ではまず、Google Fontsにアクセスします。
フォントの一覧が表示されるのですが、日本語フォントと英語フォントが混在して見づらいので、日本語フォントだけ表示します。

右側のメニューに「Languages」の項目があるので、「Japanese」を選択

ウェブフォント|アフィリエイト主婦

すると日本語フォントだけが表示されるので、好きなフォントを決めてください
好きなフォントが決まったら、右上の「+」をクリックします。

ウェブフォント|アフィリエイト主婦

画面の下に謎の黒いバーが出現するので、バーの右側にある「-」をクリック

ウェブフォント|アフィリエイト主婦

ウィンドウが開きます。
真ん中にあるテキストエリアに「<link href=~」で始まるコードが表示されるので、これをブログのヘッダに貼り付けます。

ウェブフォント|アフィリエイト主婦

では、コードの貼り付け方です。
WordPressの「header.php」を開きます

左側メニュー > 外観 > テーマの編集 > ブログヘッダー(header.php)

コードがずらーっと出てきますが、「<head>」タグを探してください。
<head>の真下に先ほどGoogleFontsで取得したコードをコピペして「ファイルを更新」ボタンで保存します。

<head>
<link href="https://fonts.googleapis.com/css?family=フォント名" rel="stylesheet">

こんな感じになっていたらOKです。
次はCSSの編集!

Google Fontsの画面に戻って、先ほどコピーしたコードの下にあるCSSコードをWordPressのCSSに貼り付けます。

ウェブフォント|アフィリエイト主婦

ではWordPressに戻って、同じくテーマの編集から、「style.css」を開きます。
style.cssの一番下にCSSコードをコピペするのですが、コピペするテキストを「body{}」で囲って入力してください。

body{font-family:'フォント名';}

こんな感じになっていればOKです。
入力出来たら「ファイルを更新」ボタンで保存します。

おつかれさまでした!Webフォントの指定の手順は以上です。
自分のブログを表示させてみてください。

どうですか?変わってますか?
これ、表示された瞬間「うわああ!すごい!!!」となります(笑)

Webフォントでおしゃれなブログを目指そう!

人差し指|アフィリエイト主婦

今回はひょんなことからWebフォントの存在を知りましたが、自分のブログに使うことができて本当に良かったです。
普通に自分のブログを見るのがちょっと楽しみになりました。

内容が一番大事なんですけど、ブログのイメージを読者に伝えることも大切だと思うんですよね。
女性向けなら優しいフォント、男性向けならシンプルなフォント。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 読んでいる人が自然と親しみやすやすさを感じてくれたらいいですよね[/say]

設定も簡単なので、「なんかこのフォント自分のブログの雰囲気と違うんだよなぁ」と思っているならやってみてはいかがでしょうか?

前の記事

朝活|アフィリエイト主婦
ブログを書く時間がなければ朝活しよう!

次の記事

あなたは大丈夫?Twitterカードが正しく表示されていないか…
Twitterカード表示されてないかも?|アフィリエイトし