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

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

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

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

 分かりやすいように、mi01-blueなどと、01の部分の数字で見出しのタイプを選び、-blueなどで色の変更が簡単にできるようにしています。ただ、ひとつずつすべてのパターンと色をCSSで記述すると膨大な量になるので、CSSにワイルドカードを使い、その文字列を含むものにCSSを反映させる技を使っています。そうすることで、少ない記述で多様なパターンを生み出すことが可能になりました。Elementorだと、プラグインのCSSが優先されてしまうことがあって、時々思うようにいきません。私はここで!importantを使ってしまいました。

 なお、賢威 のテンプレートを使っている場合は、親テーマ内にある見出しに関するCSSを削除した方が上手くいきます。まずは基本の設定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.4em !important;}
  7. .main-body h6 {font-size: 1.1em;padding: 0.4em !important;}
  8. /*アイコンのある見出し用のCSS*/
  9. [class*=”mi10″],[class*=”mi11″],[class*=”mi12″],[class*=”mi13″],[class*=”mi14″],
  10. [class*=”mi24″],[class*=”mi25″],[class*=”mi26″],[class*=”mi27″],[class*=”mi28″]
  11.  {position: relative; border-radius: 0.4em;padding: 0 0 0 2.7em;}
 

線の色を変えるCSSもまとめて記述することができますが、書く順番に気を付ける必要があります。

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

mi01-blue

mi01-navy

mi01-green

mi01-orange

mi01-purple

mi01-red

mi01-black

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

H3

H4

H5
H6
  1. [class*=”mi01″]  {border-top: solid 3px; border-bottom: solid 3px;}

これより後ろに、パート2にある色指定のソースを書く必要があります。

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

mi02-blue

mi02-navy

mi02-green

mi02-orange

mi02-purple

mi02-red

mi02-black

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

H3

H4

H5
H6
  1. [class*=”mi02″] {border-radius: 0.5em;border: solid 3px;}

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

mi03-blue

mi03-navy

mi03-green

mi03-orange

mi03-purple

mi03-red

mi03-black

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

H3

H4

H5
H6
  1. [class*=”mi03″] {border-radius: 0.5em;border-bottom: solid 3px;}

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

 色指定のCSSよりも後ろに書きます。前に書いた場合、枠の点線を「白」にする設定が上書きされ、カラフルになります。それを希望する場合は、色指定のCSSよりも前に記述します。

mi04-blue

mi04-navy

mi04-green

mi04-orange

mi04-purple

mi04-red

mi04-black

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

H3

H4

