実質半額!楽天スーパーDEAL 50%ポイントバック アイテム一覧はこちら >
楽天市場24時間限定アイテム!

有名ブランド品が満載!毎日10時更新。

詳しくはこちら

【Cocoonカスタマイズ】Adobe Fonts(Webフォント)の導入方法

Web・副業・パソコン

CocoonでAdobe Fontsを自由に使いたい!

僕のこのブログで使っているWordPressの無料テーマ「Cocoon」。あまりにも高機能でカスタマイズの幅も広く「本当にこれ無料でいいの?」と思うほどです。フォントの設定もデフォルトで可能ですが、以下の組み合わせから選択するようになっています。

  • 游ゴシック,ヒラギノ角ゴ
  • メイリオ,ヒラギノ角ゴ
  • MS Pゴシック,ヒラギノ角ゴ
  • 源ノ角ゴシック(Webフォント)
  • Mplus 1P(Webフォント)
  • Rounded Mplus 1C(Webフォント)
  • はんなり明朝(Webフォント)
  • こころ明朝(Webフォント)
  • さわらびゴシック(Webフォント)
  • さわらび明朝(Webフォント)

この中に好きなフォントがあればそれを選択してもいいのですが、ここにはないフォントでブログを表示させたい場合、カスタマイズが必要です。今回はAdobe Fontsの中から日本語フォントを指定したい場合のカスタマイズ方法を説明します。

「Adobe Fonts」はAdobeが提供しているフォントライブラリーですが、「Adobe Creative Cloud」に契約しているとすべてのフォントが使用可能です。
Adobe Creative Cloud無償メンバーシップでもいくつかのフォントを使用可能です。日本語フォントでは「源ノ角ゴシック」「源ノ明朝」「平成角ゴシック Std」「平成丸ゴシック Std」「平成明朝 Std」「貂明朝」など。また、Webフォントの使用も可能
ハイクロ
ハイクロ

ただし、この記事で使用している画像や流れは有料プランのものです。
無償メンバーシップのものとは違うかもしれません。

CocoonでAdobe Fontsを導入する方法

1.Adobe Fontsにログイン後、[マイWebプロジェクト]をクリック

まずは、Adobe Fontsにログインします。ログイン後、[Typekit Webフォント]へ移動し、上図のとおり[マイWebプロジェクト]をクリックします。

2.使いたいフォントをさがす

[フォント一覧]から、使いたいフォントをさがしましょう。本文で使うフォントなら、分類はゴシックがおすすめです。

使いたいフォントがあったら、そのフォントの「</>」のアイコンをクリックします。

3.[Webプロジェクトにフォントを追加]で[+新規プロジェクトを作成]をクリック

画面が暗転し、[Webプロジェクトにフォントを追加]という画面が出てきます。1つめのフォントを追加するなら、上図のように[+新規プロジェクトを作成]を選択します。

4.任意のプロジェクト名を入力し[作成]をクリック

プロジェクト名はAdobe Fontsの管理画面内で自分が分かりやすい名前を入力します。その後、右下にある[作成]ボタンをクリックします。

5.コード2種類をメモ帳などにコピペしておく

コードが2種類表示されます。これらはそれぞれ管理画面でペースト(貼り付け)することになるので、メモ帳にでもコピペしておきましょう。

ハイクロ
ハイクロ

WordPressの画面を新規タブで開くなら、別にメモ帳にコピペしなくてもかまいませんが、この画面は閉じないでください。

6.WordPressの管理画面でコードを入力(スクリプト部分)

さて、もう少しです。今度はWordPressの管理画面に切り替え、[Cocoon設定]>[アクセス解析・認証]の中にある、[ヘッド用コード]に先ほどのコードのうち上のほうのものをペーストします。

ペーストしたら、[変更をまとめて保存]をクリックして保存。

7.WordPressの管理画面でコードを入力(CSS部分)

つぎに、[外観]>[カスタマイズ]>[追加CSS]と進み、2つのコードの下のほうのものをペーストするのですが、ここでセレクタを指定する必要があります。セレクタとは、このスタイルを適用する要素のことです。今回は、サイト全体にAdobe Fontsを適用させてみましょう。

body #container {
	コピーしたコードをここに入れる
}

本来は「body」だけでページ全体を指定するセレクタになるんですが、Cocoonのデフォルト設定に上書きされてしまうので、「body #container」というセレクタにして、{}コードを括ります。

8.【完了】サイトを確認(ログアウト必須?)

設定が終わったら、ログアウトした状態でサイトを確認してください。僕のブログではログイン状態でサイトを見ると反映されませんでした。

フォントの使いすぎに注意!

Adobe Fontsにはたくさんのフォントがあり、あれもこれも使いたくなりますが、フォントをたくさん使いすぎると読み込みに時間がかかるようになります。日本語のフォントは多くても2つぐらい(本文用と見出し用)にしておくのがいいでしょう。

Web・副業・パソコンブログ運営
注文住宅の家づくり&雑記ブログ「ハイクロノート」
タイトルとURLをコピーしました