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

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

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

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

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

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

 下記のCSSが「色指定のCSS」です。線の色や文字色、背景色などを定めています。これより上に書いたものは適用されますが、この記述より下に書いたものは設定が上書きされます。あと、背景色未設定にした場合、なぜか文字色と同じになってしまうという現象が起きましたので、すべてをこれより下に書くということはあきらめました。

  1. /*CSSで線の色を共通設定にしているものはこの上に表記*/
  2. [class*=”mi0″],[class*=”mi1″],[class*=”mi2″],[class*=”mi3″],[class*=”-blue”]{
  3. color: #090c9d;
  4. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  5.   background: rgba(172, 181, 255, 0.3);
  6. border-color: #2c62ff;}
  7. [class*=”-navy”] {
  8. color: #171844;
  9. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  10. background: rgba(170, 234, 255, 0.3);
  11. border-color: #084B8A;}
  12. [class*=”-green”] {
  13. color: #0B610B;
  14. text-shadow: 3px 3px 4px rgba(27, 123, 13, 0.4) ;
  15. background: rgba(159, 255, 155, 0.3);
  16. border-color: #04B45F;}
  17. [class*=”-orange”] {
  18. color: #FF8000;
  19. text-shadow: 3px 3px 4px rgba(245, 254, 0, 0.4) ;
  20. background: rgba(233, 255, 155, 0.3);
  21. border-color: #FAAC58;}
  22. [class*=”-purple”] {
  23. color: #B40486;
  24. text-shadow: 3px 3px 4px rgba(226, 67, 67, 0.4) ;
  25. background: rgba(255, 203, 203, 0.3);
  26. border-color: #DA81F5;}
  27. [class*=”-red”] {
  28. color: #FE2E2E;
  29. text-shadow: 3px 3px 4px rgba(254, 0, 0, 0.4) ;
  30. background: rgba(255, 150, 150, 0.35);
  31. border-color: #F7819F; }
  32. [class*=”-black”] {
  33. color: #1C1C1C;
  34. text-shadow: 3px 3px 4px rgba(61, 61, 57, 0.4) ;
  35. background: rgba(227, 227, 227, 0.4);
  36. border-color: #848484; }
  37. /*CSSで線の色を独自に変更しているものはこの下に表記*/

色を消すCSSです。背景などまとめて設定していますが、一部の見出しでは透明化するために、下のようなCSSを書いています。当サイトではmi15~mi19などで背景を透明化しています。

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

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

 色指定のCSSより前に書きます。最後にアイコンサイズ調整CSSもつけます。

mi11-blue

mi11-navy

mi11-green

mi11-orange

mi11-purple

mi11-red

mi11-black

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

mi11h3

mi11h4

mi11
mi11
  1. [class*=”mi11″]:before {font-family: FontAwesome; content: “\f14a”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}

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

 色指定のCSSより前に書きます。最後にアイコンサイズ調整CSSもつけます。

mi12-blue

mi12-navy

mi12-green

mi12-orange

mi12-purple

mi12-red

mi12-black

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

mi12h3

mi12h4

mi12h5
mi12h6
  1. [class*=”mi12″]:before {font-family: FontAwesome; content: “\f083”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}

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

 色指定のCSSより前に書きます。最後にアイコンサイズ調整CSSもつけます。

mi13-blue

mi13-navy

mi13-green

mi13-orange

mi13-purple

mi13-red

mi13-black

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

mi13h3

mi13h4

mi13h5
mi13h6
  1. [class*=”mi13″]:before {font-family: FontAwesome; content: “\f0c5”; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}

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

 色指定のCSSより前に書きます。最後にアイコンサイズ調整CSSもつけます。

mi14-blue

mi14-navy

mi14-green

mi14-orange

mi14-purple

mi14-red

mi14-black

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

mi14h3

mi14h4

mi14h5
mi14h6
  1. [class*=”mi14″]:before {font-family: FontAwesome; content: “\f001  “; position: absolute; font-size: 2.1em; left: 19px; top: 10px;}

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

 色指定のCSSよりより前に書きますが、色指定の後ろで背景を消すCSSも必要になります。

mi15-blue

mi15-navy

mi15-green

mi15-orange

mi15-purple

mi15-red

mi15-black

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

mi15

mi15

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

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

 色指定のCSSよりより前に書きますが、色指定の後ろで背景を消すCSSも必要になります。

mi16-blue

mi16-navy

mi16-green

mi16-orange

mi16-purple

mi16-red

mi16-black

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

mi16

mi16

mi16
mi16
  1. [class*=”mi16″] {border-bottom: double 5px;}

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

 色指定のCSSよりより前に書きますが、色指定の後ろで背景を消すCSSも必要になります。

mi17-blue

mi17-navy

mi17-green

mi17-orange

mi17-purple

mi17-red

mi17-black

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

mi17

mi17

mi17
mi17
  1. [class*=”mi17″] {border-bottom: dashed 2px;}

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

 せっかくの背景が上塗りされてしまわないように、色指定のCSSより後ろに書きます。

mi18-blue

mi18-navy

mi18-green

mi18-orange

mi18-purple

mi18-red

mi18-black

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

mi18

mi18

mi18
mi18
  1. .mi18,.mi18a,.mi18-blue { background: linear-gradient(transparent 50%, rgba(172, 181, 255, 0.6) 90%);}
  2. .mi18-navy { background: linear-gradient(transparent 50%, rgba(170, 234, 255, 0.6) 90%);}
  3. .mi18-green { background: linear-gradient(transparent 50%, rgba(159, 255, 155, 0.6) 90%);}
  4. .mi18-orange { background: linear-gradient(transparent 50%, rgba(233, 255, 155, 0.6) 90%);}
  5. .mi18-purple { background: linear-gradient(transparent 50%, rgba(255, 203, 203, 0.6) 90%);}
  6. .mi18-red { background: linear-gradient(transparent 50%,rgba(255, 150, 150, 0.6) 90%);}
  7. .mi18-black { background: linear-gradient(transparent 50%, rgba(227, 227, 227, 0.6) 90%);}

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

mi19-blue

mi19-navy

mi19-green

mi19-orange

mi19-purple

mi19-red

mi19-black

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

mi19

mi19

mi19
mi19
  1. [class*=”mi19″] {border-left: double 6px;}

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

色指定のCSSより前に書きます。

mi20-blue

mi20-navy

mi20-green

mi20-orange

mi20-purple

mi20-red

mi20-black

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

mi20h3

mi20h4

mi20h5
mi20h6
  1. [class*=”mi20″] {position: relative;
  2. border: 1px solid #ccc;
  3. width: 98%;
  4. padding-left: 1.5em;}
  5. [class*=”mi20″]::after {
  6. position: absolute;
  7. top: 0.5em;
  8. left: 1em;
  9. content: ”;
  10. width: 10px;
  11. height: -webkit-calc(100% – 1em);
  12. height: calc(100% – 1em);
  13. background-color: #FFFFFF;
  14.     box-shadow: -1px 0px 2px #716f6f;
  15. border-radius: 4px;}