あなたも私と同じように、ウェブサイトに実現させたいアイデアがたくさんあるのではないでしょうか。Elementorを使えば、ドラッグ＆ドロップ機能や既成の要素を使って簡単にユニークなデザインを作成できますが、純粋なCSSの威力に勝るものはありません。この記事では、ElementorでカスタムCSSを追加し、ウェブサイトのデザインをさらに進化させる方法をご紹介します。
ElementorでカスタムCSSを追加する3つの一般的な方法
ElementorでカスタムCSSを追加する方法は様々です。ここでは、特におすすめの3つの方法をご紹介します。.
- WordPressカスタマイザーを使用する
- CSSプラグインを使用する
- HTMLウィジェットの使用
WordPress カスタマイザーを使用します。.
Elementor にカスタム CSS コードを追加するには、次の手順に従います。
- 「外観」>「カスタマイズ」へ移動
- WordPress カスタマイザーで、「追加 CSS」をクリックします。.
- 「追加CSS」セクションが開きます。テキストボックスにコードを貼り付けるか、「カスタムCSSを追加」ボタンをクリックしてコンピューターからファイルを参照してコードを追加できます。.
CSSプラグインを使用する
市場には、Simple CSS、Custom CSS Pro、CSS Hero など、Elementor にカスタム CSS を追加できるさまざまなプラグインがあります。.
まず、 「カスタム CSS & JS」>「カスタム CSS の追加」、「CSS コードの追加」をクリックします。
左側に基本的なCSSエディタが表示されます。右側の設定オプションを使用して、CSSコードを内部で読み込むか、外部スタイルシートで読み込むかを選択できます。また、コードをヘッダーに配置するかフッターに配置するかを選択することもできます。
CSS コードの編集が完了したら、 「公開」ボタンをクリックします。
注:コードの動作を確認するには、フロントエンド ビューに切り替えてください。
HTMLウィジェットの使用
HTMLウィジェットを使って、ElementorにカスタムCSSを追加できます。このオプションを使うには、 HTMLウィジェットをドラッグ＆ドロップし、スタイルタグ内にCSSコードを追加するだけです。
カスタムCSSは、ウェブサイトにカスタムコードを追加する方法です。ウェブサイトの外観や雰囲気の変更から機能の追加まで、様々な用途に使用できます。.
カスタム CSS を追加する方法がわかったので、次の手順に従って Web サイトでカスタム CSS を使用できます。
- Elementorのエディターウィンドウを開き、左上の「+」アイコンをクリックします。
- 「カスタムコード」をクリックし、`.elementor-custom-css{display:none;}` というコードを貼り付けます。このコードは、「設定」>「カスタムCSS」または「外観」>「テーマオプション」>「カスタムCSS」（WordPressのバージョンによって異なります）にあります。.
結論
カスタムCSSの追加方法がわかったので、Elementorの柔軟性を活用できます。次回、何かが期待通りに動作しない場合は、プラグインやテーマの変更で修正するのではなく、CSSコードを追加してみてください。
関連コンテンツ
- CSS フレームワークとは何ですか?
- WordPress で未使用の CSS を削除するにはどうすればいいですか?
