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

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

Share on facebook
Share on twitter
Share on google
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の基本的コードの書き方(構成)を少しだけ説明します。

cssbasic

これを文章にして読むと、

CSS ID(h2midashi)が付いている物に{ }の中に記載されている効果「3pxの太さの枠線をつける」を加えて下さい。

と、なります。

このセレクタが奥深いのですが、ここではIDの時の指定方法とクラスの時の指定方法を説明します。

CSS IDのときは「ハッシュ」クラスは「.(ドット)」

CSS ID(特定の個人の様なもの)の場合は、先頭に「#(ハッシュ)」を付けます。CSS クラス(特定のグループ)の場合は、先頭に「.(ドット)」を付けて書き始めます。

cssclass_demo

CSS クラスは同じグループのメンバーという事で、「.(ドット)」でCSSコードを書き始めます。

cssclass_demo2

テーマのカスタマイズの追加CSSに、上の画像のコードを入力。これで、枠線が付いているか・・・

cssclass_demo3

おじさん
おじさん
おぉ!すごい、今日はなんか違うね。


何故でしょうか・・・(ぼそっ)

重要なのはセレクタだけ!

これでElementorの無料版でもCSSの追加が出来る事がわかって頂けたかと思います。残念なところはリアルタイムにCSSの反映をプレビュー出来ない所とテーマのCSSに追加する為に、サイト全体に影響を与えるリスクくらいで、CSSとしては十分に機能します。

あと、テーマのカスタマイズ画面とElementorの編集画面をいったり来たりすると大変なので、2つのタブElementorの編集画面と、テーマのカスタマイズ画面をそれぞれ表示させながら編集すると比較的便利です。

おじさん
おじさん
でも結局CSS勉強しないと使えないのでは?


今日のおじさんいいですね!いつもと違うな〜w

CSSを覚える必要はありません。なぜなら・・・テンプレートの様にCSSコードを公開してくれているサイトが結構あるからです。それらの提供しているCSSコードをコピーして、追加CSSに貼り付け、セレクタ部分をElementorで指定したCSS IDやCSS クラスにしてあげるだけ。

つまり!セレクタさえ理解出来れば、あとはコピペでOKなのです。

お世話になっているサイト紹介と実例

便利でおしゃれなCSSがある「サルワカ」さん

サルワカさんです!実際のデザインとともにCSSが記載されており、コピペで使ってOKという超絶ありがたいサイトです。

saruwaka

こんな感じでとっても分かりやすくまとめられてます!コードの部分をコピーしてテーマの追加CSSに貼り付け、セレクタ部分をElementorで設定したIDやクラスに変更するだけで・・・

copypaste_selector

先程の見出しウィジェットに名付けたCSS ID(h2midashi)を使います。CSS IDなので、#(ハッシュ)から始めます。そして公開するのを忘れずに。

saruwaka_demo

ね!

おじさん
おじさん
ふ〜ん


あれ?さっきまでの感動的リアクションは?

まとめ

Pro版はリアルタイムに変化するの、やっぱり便利ですが、無料版も少しの手間でCSSを追加する事が出来ました!コピペで使えるCSSを公開しているサイトも多く、ノンプログラマーの方でもCSSをバンバン追加出来ちゃいます。

それに不思議となれてくると、コピペしなくてもコードを書いている自分がたまにいるんですよね。自然とおぼえちゃうからCSSの勉強にもなります!

是非1度、トライしてみて下さい!

 

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。