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

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

1.追加CSS設定の場所

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

「外観」>「カスタマイズ」をクリックします。
一番下に「追加 CSS」があるのでクリックします。
追加 CSS の入力窓が開くので、コードを入力します。

2.追加 CSS の設定方法

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

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

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

セレクタ1,セレクタ2,セレクタ3 {
 プロパティ名:; プロパティ名:; プロパティ名:
;
}

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

セレクタ1,セレクタ2,セレクタ3 {
 プロパティ名:;
 プロパティ名:;
 プロパティ名:;}

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

セレクタ {
 プロパティ名:値1, 値2, 値3
;}
変更したら「公開」をクリックして保存します。

3.ぜひ設定しておいた方が良いコード(フォントの変更)

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

下記のように、PageSpeed Insights の値が、大幅に改善されます。Divi をインストールした状態が左、フォントをメイリオに変更したときの値が右になります。

すべての文字を 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
;}

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

4.CSS セレクタとクラス

1)セレクタについて

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

(1) タグ

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

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

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

(2) CSS ID

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

「設定」の「詳細」パネルで設定できるようになっています。セクションや行、モジュールに設定できます。

 個別のIDです。

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

#testid1{
 background-color:yellow;
}
(3) CSS クラス

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

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

.testclass{
background-color:purple;
}

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

2)よく使うクラス一覧

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

文字関連文字の水平位置text-alignstart:始端(既定値)、end:終端、left:左揃え、right:右揃え、center:中央揃え など
文字の色color#000000で指定、名称で指定「black、whiteなど」
文字の装飾線種text-decoration-linenone:何もなし(既定値)、underline:下に線を引く
overline:上に線を引く、line-through:中央を通る線を引く(取り消し線) など
文字の装飾種類text-decoration-stylesolid:実線(既定値)、double:二重線、dotted:点線
、dashed:破線 など
文字の装飾の色text-decoration-color#000000で指定、名称で指定「black、whiteなど」
文字の字体
(フォント)
font-family游ゴシック、メイリオ、総称フォントファミリー名「ゴシック:sans-serif、明朝体:serif、等幅:monospace など」
文字の大きさfont-sizepxサイズで指定、%で指定、名称で指定「small、 medium、large など」
文字の太さfont-weightnormal:標準、bold:太字 など
背景に関するスタイル背景の色background-color#000000で指定、名称で指定「black、whiteなど」
背景の画像background-imageURLで指定 url(“../○○○/○○○.jpg”)
背景画像の繰り返しbackground-repeatrepeat:縦横に繰り返し(既定値)、repeat-x:横方向に繰り返し、repeat-y:縦方向に繰り返し、no-repeat:繰り返さない
背景画像の表示位置background-positionpxサイズで指定、%で指定、left、center、right、top、center、bottom など
背景画像のサイズbackground-sizepxサイズで指定、%で指定、contain:画像をそのままでいっぱいに拡大縮小、cover:画像の縦横比のまま拡大縮小し空き領域が残らないように切り取り など
背景全般backgroundまとめて指定
横幅と高さ横幅widthpxサイズで指定、%で指定 など
高さheightpxサイズで指定、%で指定 など
余白関連余白marginpxサイズで指定、%で指定 など
上の余白margin-top 
下の余白margin-bottom 
右の余白margin-right 
左の余白margin-left 
内部余白paddingpxサイズで指定、%で指定 など
上の内部余白padding-top 
下の内部余白padding-bottom 
右の内部余白padding-right 
左の内部余白padding-left 
枠線関連枠線bordernone:枠線なし(既定値)、solid:直線、double:二重線、groove:窪み線、ridge:隆起線、dashed:破線、dotted:点線 など
枠線の色border-color#000000で指定、名称で指定「black、whiteなど」
上の枠線boder-top 
下の枠線border-bottom 
右の枠線border-right 
左の枠線border-left 
枠の丸めborder-radiuspxサイズで指定、%で指定、

最初はコードの記載があるので複雑に感じるかもしれませんが、使いだすと使い方によっては便利です。追加 CSS を利用して設定しておくことで、様々な複雑な設定をまとめておけます。使いまわしての利用も可能になります。ぜひ使い方を覚えてみましょう。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson3-2-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成2

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi...

Divi モジュールの使い方4 スライダーと投稿スライダー

今回は Divi の各種モジュールのうちから、スライダーモジュールと投稿スライダーモジュール(スライダーを投稿する)について図解したいと思います。Diviの使い方10...
Divi-lesson9-logo

Divi レッスン9 テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...
divi-lesson8-1-logo

Divi レッスン8 テーマのカスタマイズ1 子テーマを作成する方法

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi...
divi-tips-before-after-images-logo

Diviチップス Before + After Images のインストール

ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。...

Pin It on Pinterest