CSSコードを作成し、子テーマフォルダにアップしておくと、Elementorの編集エディター上にある詳細にCSSクラスを入れるだけで簡単にデザインを変更することができます。今回は見出し編の第3弾です。

 タイトル文の他に、サイズやHTMLタグ、配置をコンテンツで編集します。スタイルは個別に作ることもできますが、詳細でCSSクラスを呼び出すことが可能で、とても便利です。 

タイトルのデザインを変えてみよう

 よく使うデザインを子テーマのCSSに追記しておきます。このサイトで使っているデザインを紹介していきます。参考にしたものは通常のCSSデザイン系のサイトですが、ここではElementorを意識して紹介しています。

 分かりやすいように、mi01-blueなどと、01の部分の数字で見出しのタイプを選び、そのあとのa~eで色の変更が簡単にできるようにしています。まずは、各タイトルタグの余白を設定しました。Elementorだと、プラグインのCSSが優先されてしまうことがあって、時々思うようにいきません。私はここで!importantを使ってしまいました。

 なお、賢威 のテンプレートを使っている場合は、親テーマ内にある見出しに関するCSSを削除した方が上手くいきます。

  1. /*基本の設定 余白・サイズ*/
  2. .main-body h1 {font-size: 2.5em;padding: 0.3em !important;}
  3. .main-body h2 {font-size: 2.2em;padding: 0.6em !important;}
  4. .main-body h3 {font-size: 1.9em;padding: 0.5em !important;}
  5. .main-body h4 {font-size: 1.6em;padding: 0.4em !important;}
  6. .main-body h5 {font-size: 1.3em;padding: 0.3em !important;}
  7. .main-body h6 {font-size: 1.0em;padding: 0.3em !important;}

① 共通の色指定を反映させたい見出しのCSS

