ElementorにCSSを追加する6つの方法

ElementorにCSSを追加する6つの方法- 全部知ってるかな?

Elementorを使っていてCSSを追加したいと思ったことありませんか?

この記事でElementor限定のものやWordPress一般のものも含め、ElemetnorにCSSを追加する6つの方法を紹介します。

  1. テーマの追加CSSを使う
  2. ElementorのHTMLウィジェットにCSSを入れる
  3. Elementor ProのカスタムCSSを使う
  4. Elementor Proのカスタムコードを使う
  5. CSSコード挿入プラグインを使う
  6. テーマのスタイルシートを使う

これら6つの方法を紹介していきます。

1. テーマの追加CSSを使う

追加CSSでElementorにCSSを追加する

AstraやHelloやOceanWPなどのElementorと相性のいいテーマを使っていれば、外観→カスタマイズ→追加CSSで、CSSを追加できます。

Elementorの高度な設定からIDやCSSクラスを追加して特定のウィジェットをスタイル

Elementorの高度な設定からCSS IDとCSSクラスを追加

特定のウィジェットをスタイルしたい場合は、このようにElementor外からCSSを入れる場合はIDやCSSクラスを追加する必要があります。

Elementorの高度な設定からCSS IDとCSSクラスを追加
テーマの追加CSSでCSSを追加する

このようにテーマのカスタマイズの追加CSSからCSSを追加することが可能です。

2. ElementorのHTMLウィジェットにCSSを入れる

ElementorのHTMLウィジェットでCSSを追加する

ElementorのHTMLウィジェットを使えばCSSやJavaScriptをそこに追加することができます。

ElementorのHTMLウィジェットの編集画面

styleタグが必要

ですが、このやり方の場合は<style>と</style>でコードを囲む必要があるので気をつけてください。

<style>
   .tofu-container {
      background: green;
   }
</style>

3. Elementor ProのカスタムCSS

Elementor Proがあれば、各ウィジェットのカスタムCSSという機能を使うことができます。
ここに自由にCSSを追加できます。

selectorを使うことでそのウィジェットをターゲットできる

上の画像のようにselectorセレクタを使うことで、このカスタムCSSを追加してるウィジェットのみをターゲットしてCSSを指定することができます。
上の例だと、このウィジェットの背景を青にします。

4. Elementor Proのカスタムコードを使う

ElementorのCustom Code

Elementor Proで使えるCustom Codeは自由にサイトにコードを追加することができます。

ElementorのCustom Code追加ボタン

このボタンを押します。

ElementorのCustom Code追加画面

タイトルは後から見るためのものなので特に気にする必要はないです。

Location: サイトのどこにコードをいれるのか設定可能。CSSはheadにいれましょう。
Priority: コードがロードされる順番。数が大きい方が後からロードされます。

Elementor ProのCustom Codeもstyleタグが必要

Elementor Proのカスタムコードの例

公開とDisplay Condition

ElementorのCustom CodeのDisplay Condition

公開を押すと、このようにDisplay Condition(表示条件)というものが表示されます。
これはElementor Proのポップアップテーマビルダーでも使われるものです。

ここでEnetire Siteが選択されていれば、全ページでCSSがロードされます。

5. CSSコード挿入プラグインを使う

WPCodeやCode Snippetsなどのプラグインを使う

プラグインを使えばElementor Proがなくても簡単にコードを挿入することができます。

代表的なものにWPCodeとCode Snippetsというプラグインがあります。

いつでも特定のコードをオンオフ出来るので便利

コード挿入プラグインはいつでも特定のコードをオンオフ出来るので便利

このように特定のコードをオンにしたりオフにしたりできるんです。

テーマに左右されない

テーマのカスタマイザーにCSSをいれてしまうと、テーマを変える時にそれも移動させないといけなくなります。
でもこのようなプラグインを使うとテーマに依存しないので、テーマを変えてもそのまま使えます。

6. テーマのスタイルシートを使う

WordPressテーマのstyle.css

全てのテーマにstyle.cssというCSSファイルがついてきます。このファイルにCSSを追加することで、CSSをElementorに反映できます。

外観 → テーマファイルエディター → スタイルシートでstyle.cssの編集画面へいけます。

どの方法を使ってCSSをサイトに入れるべき?

基本的にはElementor ProがないならCSSコード挿入プラグインを使い、Proがあるならカスタムコードを薦めます。

HTMLウィジェットやカスタムCSSでいれると後から管理が難しくなりますので注意してください。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通