Elementorではセクションや要素の詳細で「CSSクラス」にクラス名を入れるだけでスタイルシートを呼び出すことができます。テーマのstyle.cssやbase.cssなど、スタイルシートに記述しているものから簡単に読み込んで反映できるので、コード不要でデザインをおしゃれにすることができます。

1、style.cssに記述(確認)しておく

 CSS3を知らない方は、ぜひこの機会にgoogleで調べてみるといいです。chromeの検証機能を使うと理解が深まりますので試してみてください。さて、WordPressのどのテーマにもstyle.cssやそれに代わるbase.cssなどあります。その中にこのようなコードが書いてあります。親切に解説が書いてあるものもありますので、それだと探しやすいですしありがたいですね。例でいくと、過去三枠には.wellなどがあります。この、ドット以降の英単語みたいなものがクラス名です。試しに使ってみましょう。

2、「詳細」のCSSクラスにクラス名を入れる

 このCSSクラスというところに入れます。たぶん、より細かく限定して使いたい場合(CSSで#を使った場合など)はCSS IDも使えばいいと思うのですが、私はそこまで使い込んではいません。

また、半角スペースを空けてクラス名を複数入れることも可能です。2重、3重にスタイルシートを反映させることもできます。

cssクラスに「well2」と入れてみました。このような枠が表示されました。

cssクラスに「well3 pill」と入れてみました。このような枠が表示されました。ボタン用のcssですが、枠にも使えますし見出しにも使えます。

3、ElementorならCSSの反映を確認しながら記事更新ができる

 格好いい見出しのデザインを使ったり、リンクを目立たせたりするなどスタイルシートの使い方は奥が深いものがあります。今までの更新の仕方では、一度保存してサイトにアクセスし、F5で更新するなどしてやっと確かめることができるという感じでしたが、Elementorなら、クラス名を入れた段階で瞬時に結果が反映します。結果的に、短時間でより洗練されたサイト作りが可能になるのです。

 なお、このサイトではどのようなcssを書いているのかは、このサイトのCSSのページを参考にしてください。そのままコピペで使えるものもあれば、ご使用のテーマによってアレンジしなければいけないものもあります。どうぞ、ご利用ください。

便利な機能満載のElementor。このような新技術には何かしらデメリットがあるのではないか考えてみました。