WordPressのテーマビルダープラグイン「Elementor」のファンブログ

CSS を使いこなす(Elementor無料版でもね)

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
css_thumbnail

CSS と聞くといきなりハードルがあがった気がしますが、Elementorでちょっとだけ使う分には簡単に使う事が出来ます。Pro版にはElementorの編集画面のセッション、カラム、ウィジェットそれぞれの「詳細」の中に、「カスタムCSS」という機能があります。

css_custom

編集画面上でCSSを追加編集出来るで、リアルタイムに編集する事が出来ます。

万能なElementor Proでも、細部の調整などはカスタムCSSが使えると更に便利になります。しかし、無料版では・・・

customcss_ng

この様にプロテクトされてしまい使えません(涙)

<参考関連記事>

【徹底比較】Elementorの無料版と有料版(PRO版)

テーマの追加CSSを活かす

大多数のテーマにはCSSを追加する事が出来る機能がついています。

add_css

これはElementorと相性が良いと言われているテーマ「Astra」のカスタマイズ画面です。

add_css2

おじさん
おじさん
無料版でもProと同じようにCSSが使えるとは?!これは良いじゃないか!!

確かにCSSは使えるのですが、注意点があります。これはテーマ全体にCSSを追加する事となる為、先程のPro版のデモ動画でお見せした様に、「h2」にCSSを追加すると、テーマ内の全てのh2に影響してしまいます。その為に全体の表示が変わってしまったりとリスクが大きい事を頭に入れておきましょう。

特定ウィジェットへのCSS追加

テーマの持つ全体への影響を考えると恐ろしい気もしますが、Elementor(無料版)には優しさがあり、セッションやカラム、ウィジェットに対しCSS上における固有の名前を付ける機能があります。

cssid_class

それが詳細にある「CSS ID」と「CSS クラス」です。ここに固有の名前を付けてあげる事で、追加CSSで特定のウィジェットのみを狙い撃ちする事が出来ます。

上の画像内の見出しウィジェット「h2の見出しです」にIDを付与し、追加CSSを入れてみたいと思います。まずは、IDに「h2midashi」と入れます。これは適当に付けた名前ですので、実際は皆さん自身で管理しやすいように決めて下さい。

cssid

次に、テーマのカスタマイズの追加CSSへCSSを入れていきます。

addcss_id

borderという枠線のコードです。3pxの線の太さの枠線が付いていれば成功です。

border_css

これでCSSが上の見出しだけに反映されています。

おじさん
おじさん
おぉぉぉ!なんか初めて尊敬した。

初めてって・・・(汗)

IDとクラスの違いとは?

簡単に言うと、IDは個人名、クラスはグループ名となります。CSSでは同姓同名は存在出来ませんので、IDは固有の1つにしか付与出来ません。それに対し、クラスはグループなので、同じグループ名が付いててもOKです。

例えば、Elementorで作ったページのh2の見出しだけ全てにCSSを反映させたい場合は、クラスを使います。反対に、このページのこの見出しだけにCSSを反映させたい場合はIDを使います。

また、CSSでそのIDやクラスを指定する方法も異なります。

ちょっとだけCSSを知る

CSSの基本的コードの書き方(構成)を少しだけ説明します。