Diviの使い方8 テーマのカスタマイズ4 追加CSS設定

Divi ではテーマのカスタマイズを便利に行えるように、追加のCSS設定を書き込む専用の場所が用意されています。今回はその機能を利用してテーマのカスタマイズを行う方法について図解します。

Divi でテーマ全体のカスタマイズのために、追加の CSS 設定を行うには、下記の場所にコードを書き込みます。

上記の追加 CSS の枠に、CSS の構文でコードを入力します。

セレクタ {
　プロパティ名:値
;}

の構文で記載します。あるいは下記のように複数で指定も可能です。

セレクタ１,セレクタ２,セレクタ３ {
　プロパティ名:値; プロパティ名:値; プロパティ名:値
;}

あるいは下記のように複数で指定も可能です。

セレクタ１,セレクタ２,セレクタ３ {
　プロパティ名:値;
　プロパティ名:値;
　プロパティ名:値
;}

あるいは下記のように複数で指定も可能です。（※先にある値が優先される）

セレクタ {
　プロパティ名:値１, 値２, 値３
;}

実は Divi をインストールして標準で利用していると、非常に重い日本語のフォントをダウンロードさせる設定になっています。詳しくは、サイトの高速化のページで解説していますが、下記のフォントの変更を追加 CSS に追加しておくことをおすすめします。

すべての文字を Windows 標準の「游ゴシック」に変更するコード

body,h1,h2,h3,h4,h5,h6,input,textarea,select{
　font-family:"游ゴシック", sans-serif
;}

あるいは、すべての文字を Mac 標準の「メイリオ」に変更するコード

body,h1,h2,h3,h4,h5,h6,input,textarea,select{
　font-family:"メイリオ", sans-serif
;}

あるいは、何か別のフォントを使っても良いですが、とにかく何か軽いフォントに変更することをお勧めします。

セレクタとは、タグと CSSID と CSS クラスになります。

タグでよく使うのは、body：本体領域、h1～h6：ヘッダ文字、pre：プリタグ文字です。例えば追加 CSS に下記のように設定すると、

h1{
 color:White;
 background-color:blue;
 border-radius:20px;
 padding:12px;
}

サイト上の h1 のヘッダ文字がすべて、文字色が白、背景色が青、枠線の丸めが 20px、内部余白が 12px となります。

CSS ID は Divi では下記のように、

例えば、CSS IDに、testid1 と設定しておいて、下記のように追加 CSS に CSS ID 名の前に「#」をつけて設定します。

#testid1{
　background-color:yellow;
}

CSS クラスを追加 CSS に設定しておくことで、様々な場所で利用することができます。

例えば下記のように、クラス名の前に「.」をつけて追加 CSS に背景色を紫色にする設定をしておけば、

.testclass{
 background-color:purple;
}

そのクラスをモジュールに設定するだけで、そのモジュールの設定が完了します。複数のセクションや行やモジュールで利用できます。

Divi で追加 CSS を使う場面で、よく使うクラスは下記になるのではと思います。まとめておきます。ただ他にもいろいろあるので、必要に応じて CSS で検索してみてください。