メニューのフォントをかっこよくする方法  最新Adobe Fontsの使い方【無料!】

猫でもわかるWordPress

あび

メニューの文字って、
なんかもっと目立つよう、かっこよく変えられないかな?

村重

それだったら!面白い機能があるよ!

私のメニューは今、こんなフォントですが

(お使いのパソコン・スマホによってフォントは異なります)

こんなデザイン文字に変えることできます!!

これは、Photoshop などで有名な「Adobe(アドビ)」のサービス
「Adobe font(アドビフォント)」を使っています。

Adobeに会員登録して、WordPressに設定すれば
カッコいいデザインのフォントが使えるようになりますよ。

設定の難易度はちょっと高め・・・ですが、
とっても面白いですよね、チャレンジしてみたい方はぜひ^^

Adobefont(アドビフォント)って何?

Adobe font(アドビフォント)ってそもそもなんなのか?
フォントと「Webフォント」について軽くご説明しておきますね。

フォントは買うものだった

フォントっていうのは、要するに文字のデザインのことですね。

明朝体、とかゴシック体、とか聞いたことあるかと思います。

パソコンやスマートフォンを買ったら
はじめからたくさんのフォントが入っているので
わざわざ文字のデザインを買おうなんて思わないかもしれませんね。

いろんな種類のフォントが開発されていて、
実は、買ったら何万円もするものもたくさんあるんですよ。

プロのデザイナーさんは美しいデザインフォントを
買い揃えてお仕事したりもしているんですよ。

ただ、購入したフォントは自分のパソコンでしか使えないので
グラフィックデザインに使うのがメインで
ホームページ・ブログの文字には使えない
という欠点がありました。

画像にするのはもちろんOKですが、「テキスト」として使っても
フォントが入っていないパソコンでみると、普通の文字で表示されてしまいます。

そこで「Webフォント」というのが考え出されました。

Webフォントは、美しい文字のデザインデータをインターネット上から読み込めるので、

どのパソコンでもデザインフォントが使えるようになりました。

Adobe Fontのおかげで【使える】ようになった

Webフォントが出たばかりの頃は、

インターネット上からデータを読み込むので
ページの表示が遅くなってしまう、という欠点があったり

そもそも、Webフォントに用意されているのはアルファベットばかり
日本語がほとんどなくて
日本人の私たちには、あまり活用できる場面がありませんでした。

しかし、ついに

Adobeが日本語100種類ものWebフォントを公開してくれたんです!
(2018年11月から)

すごい!!!

しかも、そのうち、7種類は無料で使えます!
(全部使うには、Adobeの月額契約が必要です)
Adobeさんありがとう!

どんなフォントが使えるか、ご紹介していきますね。

無料で使えるフォント7種類

源ノ角ゴシック

源ノ角ゴシック CJK

貂明朝

源ノ明朝

平成角ゴシック Std

平成丸ゴシック Std


平成明朝 Std

以上、7種類です。

ベーシックなものが多いですが、使いやすそうですね!

続いて設定の仕方をご案内していきますね。

AdobeフォントをWordPressに設定する手順

設定する手順は以下の4ステップです。

1)Adobeに会員登録する

2)好きなフォントを選ぶ

3)WordPressに組み込む

4)CSSをつける

3がちょっと難しいかな、と思いますが
ぜひチャレンジしてみてください!

1)Adobeに会員登録する

まずこれは簡単ですね^^

こちらがAdobeFontのサイトです
https://fonts.adobe.com/fonts

開くと、右上に「ログイン」があるのでクリックしてください。

ログイン画面が出たら、

メンバーではない場合は・・・の横の「AdobeIDを取得」をクリックします

すると、新規登録画面になります。

必要事項を入力して、
「Adobe IDを取得」をクリックすれば会員登録は完了です。

2)好きなフォントを選ぶ

会員登録するとAdobeFontsのページに移動しています。

「フォントを参照」という青いボタンをクリックしてください。

フォント一覧の画面では、まずは英語が表示されています。

右上の「日本語モード」をクリックして
表示を日本語だけに切り替えてください。

すると、先ほどご紹介した7種類のフォントが出てきます。

使いたいフォントのハートマークの右にある「</>」をクリックしてください。

すると、Webプロジェクトにフォントを追加という画面が出てきます。

「プロジェクト名」は、何を入れてもOKです。
どの企画・サイトで使ったものかを
自分で管理するために使います。

