これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki Pro:Adobe のウェブフォント(Adobe Fonts)を適用する方法

このページでは、Nishiki Pro に Adobe から提供されているウェブフォント(Adobe Fonts)を適用する方法について解説しています。

今回は、Adobe Fonts の中から日本語フォントを適用してみましょう。

フォントを変更すると、ウェブサイトの雰囲気がガラッと変わります。一気にかっこよくなりますね!

Nishiki Pro に Adobe Fonts を適用する方法

Adobe Fonts のウェブサイトで「日本語」と検索 すると、下のように一覧が表示されます(要ログイン)。

次に、使いたいフォントを選び、コード埋め込みのアイコン「</>」を選択してください。

プロジェクト名を作るか既存のプロジェクト名を選択します。

プロジェクト名はわかるようにつければ OK だと思います。「作成」ボタンを押しましょう。

下の画像のようにコードが表示されれば OK です。

※選択したフォントによって埋め込みコードの内容が変わりますので、注意してください。

次は、このコードを Nishiki Pro テーマに設定しましょう。

スクリプトを追加しよう

まず、下の画像の埋め込み用のコードをコピーします。

次に、ワードプレスの管理画面から「Nishiki Pro」→「一般設定」を選択し「スクリプト追加」のタブを選択します。

下の画像のように「出力を有効にする」にチェックを入れて、コピーしたコードを貼り付けましょう。

font-family の設定

次に、font-family を設定します。下の画像中の font-family の値(今回の例では「ta-kai-regular, sans-serif」)をコピーします。

ワードプレスの管理画面から「Nishiki Pro」→「一般設定」を選択し「フォント」タブを選択します。

下の画像のように、コピーしたコードを貼り付けます。

以上で作業完了です。

Adobe Fonts がウェブサイト全体と、ブロックエディターの編集エリアに適用されます。

Adobe Fonts の指定に加え、Windows や Mac などに標準で入っているシステムフォントも合わせて指定するのもいいと思います。

ぜひやってみてください!

このページが役に立ちましたら、ぜひシェアしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。