主婦のブログ運営いろは

主婦でもブログで稼げるのか?2018年8月から挑戦中。

【DIVER】サイト内のフォントを変える方法【カスタマイズ】

f:id:aoi-affiliate:20190108103430p:plain

【DIVER】カスタマイズ|サイト内のフォントを変える

WordPress有料テーマ「DIVER」のデフォルト設定では、フォントを変更することができません。多機能の有料テーマとして有名な「DIVER」ですが、フォントがボタン1つで変更できないのは意外でした。「DIVER」のフォントの変え方を解説します。

「DIVER」のフォントは「游ゴシック体」

有料テーマ「DIVER」では、文字サイズや行間などを細かく設定できますが、初期設定ではフォントは設定できません。「DIVER」の初期フォントは「游ゴシック体」が使用されており、シンプルな細い線のフォントが特徴的です。

「DIVER」のデモサイトでフォントをチェックできます。
wordpressテーマ「Diver」

線が細くてあまり好みのフォントじゃないな~と思う人もいるかと思います。その場合は、「DIVER」子テーマのCSSを編集することでサイト内全体のフォントを変更することができます。

ちなみに私がメインブログで使用しているフォントは「Comic Sans MS」で、ふんわりとしたフォントを使用しています。
Floral Days|転勤族ママの一人っ子育児と家族のじかん


「DIVER」子テーマのCSSを編集する

「DIVER」のフォントを変えるために子テーマのCSSを編集するのですが、私の場合はサイト内全体を同じフォントを使用しているので、部分的に変更したい人の参考にはならないかもしれません。

設定はWPダッシュボード → 「外観」 → 「テーマの編集」→「スタイルシート」のように進むと以下のページが表示されます。

f:id:aoi-affiliate:20181222165344p:plain

右上の「編集するテーマを選択」から「diver_child」を選択してください。必ず「子テーマ」を編集するようにしましょう。
「DIVER」の子テーマをダウンロードをしていないとこちらは表示されませんので、「DIVER」を購入したら親テーマとあわせて子テーマも必ずダウンロードしましょう。


今まで何もCSSを追加したことがなければ、左側のスタイルシートには「diverの子テーマです」と書かれた茶色のコードだけが表示されているはずです。この下に以下のCSSコードをコピペします。

body {
  font-family:  Comic Sans MS !important;
  font-weight: none;
}


「Comic Sans MS」の部分に好きなフォントを入れましょう。Wordなどで使える一般的なフォント以外にもWEBフォントを使用することができますが、その場合、表示速度が下がることがあるので注意が必要です。


※ CSS編集をすることで、既存の設定などによってデザインや機能が変わったり崩れたりする可能性があります。当ブログではCSS編集で起きたいかなる問題に対して一切の責任を負えませんので、あらかじめご了承いただき自己責任での編集をよろしくお願いします。

まとめ

以上、WordPress有料テーマ「DIVER」のフォントの変更方法でした。

「DIVER」ではカスタマイズに困った時でも無制限のサポートが受けれるので初心者でも安心です。私も初歩的なことばかり聞いてしまいましたが、きちんと返信してくださるので大変助かりました。