Elementorのようなページビルダーの最大の魅力は、すぐに使える状態のページ要素（ウィジェット）。Elementorのウィジェットは柔軟性が高く、さまざまな設定を行うことができます。しかし、場合によっては、CSS（カスケーディングスタイルシート）が有用になることがあります。
CSSを使うと、サイトのあらゆる構成要素を高度に管理することができ、知識さえあれば、WordPressでの使用も簡単です。そして、ElementorでもカスタムCSSを利用することができます。
ElementorでのカスタムCSSの利用方法について動画での解説もご用意しています。
この記事では、CSSについて、そしてElementorでカスタムCSSを使用する方法をご紹介します。併せて、WordPressでCSSを使用する際のヒントも押さえておきましょう。
CSSとは
CSSとは、いわゆるスタイルシート言語です。HTMLやXML文書にスタイルを追加することができます。CSSを活用することで、標準的なHTMLページを、おしゃれなデザインに変更可能です。
ブラウザ上で要素の表示方法を記述するための言語で、あらゆるブラウザで動作し、インターネットの中核をなす言語の1つでもあります。
例えば、以下のCSSコードを使用すると、HTML文書の本文に背景色（赤）を指定することができます。
body {
background-color: red;
}このように、HTMLの特定の要素、クラス、IDにアレンジを加えることができます。以下は、ページ上のすべてのH2（中見出し）の文字色と配置を指定するコードの例です。
h2 {
color: black;
text-align: left;
}通常、HTMLページを読み込むと、すべてのCSSコードが記述された別のスタイルシートも読み込まれるため、複数のページで共通して1つのスタイルシートを利用することができます。
CSSのコードは、どのHTMLページにも柔軟に適用することができます。また、インラインとして記述する（1つのHTML要素に直接指定するCSSコード）ことも可能です。
例えば、特定のH2タグに書き込むインラインCSSは、以下のようになります。
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>CSSは、スタイルシートで記述するのがベストプラクティスとされていますが、WordPressとElementorを使用している場合は、ファイルを編集せずにCSSを追加することができます。では、その仕組みを詳しく見ていきましょう。
ElementorのカスタムCSS
普段からElementorをお使いなら、Elementorでは、セクション、カラム、ウィジェットでページを構成することはご存じのはず。セクションには、1つまたは複数のカラムがあり、カラムにはそれぞれ複数のモジュールを追加することができます。
Elementorのもう1つのメリットは、セクション、カラム、ウィジェットに別々のCSSコードを使用できること。セクションにカーソルを合わせて、6つの点のアイコンを選択すると、画面左側に「セクションの編集」メニューが表示されます。
「セクションの編集」メニューの「詳細」タブを選択して、「カスタムCSS」セクションに移動します。すると、このセクションに追加したいコードを記述するフィールドが表示されます。
セクション同様、カラムやウィジェットの設定メニューにも「レイアウト」、「スタイル」、「詳細」の3つのタブがあります。
カラムにカスタムCSSを貼り付けるには、カラムにカーソルを合わせて、要素の右上に表示される2カラムのアイコンを選択します。次に、「詳細」タブに移動して、「カスタムCSS」を開きます。
ウィジェットの場合も同様です。該当のウィジェットを選択し、「詳細」＞「カスタムCSS」に移動するだけです。
このように、Elementor内の特定の要素にカスタムCSSを適用する方法は、非常にシンプルです。なお、カスタムCSSで適用するアレンジは、その要素にのみ適用されます。サイト全体に変更を加えたい場合には、別の方法でカスタムCSSを追加します。
ElementorでカスタムCSSを利用する方法（5つのパターン）
では、ElementorでカスタムCSSを利用する他の方法も見ていきましょう。CSSをウェブサイト全体、特定のページ、ウィジェットに適用する方法をそれぞれご紹介します。
方法 1. HTMLウィジェットを使用する
Elementorでは、どのウィジェットにもカスタムCSSを記述することができますが、時にはHTMLを使って要素を追加したいこともあるはず。この場合は、「HTML」ウィジェットを使用します。
「HTML」ウィジェットは、HTML、CSS、JavaScriptをパースしてくれるため、「HTML コード」フィールド内に自由にコードを記述して、ウィジェットとして表示することができます。
インラインとスタンドアロンの両方のCSSが使用できます。なお、「HTML」ウィジェットに貼り付けたコードは、その要素のみに適用されます。
方法 2. サイト設定を使用する
Elementorには、WordPressのカスタマイザーにもあるようなグローバル設定があります。Elementorのエディターを開いて、画面左上にあるハンバーガーメニュー（横3本線のアイコン）をクリックして、「サイト設定」に移動しましょう。
次の画面に表示される「サイト設定」を選択します。
この画面には、サイトのスタイルを編集するための設定項目が揃っています。この画面上で行った変更は、すべてサイト全体に反映されます。
「サイト設定」でページを編集する方法については、Elementorの公式サイトをご覧ください。今回の記事では、「カスタムCSS」タブについてのみご説明していきます。「カスタムCSS」をクリックすると、先ほどのセクション、ウィジェット、カラムと同じようなフィールドが表示されます。
このフィールドに貼り付けるカスタムCSSは、ウェブサイト全体に影響します。特定の要素だけに反映したい場合には、別の方法（ウィジェットに直接CSSを貼り付けるするなど）を選んでください。
方法3. WordPressのカスタマイザーを利用する
WordPressのカスタマイザーで、サイト全体に適用するカスタムCSSを追加する方法もあります。「外観」＞「カスタマイズ」に移動して、左側メニューにある「追加CSS」を選択します。
ただし、ElementorのCSSフィールドの方が使いやすいため、すでにElementorを使用してサイトを構築している場合には、あえてこの方法を選ぶ必要はありません。
方法 4. カスタムCSSファイルを読み込む
WordPressのファイルを編集したり、FTP（File Transfer Protocol）クライアント経由でサイトにアクセスしたりすることに抵抗がなければ、Elementorで読み込むCSSスタイルシートを指定する方法もあります。具体的には、WordPressのfunctions.phpファイルにコードを貼り付けます。
functions.phpファイルにアクセスするには、FTPでサイトに接続し、WordPressのrootフォルダに移動します。フォルダ内でfunctions.phpファイルを見つけて開いてください。
例えば、以下のようなコードを貼り付けます。
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );上のコードでは、「before_enqueue_scripts」フックを使用し、「get_stylesheet_uri()」関数で、サーバー内のスタイルシートの場所を指定して、「custom-stylesheet」というスタイルシートを読み込んでいます。
カスタムスタイルシートは、子テーマのディレクトリ内、またはThemesフォルダに追加するのが理想的です。スタイルシートに好みのElementor用CSSコードを記述し、functions.phpに追加したコードは、サイトでElementorが有効である時にだけ読み込まれます。
方法 5. CSSプラグインを使用する
プラグインを使えば、カスタマイザーやページビルダーなしでカスタムCSSを利用することができます。Simple Custom CSS and JSがお勧めです。
Simple Custom CSS and JSを使うと、テーマのヘッダーとフッターの要素に直接コードを貼り付けることができるようになります。まず、「カスタム CSS ＆ JS」＞「カスタム CSSの追加」に移動し、「CSS コードの追加」をクリックします。
左側にCSSエディターが表示され、右側のセクションでCSSコードを外部スタイルシートで読み込むか、内部で読み込むかを指定します。また、コードをヘッダーとフッターのどちらに適用するかも選択することができます。
CSSコードの編集を終えたら、「公開」ボタンをクリックして完了です。フロントエンドビューに切り替えて、コードの動作を必ず確認しましょう。
ElementorでのカスタムCSS利用時のヒント
サイトでカスタムCSSなどのコードを使用する際には、以下の点をぜひ考慮してみてください。
WordPressの子テーマを使用する
CSSを使ってテーマのスタイルを変更するなら、子テーマが便利です。子テーマとは、指定されたテーマのスタイルをすべて継承したテンプレートです。
子テーマにコードを貼り付けることで、元のテーマを更新しても、子テーマの変更を保持することができます。
プリプロセッサで作業を簡易化
WordPressやElementorでコードを扱うにあたっての懸念点は、最新のコードエディターに搭載されている機能をすべて利用できないことです。そのため、デフォルトのエディターでコードを記述するのではなく、好きなプリプロセッサを使用して、記述したコードをWordPress、またはElementorに貼り付けるようにすると、作業を効率化できます。
ステージングサイトを利用する
WordPressサイトに大きな変更を加える場合は、ステージングサイトを使用することをお勧めします。スタイルや機能を変更する際、本番サイトに適用する前にステージングサイトでテストを行えば、何か問題が生じても安心です。
一部のサーバーは、ステージング環境を提供しています。Kinstaの場合は、コントロールパネルのMyKinstaで該当のサイトを選択し、本番環境とステージング環境を簡単に切り替えることができます。
お使いのサーバーにステージング機能がない場合、DevKinstaのようなローカル開発ツールを利用してテストする手もあります。または、これを機にサーバーの乗り換えを検討してみてもいいかもしれません。
まとめ
ご紹介した通り、ElementorでのカスタムCSSの使用方法は非常に簡単で、セクション、カラム、ウィジェット、そしてサイト全体にCSSコードを適用することができます。
最後のまとめとして、Elementor（またはElementorに限らずサイト全般）にカスタムCSSを追加する方法は、以下の通りです。
- Elementorの「HTML」ウィジェットを使用する
- Elementorの「サイト設定」を使用する
- WordPressのカスタマイザーを使用する
- カスタムCSSファイルを読み込む
- CSSプラグインを使用する
Kinstaでは、Elementorのようなページビルダーを使った理想のサイトづくりを支援するサーバープランをご用意しています。詳しくはKinstaのプランページをご覧いただくか、営業部門にお気軽にお問い合わせください。
コメントを残す