Diviテーマは世界で一番シェアされている、初心者でも扱いやすいビジュアルビルダーを搭載している、素晴らしいWordpressテーマですが、もともと英語のコンテンツを想定して設計されているため、日本語フォントがデフォルトで組み込まれていないのが問題です。

今回は、Google Fontsの早期アクセスを使って、簡単にDiviテーマに日本語のカスタムフォントを導入する方法をご紹介します。

まずは、ここをクリックして使いたいフォントを選びます。

Google日本語フォントをDiviテーマに導入する方法

まずはダッシュボードのDivi >> テーマのオプションをクリック。

DiviテーマオプションのIntegrationタブをクリック。

コードをブログのに追加するというセクションに、画像のように、使いたいフォントのコードをコピーアンドペーストします。

<!– ここから下のコードから、導入したいフォントをコピーアンドペースト –!>

M+1P: 

Rounded M+ 1c : 

はんなり明朝:  

こころ明朝: 

さわらび明朝: 

さわらびゴシック: 

ニクキュウ: 

ニコモジ: 

Noto Sans Japanese: 

画面下にある変更を保存ボタンをクリックして、設定を保存します。

次にGeneralタブをクリックして、一番下にあるカスタムCSSに、下のCSSのコードを以下のようにコピーします。赤文字で書いてある部分を、自分の使いたいフォントに変更します。

/*  ここから下をコピーアンドペースト */

body  {font-family: “Sawarabi Gothic“;}

M+1P: Mplus 1p

Rounded M+ 1c : Rounded Mplus 1c

はんなり明朝:  Hannari

こころ明朝: Kokoro

さわらび明朝:Sawarabi Mincho

さわらびゴシック:Sawarabi Gothic

ニクキュウ: Nikukyu

ニコモジ: Nico Moji

Noto Sans Japanese: Noto Sans Japanese

今回は、さわらび明朝に設定してみます。

変更前

変更後

モジュール毎にフォントを導入する。

ビジュアルビルダーを立ち上げて、テキストモジュールを追加してみます。

詳細タブ >> メイン要素に以下のコードを導入します。赤字の部分は自分の使いたいフォントに変更してください。

/*  ここから下をコピーアンドペースト*/

font-family: “Sawarabi Gothic“;

これで、テキストモジュール内のテキストが変更されました^^

このように簡単に自分の好きなフォントを導入することができますが、注意点として最初のステップで紹介したように、Integrationに追加されていないフォントは使えません。何個でも追加は可能ですが、必ず使用する前には、Integrationタブ >> コードをブログのに追加するにコードを追加するようにしてください。

以上で、今回のチュートリアルは終了です^^

分からない点、質問等ございましたら、コメントにてお答えします。

ではまた次回！See you later<3