/*色指定のCSS*/

  1. [class*=”-blue”] { color: #090c9d; background: rgba(172, 181, 255, 0.3);}
  2. [class*=”-navy”] { color: #171844; background: rgba(170, 234, 255, 0.3);}
  3. [class*=”-green”] { color: #0B610B; background: rgba(159, 255, 155, 0.3);}
  4. [class*=”-orange”] { color: #FF8000; background: rgba(233, 255, 155, 0.3);}
  5. [class*=”-purple”] { color: #B40486; background: rgba(255, 203, 203, 0.3);}
  6. [class*=”-red”] { color: #ff0000bd; background: rgba(255, 150, 150, 0.35);}
  7. [class*=”-black”] { color: #1C1C1C; background: rgba(227, 227, 227, 0.4);}

② 共通の色指定ではない見出しのCSSを書く。

/*見出し mi15~mi19 背景を透明にする処理x*/

  1. [class*=”mi15″],[class*=”mi16″],[class*=”mi17″],[class*=”mi18″],
  2. [class*=”mi19″],[class*=”mi22″],[class*=”mi24″],[class*=”mi25″],
  3. [class*=”mi26″],[class*=”mi27″],[class*=”mi28″]
  4. {background:rgba(255,255,255, 0);}

③ 背景が透明の見出しのCSS

/*見出しレベルによるアイコンサイズの変更のCSS*/

  1. [class*=”h3″]:before {font-size: 1.8em; left: 17px; top: 5px;}
  2. [class*=”h4″]:before {font-size: 1.6em; left: 15px; top: 0px;}
  3. [class*=”h5″]:before {font-size: 1.3em; left: 13px; top: 0px;}
  4. [class*=”h6″]:before {font-size: 1.1em; left: 12px; top: 0px;}
  5. [class*=”h3″] {padding: 0 0 0 2.4em;}
  6. [class*=”h4″] {padding: 0 0 0 2.1em;}
  7. [class*=”h5″] {padding: 0 0 0 1.8em;}
  8. [class*=”h6″] {padding: 0 0 0 1.5em;}
  9. [class*=”h3″]::after {font-size: 0.8em;}
  10. [class*=”h4″]::after {font-size: 0.8em;}
  11. [class*=”h5″]::after {font-size: 0.6em;}
  12. [class*=”h6″]::after {font-size: 0.6em;}

<H2>タグで、mi21の色を変えました。

 枠のタイプだけCSSで記述し、後述の色のCSSでカラーを選べるようにします。

mi21-blue

mi21-navy

mi21-green

mi21-orange

mi21-purple

mi21-red

mi21-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi21

mi21

mi21
mi21
  1. [class*=”mi21″] { border: ridge 5px ;}

<H2>タグで、mi22の色を変えました。

 枠のタイプだけCSSで記述し、後述の色のCSSでカラーを選べるようにします。

mi22-blue

mi22-navy

mi22-green

mi22-orange

mi22-purple

mi22-red

mi22-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi22

mi22

mi22
mi22
  1. [class*=”mi22″] { border-left: solid 12px ;border-bottom: solid 3px; }

<H2>タグで、mi23の色を変えました。

 枠のタイプだけCSSで記述し、後述の色のCSSでカラーを選べるようにします。

mi23-blue

mi23-navy

mi23-green

mi23-orange

mi23-purple

mi23-red

mi23-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi23

mi23

mi23
mi23
  1. [class*=”mi23″] { border-left: solid 20px ; }

<H2>タグで、mi24の色を変えました。

 アイコンと文字の組み合わせです。背景を透明にするCSSを書いた後に記述します。

mi24-blue

mi24-navy

mi24-green

mi24-orange

mi24-purple

mi24-red

mi24-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi24h3

mi24h4

mi24h5
mi24h6
  1. /*見出し mi24x*/
  2. [class*=”mi24″] {position: relative; background:rgba(255,255,255, 0); padding: 0 0 0 2.7em;}
  3. [class*=”mi24″]:before {font-family: FontAwesome; content: “\f0a4”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}
  4. [class*=”mi24″]::after {position: absolute;top: 0em;left: 1em; content: ‘重要’;}

<H2>タグで、mi25の色を変えました。

mi25-blue

mi25-navy

mi25-green

mi25-orange

mi25-purple

mi25-red

mi25-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi25h3

mi25h4

mi25h5
mi25h6
  1. /*見出し mi25x*/
  2. [class*=”mi25″] {position: relative; background:rgba(255,255,255, 0); padding: 0 0 0 2.7em;}
  3. [class*=”mi25″]:before {font-family: FontAwesome; content: “\f201”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}
  4. [class*=”mi25″]::after {position: absolute;top: 0em;left: 1em; content: ‘注目!’;}

<H2>タグで、mi26の色を変えました。

mi26-blue

mi26-navy

mi26-green

mi26-orange

mi26-purple

mi26-red

mi26-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi26h3

mi26h4

mi26h5
mi26h6
  1. /*見出し mi26x*/
  2. [class*=”mi26″] {position: relative; background:rgba(255,255,255, 0); padding: 0 0 0 2.7em;}
  3. [class*=”mi26″]:before {font-family: FontAwesome; content: “\f0c0”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}
  4. [class*=”mi26″]::after {position: absolute;top: 0em;left: 1em; content: ‘レビュー’;}

<H2>タグで、mi27の色を変えました。

mi27-blue

mi27-navy

mi27-green

mi27-orange

mi27-purple

mi27-red

mi27-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi27h3

mi27h4

mi27h5
mi27h6
  1. /*見出し mi27x*/
  2. [class*=”mi27″] {position: relative; background:rgba(255,255,255, 0); padding: 0 0 0 2.7em;}
  3. [class*=”mi27″]:before {font-family: FontAwesome; content: “\f0eb”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}
  4. [class*=”mi27″]::after {position: absolute;top: 0em;left: 1em; content: ‘Point’;}

<H2>タグで、mi28の色を変えました。

mi28-blue

mi28-navy

mi28-green

mi28-orange

mi28-purple

mi28-red

mi28-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi28h3

mi28h4

mi28h5
mi28h6
  1. /*見出し mi28x*/
  2. [class*=”mi28″] {position: relative; background:rgba(255,255,255, 0); padding: 0 0 0 2.7em;}
  3. [class*=”mi28″]:before {font-family: FontAwesome; content: “\f07b”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}
  4. [class*=”mi28″]::after {position: absolute;top: 0em;left: 1em; content: ”;}

<H2>タグで、mi29の色を変えました。

mi29-blue

mi29-navy

mi29-green

mi29-orange

mi29-purple

mi29-red

mi29-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi29

mi29

mi29
mi29
  1. /*見出し mi29x*/
  2. [class*=”mi29″] {position: relative;background:transparent;border-bottom: 6px solid #ccc;}
  3. [class*=”mi29″]::after {position: absolute;bottom: -6px;left: 0;z-index: 2;content: ”; width: 20%;height: 6px; background-color: #3498db;}
  4. .mi29-navy::after { background-color:#084B8A;/*ネイビー*/}
  5. .mi29-green::after { background-color:#04B45F;/*グリーン*/}
  6. .mi29-orange::after { background-color:#FAAC58;/*オレンジ*/}
  7. .mi29-purple::after { background-color:#DA81F5;/*パープル*/}
  8. .mi29-red::after { background-color:#F7819F;/*レッド*/}
  9. .mi29-black::after { background-color: #848484;/*ブラック*/}

<H2>タグで、mi30の色を変えました。

mi30-blue

mi30-navy

mi30-green

mi30-orange

mi30-purple

mi30-red

mi30-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi30

mi30

mi30
mi30
  1. [class*=”mi30″] {background:transparent;
  2. -webkit-transform: rotate(-4deg);
  3. -moz-transform: rotate(-4deg);
  4. transform: rotate(-4deg);
  5. -o-transform: rotate(-4deg);
  6. -ms-transform: rotate(-4deg);
  7. border-bottom: solid 5px rgba(255, 0, 0, 0.7);
  8. width: 100%;}

<H2>タグで、mi31の色を変えました。

mi31-blue

mi31-navy

mi31-green

mi31-orange

mi31-purple

mi31-red

mi31-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi31

mi31

mi31
mi31
  1. [class*=”mi31″] {background:transparent;
  2. -webkit-transform: rotate(-4deg);
  3. -moz-transform: rotate(-4deg);
  4. transform: rotate(-4deg);
  5. -o-transform: rotate(-4deg);
  6. -ms-transform: rotate(-4deg);
  7. border-bottom: solid 8px rgba(255, 0, 0, 0.7);
  8. width: 80%;}

<H2>タグで、mi32の色を変えました。

mi32-blue

mi32-navy

mi32-green

mi32-orange

mi32-purple

mi32-red

mi32-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi32

mi32

mi32
mi32
  1. [class*=”mi32″] {background:transparent;
  2. -webkit-transform: rotate(-4deg);
  3. -moz-transform: rotate(-4deg);
  4. transform: rotate(-4deg);
  5. -o-transform: rotate(-4deg);
  6. -ms-transform: rotate(-4deg);
  7. border-bottom: double 14px rgba(255, 0, 0, 0.7);
  8. width: 60%;}

<H2>タグで、mi33の色を変えました。

mi33-blue

mi33-navy

mi33-green

mi33-orange

mi33-purple

mi33-red

mi33-black

見出しのレベルを<H3>~<H6>まで変えてみました。

mi33

mi33

mi33
mi33
  1. [class*=”mi33″]::after {font-family: FontAwesome; font-size: 2.1em; content: “\f040”; position: absolute;
  2. color: white;
  3. left: -1.35em;
  4. top: 50%;
  5. -moz-transform: translateY(-50%);
  6. -webkit-transform: translateY(-50%);
  7. -ms-transform: translateY(-50%);
  8. transform: translateY(-50%);}