DiviでカスタムCSSを追加する4つの方法

こんにちはナオミです。

このチュートリアルでは、Diviテーマ内でカスタムCSSを追加できる四つの方法を紹介しています。

その四つの方法は以下です。

  1. モジュールや行やセクションにカスタムCSS
  2. ページ限定のカスタムCSS
  3. テーマの追加CSS
  4. 子テーマのstyle.css

1.Diviモジュールや行やセクションのカスタムCSS

DiviカスタムCSSの追加の仕方

モジュールの設定画面の詳細からカスタムCSSと言う項目があります。そこでCSSを入力することができます。簡単に追加できるのですが、デメリットとしては、ここでサポートされてないHTMLエレメントにCSSを追加することはできないということです。

2.Diviページ限定のカスタムCSS

固定ページの設定にCSSを追加

画面の下の紫のメニューの中のギアからいける、固定ページ設定画面からカスタムCSSを入力することができます。
この方法のデメリットでありメリットなのは、このページにのみここで入力したCSSが追加されます。

3.DiviテーマのカスタムCSS

DiviテーマのカスタムCSS

これは典型的なワードプレステーマの追加CSSです。このオプションのいいところは、ここで書いたコードはサイト全体に反映されるところです。デメリットは、沢山追加すると見にくくなりますし、チームでコード管理が難しくなるところですね。

4.Divi子テーマのstyle.css

Divi子テーマのstyle.css

子テーマのstyle.cssにCSSを追加します。メリットとしては、普通にファイルを編集するので好きなエディタを使え、コード管理も楽になります。デメリットとしては、子テーマの作成やFTPの知識など、少しだけ難易度が高いところです。
子テーマの設定はこちらの記事と動画を見てください。とっても簡単ですよ。

Diviの子テーマを作成する方法【簡単です】

「DiviでカスタムCSSを追加する4つの方法」に1件のコメントがあります

  1. ピンバック: Diviのトップに戻るボタンをカスタマイズ

コメントする

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