【WordPress専門用語集No.118】今更聞けない！カスタムCSS（Custom CSS）を徹底解説

WordPress用語集 WordPressテーマ
WordPress用語集
2024.05.27
この記事は約4分で読めます。

このページでは、WordPressの「カスタムCSS（Custom CSS）」について、初心者にもわかりやすく解説しています。

【まずはおさらい】WordPressとは

WordPressは、ウェブサイトやブログを簡単に作成・管理できるオープンソースのコンテンツ管理システム（CMS）です。プログラミングの知識がなくても、豊富なテーマやプラグインを利用して、デザインや機能を自由にカスタマイズすることができます。

WordPressの便利な機能の一つに「カスタムCSS（Custom CSS）」があります。これにより、ウェブサイトのデザインをより細かくカスタマイズすることができます。

カスタムCSS（Custom CSS）とは

カスタムCSS（Custom CSS）とは、ユーザーが自由にCSSコードを追加してウェブサイトのデザインをカスタマイズできる機能です。これにより、テーマのデフォルトデザインに縛られることなく、独自のスタイルを適用することができます。

例えば、特定のセクションの背景色を変更したり、フォントのサイズやスタイルを調整したりすることが可能です。CSSの基本的な知識があれば、簡単にデザインの微調整を行うことができます。

カスタムCSS（Custom CSS）を理解するためのわかりやすい具体例①

例えば、ウェブサイトのヘッダー部分の背景色を変更する場合、以下のようにカスタムCSSを追加します。

header {    background-color: #ffcc00;}

このコードを追加することで、ヘッダー部分の背景色が黄色に変更されます。

カスタムCSS（Custom CSS）を理解するためのわかりやすい具体例②

次に、特定のクラスに対してフォントサイズを変更する場合の例です。

.custom-text {    font-size: 20px;}

このコードを追加すると、クラス「custom-text」が適用されたテキストのフォントサイズが20pxに変更されます。

カスタムCSS（Custom CSS）はどんな時に使われるもの？

カスタムCSS（Custom CSS）が実際に使われるケースについて紹介します。

利用例①

例えば、テーマが提供するデザインに一部変更を加えたい場合にカスタムCSSを使います。デフォルトのボタンスタイルを変更する場合などが典型的な例です。

利用例②

また、特定のプラグインが提供するスタイルをカスタマイズしたい場合にもカスタムCSSが役立ちます。フォームのデザインを微調整する場合などがあります。

カスタムCSS（Custom CSS）の活用方法

WordPressでカスタムCSS（Custom CSS）を活用する方法を、ステップごとにわかりやすく紹介します。

※WordPressの導入後からの流れを解説しています。

WordPress導入方法はこちら a:hover { text-decoration: underline; }

  • ステップ①｜テーマカスタマイザーを開く

    • 管理画面から「外観」→「カスタマイズ」を選択します。

    テーマカスタマイザーは、テーマの設定を変更するためのインターフェースです。

  • ステップ②｜「追加CSS」を選択する

    • テーマカスタマイザーのメニューから「追加CSS」を選択します。

    ここにカスタムCSSコードを追加することで、サイト全体のデザインをカスタマイズできます。

  • ステップ③｜CSSコードを入力する

    • 「追加CSS」セクションにカスタムCSSコードを入力します。

    入力したコードは即座にプレビューに反映されるので、変更内容を確認しながら編集できます。

  • ステップ④｜変更を保存する

    • 編集が完了したら「公開」ボタンをクリックして変更を保存します。

    保存することで、入力したカスタムCSSが実際のサイトに適用されます。

あわせてこれも押さえよう！

まとめ

カスタムCSS（Custom CSS）は、WordPressのテーマやプラグインのデフォルトデザインを自由にカスタマイズできる強力なツールです。CSSの基本を学び、自分のサイトに適用することで、より魅力的で個性的なウェブサイトを作成することができます。

スポンサーリンク