【Webフォント】をご存じですか？
通常、フォントと言えばパソコンの中に保存されていて、ワードやエクセルなどで自分が使いたいフォントに変更したり、インストールしますよね。
じゃあ、ウェブサイトでフォントを変えたい場合はどうしたらいいんだろう？？ということで思い立ちました。
どうやら、ウェブ上にフォントのデータが公開されていて、それを自分のサイトでも利用することができるというわけです。
もちろん、自分だけでなく誰が見ても同じフォントに見えるようになります。
今回はそのうちのGoogleが提供しているGoogle Fontを使ってブログのタイトルを表示する方法をご紹介します。
※Cocoonのテーマでご紹介します。
設定方法
フォント自体をサイトやパソコンにインストールすることは全く不要です。
設定したいフォントを探す
まずは、Google Fontのページを開きます。
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
続いて、使用したいフォントを探します。
Languages ⇒ Japanese
フォントを選択する
1. 使いたいフォントを見つけたら、フォントの右上の+ボタンをクリックします
2. 選択すると、画面の下にボックスが表示されるので、その右上のーをクリックします。
クリックすると、フォント情報とウェブサイトに乗せるためのhtmlタグとcssコードが表示されます。
これらはあとで利用するので、今はそのまま置いておきましょう。
フォントの設定<html編>
さて、続いてはWordPress側で設定します。
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;
}
/*タイトルフォント*/
.site-name-text {
font-family: ‘Righteous’, cursive;
}
3. そしてファイルを更新をクリックし、変更を保存します。
タイトルビフォーアフター
変更前のタイトルはデフォルトでした。
それが、変更後は今回登録したフォントに代わりました。
たったこれだけですが、だいぶイメージが変わりますね！！
まとめ
というわけで、今回はタイトル部分のフォントの変更を行いました。
ロゴ画像を使ってもいいですが、こちらのほうが軽いしSEO的にも良いかと思います。
非常に簡単ですし、見出し部分とかでアクセントを入れたいときにも使えそうですね。
タイトル以外の部分はまた別のタイミングでご紹介します。
コメント