【Elementor　✕　CSS】

本記事を見ることで、Elementorでは設定できないデザインを実現することができます。

※HTML/CSSの基本的な知識が必要になります。

「Simple CSS」

Elementorで作成したサイトにCSSを導入することで、自由なデザインのサイトを作成することができます。

ElementorにCSSを導入するには、「Simple CSS」プラグインを使用することがおすすめです。このプラグインを使えば、CSSを簡単に導入することができるだけでなく、CSSを１つの場所で管理できます。本記事では、Simple CSSの使い方も合わせて解説していきます。

まず、WordPressの管理画面から、「Simple CSS」をインストールします。インストールが完了したら、有効化します。

プラグインがインストールされたら、WordPressの管理画面の「外観」から「Simple CSS」を選択します。ここで、CSSのコードを追加することができます。

次からは実際にCSSを使用した例を元に、実装方法を解説していきます！

CSSを適用してみる

今回はCSSを適用する例として、ボタンを固定幅に設定するデザインを実装していきます。
Elementorで使用するボタンウィジェットは、スタイルの編集では固定幅を指定することができません。そのため、独自にCSSを適応する必要があります。

ウィジェットにクラスを追加する

ボタンにCSSを適応させるために、ボタンウィジェットにクラスを追加します。
ボタンウィジェットの「高度な設定」から「CSS クラス」を選択し、任意のクラス名（例：btn）を指定します。

クラスを指定したら、「更新」ボタンを選択して、ダッシュボードに戻ります。

CSSコードを追加する

CSS クラスを付与したウィジェットに対して、CSSコードを追加していきます。

「Simple CSS」を開き、コード記述部分に追加したクラス名を使用してスタイルを定義します。

例えば、先ほどのボタンの固定幅を500pxに設定するためには以下のコードを追加します。

.btn a {
    width: 500px;
}

コードを追加したら、「Save CSS」ボタンを選択して、導入が完了です！
CSS クラスを追加したボタンウィジェットを確認すると、幅が変化していることが確認できます。

以上で基本的な使い方は確認できました。次は、CSSの書き方について解説していきます！

CSSの書き方

ここからは、開発者ツールを使用してCSSを書く方法を解説していきます！
（※ここからはHTML/CSSの基本的な知識が必要です。）

開発者ツールを開く

※開発者ツールはWindowsのGoogle Chromeの場合を解説しています。

Elementor の編集画面を開き、左下の「変更をプレビュー」ボタンを選択します。

プレビュー画面を開いたら、Google Chromeの右上の「3点リーダーアイコン（⋮）」から、[その他のツール] > [デベロッパーツール]をクリックします。

開発者ツールでは、スタイルを確認しながらCSSを設定することができます。
では、CSSを設定していきましょう！

開発者ツール内で「Ctrl」+「F」を押して、検索バーを開き、クラス名を入れて「Enter」を押してボタンウィジェットを検索します。

次に、検索したボタンウィジェットにCSSを設定していきます。

開発者ツールの「Styles」の「＋」ボタンをクリックすると、新たにCSSを追加することができます。ここに、以下のコードを記載してみます。

.btn-2 {
    width: 500px;
}

しかし、これではボタンの幅が変化しないため、CSSが間違っていることが分かります。

では、CSS クラス（.btn-2）の中の要素にCSSを適用するために、以下のコードを記載してみます。

.btn-2 a {
    width: 500px;
}

ボタンの幅が変化しました！追加するCSSが分かったので、上記コードを「Simple CSS」に追加します。

このようにして、追加するべきCSSを確認し、CSSを追加することで、自由なデザインのサイトを作成することができます。
以上が、「Simple CSS」プラグインをElementorで使用する方法です。「Simple CSS」プラグインを使用してCSSを追加することで、独自のスタイルを再現することができます！

Elementorに「JavaScript」を追加する方法も以下で解説しています！