私は「猫でもわかる」と入れてみました。

これでフォントを使うためのコードがGETできました!

右上の「■と□が重なったようなマーク」がコピーボタンです。
こちらをクリックしておいてください。

※ この辺からちょっと難しそうになってきますが
基本的にはコピペするだけなので、諦めずに是非頑張ってみてください。

・コードをコピーする

—-こんなコードがコピーされました。

<script>
(function(d) {
var config = {
kitId: ‘ここがあなただけのIDになります。‘,
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,””)+” wf-inactive”;},config.scriptTimeout),tk=d.createElement(“script”),f=false,s=d.getElementsByTagName(“script”)[0],a;h.className+=” wf-loading”;tk.src=’https://use.typekit.net/’+config.kitId+’.js’;tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=”complete”&&a!=”loaded”)return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>

あとで使うので、メモ帳などに一旦保存しておいてください。

・CSSをコピーする

もう一つ使うコードがあります。

今度は「プロジェクトを編集」をクリックしてください。

その中に、「CSSをコピー」と書いてあるので
その下のボタンをクリックしてください。

ーーーこの文字の場合、こんなCSSでした。

font-family: ten-mincho, serif;
font-weight: 400;
font-style: normal;

CSSもあとで使いますので、これもメモ帳などに保存しておいてください。

コードが2つ保存できたかと思います。

これで材料はそろいました^^

WordPressに組み込んで行きましょう。

・注意事項

ここからは、テーマにコードを貼り付けるので
操作を間違えないようご注意ください。

貼り付けるだけなので、操作は簡単ですが、
操作を間違えて必要なところを消してしまったりすると
サイトを壊してしまう恐れがあります。

必ずバックアップを取ってから行い、
次の手順を読んでみて、操作が不安な方は得意な方にお願いしてくださいね。

3)コピーしたコードをはりつける

WordPressの管理画面から
「テーマの編集」に入ってください。

右上に、テーマを選択するメニューがあります。
ここで、今使っているテーマの子テーマを選択してください。

すると、テーマのファイルがいろいろ表示されますので
「テーマヘッダー」をクリックします。

</header>と書いてあるところを探してください。

</header>の上にコードをコピーしますので

わかりやすいように2段改行して隙間を作りましょう。

そして、1回目にコピーしていたコードを貼り付けます。

貼り付けたら、「ファイルを更新」で保存してください。

これで文字を使う準備ができました。

CSSをはりつける

続いて、もう一つのコード、cssを貼り付けます。

「どのテーマで、どこにWebフォントの文字を使いたいか」によって異なるのですが

ここではテーマ「lightning」で
メニューの文字を変える場合を例にしてお話しします。

lightningのメニュー文字に
CSSをつけるには、

—-

ul.gMenu a {

}

—-

を使います。

この{}の中に、2つめにコピーしたコード、
CSSをはりつけます。

—-

ul.gMenu a {
font-family: ten-mincho, serif;
}

—-

これでコードが完成しました。

CSSカスタマイズにはりつけると・・・

文字が変わりました!!!!

文字の変更の手順は、以上になります。

AdobeFont使用時の注意事項

以前は、PV数などに上限があったのですが
AdobeFontがバージョンアップして、制限がなくなり、使いやすくなりました^^

子テーマに貼り付けよう

テーマのヘッダーにコピーするため、親テーマのヘッダーに貼り付けると、
テーマがバージョンアップした時に消えてしまいます。

まぁまた同じコードをヘッダーにコピーすれば良いのですけど、
忘れがちなので、このカスタマイズをするときは、
子テーマをご用意することをオススメします。

お客様のサイトには使えません

私は有料会員になっているので、100種類の多様なフォントが使えます。

なので、お客様のサイトの文字を
自由に変えてあげられる・・・と思ったんですが、

残念ながら、使えるのは「自分のサイト」のみでした。
納品するサイトには使えないそうです。残念。。

Adobeを解約したら元に戻ります

コードは登録した会員ごとに発行されているので
もし解約したら、コードが無効になり元の文字にもどってしまいます。

無料会員なら良いのですが、有料契約を解約するときは、ご注意ください。

ちょっと手間はかかりますが、無料で日本語のWebフォントが
たくさん使えるようになったのはとても画期的なことだと思います^^

ご興味ある方は是非。