Diviテーマ:サブチュートリアル 〜DiviにGoogle Fonts+ 日本語早期アクセスを導入してみよう〜 – 初心者のためのWordpress完全マニュアル

誰でも作れる低予算のウェブサイト作り

TUTORIAL BLOG


このブログでは、初心者でも分かりやすいよう、WORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、オススメのプラグインの紹介や使い方、SEO対策やアフィリエイトの運営方法まで、STEP BY STEPで紹介しています。

Diviテーマ:サブチュートリアル 〜DiviにGoogle Fonts+ 日本語早期アクセスを導入してみよう〜

August 28, 2017

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

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

Diviテーマのチュートリアル世界シェア率No.1!! 最強のWordPressテーマ【DIVI】チュートリアル 〜Step 1: テーマのセットアップ

DiviテーマSampleウェブサイト:https://yukifel-divitutorial.com/

Elegant Themes オフィシャルサイト: https://www.elegantthemes.com/

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

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

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Powered by Shutterstock