H5
H6
  1. [class*=”mi04″] {border: dashed 2px white;/*点線*/}
  2. .mi04-blue {box-shadow: 0px 0px 0px 8px rgba(172, 181, 255, 0.3);}
  3. .mi04-navy {box-shadow: 0px 0px 0px 8px rgba(170, 234, 255, 0.4);}
  4. .mi04-green {box-shadow: 0px 0px 0px 8px rgba(159, 255, 155, 0.3);}
  5. .mi04-orange {box-shadow: 0px 0px 0px 8px rgba(233, 255, 155, 0.4);
  6. border: dashed 2px #ffbf0063;/*点線*/}
  7. .mi04-purple {box-shadow: 0px 0px 0px 8px rgba(255, 203, 203, 0.3);}
  8. .mi04-red {box-shadow: 0px 0px 0px 8px rgba(255, 150, 150, 0.35);}
  9. .mi04-black {box-shadow: 0px 0px 0px 8px rgba(227, 227, 227, 0.4);}

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

 色指定のCSSよりも後ろに書きます。前に書いた場合、背景の色が上書きされて縞模様が出ません。

mi05-blue

mi05-navy

mi05-green

mi05-orange

mi05-purple

mi05-red

mi05-black

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

H3

H4

H5
H6
  1. .mi05-blue {background: -webkit-repeating-linear-gradient(-45deg, rgba(172, 181, 255, 0.3), rgba(172, 181, 255, 0.3) 3px,rgba(226, 227, 248, 0.4) 3px, rgba(226, 227, 248, 0.4) 6px);
  2. background: repeating-linear-gradient(-45deg, rgba(172, 181, 255, 0.3), rgba(172, 181, 255, 0.3) 3px,rgba(226, 227, 248, 0.4) 3px, rgba(226, 227, 248, 0.4) 6px);}
  3. .mi05-navy {background: -webkit-repeating-linear-gradient(-45deg, rgba(170, 234, 255, 0.3), rgba(170, 234, 255, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);
  4. background: repeating-linear-gradient(-45deg, rgba(170, 234, 255, 0.3), rgba(170, 234, 255, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);}
  5. .mi05-green {background: -webkit-repeating-linear-gradient(-45deg, rgba(159, 255, 155, 0.3), rgba(159, 255, 155, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);
  6. background: repeating-linear-gradient(-45deg, rgba(159, 255, 155, 0.3), rgba(159, 255, 155, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);}
  7. .mi05-orange {background: -webkit-repeating-linear-gradient(-45deg, rgba(233, 255, 155, 0.3), rgba(233, 255, 155, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);
  8. background: repeating-linear-gradient(-45deg, rgba(233, 255, 155, 0.3), rgba(233, 255, 155, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);}
  9. .mi05-purple {background: -webkit-repeating-linear-gradient(-45deg, rgba(255, 203, 203, 0.3), rgba(255, 203, 203, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);
  10. background: repeating-linear-gradient(-45deg, rgba(255, 203, 203, 0.3), rgba(255, 203, 203, 0.3) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);}
  11. .mi05-red {background: -webkit-repeating-linear-gradient(-45deg, rgba(255, 150, 150, 0.35), rgba(255, 150, 150, 0.35) 3px,rgba(226, 227, 248, 0.4) 3px, rgba(226, 227, 248, 0.4) 6px);
  12. background: repeating-linear-gradient(-45deg, rgba(255, 150, 150, 0.35), rgba(255, 150, 150, 0.35) 3px,rgba(226, 227, 248, 0.4) 3px, rgba(226, 227, 248, 0.4) 6px);}
  13. .mi05-black {background: -webkit-repeating-linear-gradient(-45deg, rgba(227, 227, 227, 0.4), rgba(227, 227, 227, 0.4) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);
  14. background: repeating-linear-gradient(-45deg, rgba(227, 227, 227, 0.4), rgba(227, 227, 227, 0.4) 3px,rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);}

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

 色指定のCSSよりも後ろに書きます。前に書いた場合、背景の色が上書きされて縞模様が出ません。

mi06-blue

mi06-navy

mi06-green

mi06-orange

mi06-purple

mi06-red

mi06-black

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

H3

H4

H5
H6
  1. [class*=”mi06″] {text-shadow: 0 0 5px white;}
  2. .mi06-blue {background: -webkit-repeating-linear-gradient(-45deg, rgba(172, 181, 255, 0.3), rgba(172, 181, 255, 0.3) 6px,rgba(226, 227, 248, 0.4) 6px, rgba(226, 227, 248, 0.4) 12px);
  3. background: repeating-linear-gradient(-45deg, rgba(172, 181, 255, 0.3), rgba(172, 181, 255, 0.3) 6px,rgba(226, 227, 248, 0.4) 6px, rgba(226, 227, 248, 0.4) 12px);}
  4. .mi06-navy {background: -webkit-repeating-linear-gradient(-45deg, rgba(170, 234, 255, 0.3), rgba(170, 234, 255, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);
  5. background: repeating-linear-gradient(-45deg, rgba(170, 234, 255, 0.3), rgba(170, 234, 255, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);}
  6. .mi06-green {background: -webkit-repeating-linear-gradient(-45deg, rgba(159, 255, 155, 0.3), rgba(159, 255, 155, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);
  7. background: repeating-linear-gradient(-45deg, rgba(159, 255, 155, 0.3), rgba(159, 255, 155, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);}
  8. .mi06-orange {background: -webkit-repeating-linear-gradient(-45deg, rgba(233, 255, 155, 0.3), rgba(233, 255, 155, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);
  9. background: repeating-linear-gradient(-45deg, rgba(233, 255, 155, 0.3), rgba(233, 255, 155, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);}
  10. .mi06-purple {background: -webkit-repeating-linear-gradient(-45deg, rgba(255, 203, 203, 0.3), rgba(255, 203, 203, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);
  11. background: repeating-linear-gradient(-45deg, rgba(255, 203, 203, 0.3), rgba(255, 203, 203, 0.3) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);}
  12. .mi06-red {background: -webkit-repeating-linear-gradient(-45deg, rgba(255, 150, 150, 0.35), rgba(255, 150, 150, 0.35) 6px,rgba(226, 227, 248, 0.4) 6px, rgba(226, 227, 248, 0.4) 12px);
  13. background: repeating-linear-gradient(-45deg, rgba(255, 150, 150, 0.35), rgba(255, 150, 150, 0.35) 6px,rgba(226, 227, 248, 0.4) 6px, rgba(226, 227, 248, 0.4) 12px);}
  14. .mi06-black {background: -webkit-repeating-linear-gradient(-45deg, rgba(227, 227, 227, 0.4), rgba(227, 227, 227, 0.4) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);
  15. background: repeating-linear-gradient(-45deg, rgba(227, 227, 227, 0.4), rgba(227, 227, 227, 0.4) 6px,rgba(255, 255, 255, 0.1) 6px, rgba(255, 255, 255, 0.1) 12px);}

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

 色指定のCSSよりも後ろに書きます。前に書いた場合、背景の画像が上書きされてフェルト風の模様が出ません。

mi07-blue

mi07-navy

mi07-green

mi07-orange

mi07-purple

mi07-red

mi07-black

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

H3

H4

H5
H6
  1. /*見出し mi07x*/
  2. [class*=”mi07″]
  3. {color: #ffffff; text-shadow: 2px 3px 5px black ; border-radius: 8px;border: 2px dashed #ffecef;}
  4. .mi07,.mi07a,.mi07-blue {box-shadow: 0 0 4px 7px rgb(102, 160, 236);background: url(images/bg/f1.PNG) repeat;}
  5. .mi07-navy {box-shadow: 0 0 4px 7px #152a7b;background: url(images/bg/f2.PNG) repeat;}
  6. .mi07-green {box-shadow: 0 0 4px 7px #315118;background: url(images/bg/f3.PNG) repeat;}
  7. .mi07-orange {box-shadow: 0 0 4px 7px #ec5107;background: url(images/bg/f4.PNG) repeat;}
  8. .mi07-purple {box-shadow: 0 0 4px 7px #4c3284;background: url(images/bg/f5.PNG) repeat;}
  9. .mi07-red {box-shadow: 0 0 4px 7px #fb7a89;background: url(images/bg/f6.PNG) repeat;}
  10. .mi07-black {box-shadow: 0 0 4px 7px #59535f;background: url(images/bg/f7.PNG) repeat;}

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

mi08-blue

mi08-navy

mi08-green

mi08-orange

mi08-purple

mi08-red

mi08-black

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

H3

H4

H5
H6
  1. /*見出し mi08x*/
  2. [class*=”mi08″] {border-radius: 6px;
  3.     border-radius: 6px;
  4.     -webkit-border-radius: 6px;
  5.     -moz-border-radius: 6px;
  6.     position: relative;}
  7. .mi08:after,.mi08a:after,.mi08-blue:after{border-top: 20px solid rgba(172, 181, 255, 0.3);}
  8. .mi08-navy:after{border-top: 20px solid rgba(170, 234, 255, 0.3);}
  9. .mi08-green:after{border-top: 20px solid rgba(159, 255, 155, 0.3);}
  10. .mi08-orange:after{border-top: 20px solid rgba(233, 255, 155, 0.3);}
  11. .mi08-purple:after{border-top: 20px solid rgba(255, 203, 203, 0.3);}
  12. .mi08-red:after{border-top: 20px solid rgba(255, 150, 150, 0.35);}
  13. .mi08-black:after{border-top: 20px solid rgba(227, 227, 227, 0.4);}
  14. [class*=”mi08″]:after{
  15. border-left: 20px solid transparent;
  16.     border-right: 20px solid transparent;position: absolute;
  17. bottom: -20px;left: 5%;z-index: 90;content: “”;}

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

記述する場所を変更してみても、なぜか文字色と同じになってしまいました。

mi09-blue

mi09-navy

mi09-green

mi09-orange

mi09-purple

mi09-red

mi09-black

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

H3

H4

H5
H6
  1. /*見出し mi09x*/
  2. [class*=”mi09″] {position: relative;padding-left: 30px;background:rgba(255,255,255, 0);}
  3. [class*=”mi09″]:before
  4. {position: absolute;content: ”;bottom: -3px;left: 0;width: 0;height: 0;border: none;border-left: solid 30px transparent;border-bottom: solid 20px;}
  5. [class*=”mi09″]:after 
  6. {position: absolute;content: ”;bottom: -3px;left: 10px;width: 100%;border-bottom: solid 3px;}

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

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

そして、これより下に、アイコンサイズ調整用のCSSを書きます。

mi10-blue

mi10-navy

mi10-green

mi10-orange

mi10-purple

mi10-red

mi10-black

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

H3

H4

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