Diviテーマは世界で一番シェアされている、初心者でも扱いやすいビジュアルビルダーを搭載している、素晴らしいWordpressテーマですが、もともと英語のコンテンツを想定して設計されているため、日本語フォントがデフォルトで組み込まれていないのが問題です。
今回は、Google Fontsの早期アクセスを使って、簡単にDiviテーマに日本語のカスタムフォントを導入する方法をご紹介します。
Diviテーマのチュートリアル:世界シェア率No.1!! 最強のWordPressテーマ【DIVI】チュートリアル 〜Step 1: テーマのセットアップ
DiviテーマSampleウェブサイト:https://yukifel-divitutorial.com/
Elegant Themes オフィシャルサイト: https://www.elegantthemes.com/
まずは、ここをクリックして使いたいフォントを選びます。
まずはダッシュボードの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
© 初心者のためのWordpress完全マニュアル All Rights Reserved