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

 


あび

メニューの文字が、なんかださくて
気に入らないんだけど変えられないのかな?

 


村重

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

 

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

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

 

面白いですよね。

 

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

会員登録して、WordPressに組み込めば
カッコいいデザインのフォントを使えるようになりますよ。

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

 

Adobefont(アドビフォント)とは

まずは「Webフォント」について

フォントのデザインは、
パソコンにはじめから入っているので、
あまり意識したことはないかもしれませんね。

でも、デザイナーさんは、
美しいデザインのフォントを
わざわざ何万円も出して買ってしているんですよ。

それくらい、文字のデザインって重要なんですね。

でも、今までは、
買ったフォントの場合は、買った人しか使えないので、
ブログで使うことができませんでした。

そこで考え出されたのが
「Webフォント」

インターネット上でフォントのデータが共有されているので
同じフォントを持っていない人でも、
インターネット上からフォントのデータを読み込んでくれるので、

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

Adobe Fontがすごい理由

でも、毎回読み込むので表示が遅くなる、とか、
日本語がほとんどない、とか、いろいろ問題があったんですが

ついに・・・!

この度、2018年11月から、
Adobeが日本語で100種類ものWebフォントを公開してくれました^^

すごい!!!

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

「プロジェクト名」はなんでも構いませんよ。
日本語でもOKです。

サイト名でも、会社名でも、私は「猫でもわかる」と入れてみました。
名前が入ったら、「作成」をクリックしてください。

 

2個のフォントが追加されました!
わーい。

これでコードが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をコピー」と書いてあるので
その下のボタンをクリックしてください。

この画像のように、フォントが複数あるときは、
使いたいフォントの横にある□■ボタンをクリックしてくださいね。

これで、CSSがコピーできました。

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

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

 

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

3)WordPressに組み込む

これで、設定と材料はそろいました^^

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

ここからは、テーマの編集をしますので
念のため注意事項をお伝えしておきますね。

【注意事項】

・バックアップを取ってから行うこと
・編集が不安な方は、FTPソフトで行うこと
・テーマがバージョンアップすると消えるので、子テーマに適用させること

不安な方は無理せず、得意な方に相談してみてください。

 

まずはどんな手順なのかを説明しますね。
一度終わりまで読んでみてください。

組み込み方は、テーマlightningを例にしてご案内します。

 

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

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

 

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

 

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

 

複雑なプログラムが書いてありますが、
一番下まで下げて、</header>と書いてあるところを探してください。

</header>の上にコードをコピーしますので
わかりやすいように2段改行して隙間を作りましょう。

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

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

 

CSSをはりつける

続いて、cssを貼り付けます。

lightningのメニューの場合、CSSは

 

—-

ul.gMenu a {

}

—-

です。

この{}の中に、2つめにコピーしたCSSを入れます。

 

—-

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

—-

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

 

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

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

 

AdobeFont使用時の注意事項

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

ですが、以下の点には注意が必要です。

子テーマに貼り付けよう

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

自分のサイトにしか使えません

無料会員だと、日本語は7種類しか使えません。

私は有料会員になっているので、100種類の多様なフォントが使えるので
お客様のサイトのカスタマイズに使ってあげられたら、と思ったのですが

残念ながら、使えるのは「自分のサイト」のみでございました・・・。

Adobeを解約したら使えなくなります

無料会員なら気にすることはありませんが、
私のように有料会員で、喜んでフォントを使いまくっていると、

もし解約したら、今まで設定したものは全て元に戻ってしまいます。

 

以上の点にご注意くださいませ。

今、Adobeの有料会員で、
これからもずっと有料会員として使うつもりの方は
遊んで見ても面白いのかなと思います。

カスタマイズご希望でしたらご用命ください^^

Follow me!

 

WordPressに関するご質問にお答えします。お気軽にお寄せください^^