みなさん、WordPressでブログやってますか？
ブログ運営に慣れてくると、デザインが気になってきますね。
そうなると、おしゃれな文字を使ってみたくなるのが人情ってもんです！
たとえば、下の画像のようなフォントだって表示させることができるんです！
上の例はちょっと斬新ですが、実際にこうした文字なんかを簡単に表示できるんです。
他のサイトとは一味違った雰囲気を演出できそうで楽しいですよね。
これはどうやって表示させているかというと、無料のGoogleフォントを利用してます。
このGoogleフォントには主にアルファベットですが、上の画像のような日本語フォントや手書き風のものもあります。
また、色やサイズも調整できるので重宝すること間違いなし！
Webフォントなので、使用する端末によって文字化けすることもありません。
え？使うのが難しそう？
画像付きで丁寧に、そして難しい設定をなるべく避けながら、最短距離で説明していきます！
また、『Webフォントって何ぞ？』なんていう、そもそも論は可能な限り省略して、単刀直入に本題に入ります。
900種類以上の様々なフォントを使用できる『Google Fonts』を使いこなしましょう！
無料・超絶おしゃれフォントのための作業概要
まずはどんな作業が必要なのか、ザックリとその概要を説明します。
- 手順１．Google Fontsにアクセス
- 手順２．お好みのフォントに関するコードをコピー
- 手順３．WordPressの該当箇所にコピーしたコードを貼り付け
- 手順４．完成！
googleフォントの使い方：準備するもの
さて、いよいよ下準備にとりかかります。最初は時間がかかりますが、慣れれば２、３分でできますよ。
手順１．Google Fontsにアクセス
まず、『Googleフォント』などの文言で検索してGoogle Fontsのサイトにアクセスしましょう。
すると下のような画面が表示されます。
赤枠の『Sentence』欄に任意の文章を入力すると、実際の表示状態をプレビューすることができます。なお、日本語を入力したときにプレビューされないフォントは、日本語に対応していませんのでご注意ください。
手順２．フォントに関するコードをコピー
たくさんあるフォントの中から気に入ったものがあったら、そのフォントをクリックしてください。するとこんな画面になります。
今回の例では、『Alata』というフォントを選びました。
次に、赤枠内の『+ Select this style』をクリックしましょう。この時、フォントサイズや色などは気にしなくてもOKです。後で自由に設定できます。
すると、右にニョキっとサイドバー表示されますので、赤枠の『Embed』タブを押してください。
そして下の画像のように、『Embed』タブ内には<link>と@importの二つがあるので、<link>をクリックします。
その結果表示されているのがgoogleフォントを利用するために必要なコードです。
上の画面は開いたままにしておいてくださいね。この後の手順において、この画面とWordPressの設定画面を数回ほど往復します。
はい、とりあえず下ごしらえは完了です。お疲れさまでした。
いざ、Googleフォントを使う！無料でおしゃれな手書き風フォントまでもう少し。
さて、これからいよいよ、表示設定を行っていきます。
手順が少し多めですが、もう一息ですので頑張りましょう！
手順３．WordPressの該当箇所にコードを貼り付け
Googleフォントのコードを貼り付ける
WordPressをお使いの方ならおそらく、子テーマを使用していると思います。
ダッシュボードの『テーマエディター』から、子テーマのheader.phpファイルを開きましょう。この時、念のためにheader.phpのバックアップを取っておきましょう！
さて、子テーマのheader.phpファイルを開いたら、先ほどの<link>のコードをコピーしてください。
コピーした内容は、子テーマのheader.php内の<head>タグ内の任意の場所に貼り付けてください。
私は<head>タグの一番お尻の部分である</head>のすぐ上に貼り付けました。この作業により、Googleフォントの読み込みが完了します。
ウィジェットを開く
<p style=”font-family: ‘Alata’, sans-serif;“>ABCDE</p>
<p style=”font-family: ‘Alata’, sans-serif; font-size: 60px; color:#ffffff;”>ABCDE</p>
<p style=”font-family: ‘Alata’, sans-serif; font-size: 60px; color:#ffffff;”>ABCDE</p>
もちろん、子テーマのheader.php内に追加した箇所も消しましょう。
そのままでも害はありませんが、残しておく理由もありませんし、コードがグチャグチャして気持ち悪くなってしまいます。
googleフォントの使い方：番外編
また、当ブログではブログ初心者の方向けの記事もありますので、こちらもぜひご覧ください。
コメント