【Word Press】Cocoonテーマでフォントを変更する方法【Google Font】

WordPress

【Webフォント】をご存じですか?

通常、フォントと言えばパソコンの中に保存されていて、ワードやエクセルなどで自分が使いたいフォントに変更したり、インストールしますよね。

じゃあ、ウェブサイトでフォントを変えたい場合はどうしたらいいんだろう??ということで思い立ちました。

どうやら、ウェブ上にフォントのデータが公開されていて、それを自分のサイトでも利用することができるというわけです。

もちろん、自分だけでなく誰が見ても同じフォントに見えるようになります。

今回はそのうちのGoogleが提供しているGoogle Fontを使ってブログのタイトルを表示する方法をご紹介します。

※Cocoonのテーマでご紹介します。

スポンサーリンク

設定方法

フォント自体をサイトやパソコンにインストールすることは全く不要です。

設定したいフォントを探す

まずは、Google Fontのページを開きます。

Google Fonts
Making the web more beautiful, fast, and open through great typography

続いて、使用したいフォントを探します。

日本語フォントだけを絞ることもできます。

Languages ⇒ Japanese

フォントを選択する

1. 使いたいフォントを見つけたら、フォントの右上の+ボタンをクリックします

 

2. 選択すると、画面の下にボックスが表示されるので、その右上のーをクリックします。

クリックすると、フォント情報とウェブサイトに乗せるためのhtmlタグとcssコードが表示されます。

これらはあとで利用するので、今はそのまま置いておきましょう。

フォントの設定<html編>

さて、続いてはWordPress側で設定します。

サイトのhtmlやcssを変更する際には必ずCocoonの子テーマを利用しましょう!
1. 設定画面 ⇒ 外観 を開きます。
 
2. 次に、tmp-user ⇒ head-insert.phpを開きます
 
3. そして、先ほどの開いたフォントのHTMLタグの部分のみを、表示されているタグの一番下にコピーペーストします。
 
4. そして、ファイルを更新をクリックします。
これで、htmlは完了です。
続いてCSSの設定です。

フォントの設定<css編>

1. CSSの編集は、同じ画面の「スタイルシート」をクリックします。
 
2. そのあと、開かれた画面に先ほどのGoogle Fontのcssを貼り付けます。
しかし、今回はそのまま貼り付けるだけではできません。
なぜならば、どこにそのフォントを適用するかを指定する必要があるからです。
 
今回はブログタイトルを変更したいので、
.site-name-text{ }
を指定します。
今回のフォントの例
/*タイトルフォント*/
.site-name-text {
font-family: ‘Righteous’, cursive;
}
また、今回の例のように/*タイトルフォント*/などのコメントを残しておきましょう。
あとからこのコードが何をしているかを後からわかるようになりますので、必ず入力しておきましょう。
3. そしてファイルを更新をクリックし、変更を保存します。
スポンサーリンク

タイトルビフォーアフター

変更前のタイトルはデフォルトでした。
 
それが、変更後は今回登録したフォントに代わりました。
 
たったこれだけですが、だいぶイメージが変わりますね!!
 
スポンサーリンク

まとめ

というわけで、今回はタイトル部分のフォントの変更を行いました。
ロゴ画像を使ってもいいですが、こちらのほうが軽いしSEO的にも良いかと思います。
非常に簡単ですし、見出し部分とかでアクセントを入れたいときにも使えそうですね。
タイトル以外の部分はまた別のタイミングでご紹介します。

コメント

タイトルとURLをコピーしました