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

 


あび

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

 


村重

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

 

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

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

 

この設定をすると・・・こんな文字に変えられます!!

(しかも、誰にでも同じに見えるように!)

 

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

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

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

 

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

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

 

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

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

明朝体、とかゴシック体、とか聞いたことありませんか?

パソコンやスマートフォンを買ったら
はじめからたくさんのフォントが入っているので
当たり前のように使っているかと思います。

もっといろんな種類があって、
実は、買ったら年間何万円もするものもあるんですよ。

プロのデザイナーさんは美しいデザインフォントを
買い揃えないとお仕事にならなかったりもします。

ただ、購入したフォントは
インターネットでは使えないという欠点があります。

自分のパソコンでしか使えないので
インターネットで買ったフォントを使うには
画像にして保存するしかありませんでした。

ブログの本文や、
メニューの「文字」として使うことはできなかったんですね。

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

美しい文字のデザインデータを
インターネット上で共有するサービスです。

webフォントを使えばどこから誰が見ても、
かっこいいデザインのフォントで表示されるようになるんです。

 

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

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

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

そもそも、日本語がほとんどなくて
正直使えたものではありませんでした。

 

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

すごい!!!

しかも、そのうち、7種類は無料で使えます!
(全部使うには、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プロジェクトにフォントを追加という画面が出てきます。

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

サイト名でも、会社名でも、なんでも構いません。

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

 

これでフォントを使うためのコードが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を貼り付けます。

どのテーマで、どこに文字を使いたいか、によって異なるのですが

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

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

—-

ul.gMenu a {

}

—-

を使います。

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

 

—-

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

—-

 

これでコードが完成

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

 

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

 

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

 

AdobeFont使用時の注意事項

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

 

子テーマに貼り付けよう

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

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

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

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

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

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

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

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

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

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

ご興味ある方は是非。

 

WordPressに関するご質問にお答えします。
こちらのフォームから
お気軽にお寄せください^^
https://wp-firststep.com/questionbox/