WordPressで追加CSSの使い方・CSS編集方法
追加CSS機能の概要
WordPressの追加CSS機能は、管理画面から直接CSSを追加できる機能です。これにより、テーマファイルを編集することなく、サイトのデザインをカスタマイズできます。
追加CSSの特徴と利点
- リアルタイムプレビュー:CSSの変更を即座にプレビューできます。
- テーマ更新に影響なし:親テーマの更新後もCSSの変更が保持されます。
- 初心者に優しい:子テーマの作成やFTPの利用が不要。
追加CSS機能の使用方法
1. 追加CSSの設定
- 管理画面にアクセス:WordPressの管理画面から「外観」→「カスタマイズ」を選択。
- 追加CSSを選択:カスタマイズメニューの中から「追加CSS」をクリック。
- CSSを記述:表示されたエディタにCSSを記述し、プレビューを確認。
2. 既存のクラスを使用
- クラスを確認:ブラウザの検証ツールを使用して対象要素のクラスを確認。
- CSSを記述:確認したクラス名に対してCSSを適用。
.example-class {
color: #333;
font-size: 16px;
}
3. 新しいクラスを追加
- 新しいクラスを追加:ブロックエディタの高度な設定で新しいクラス名を追加。
- CSSを記述:追加したクラス名に対してCSSを記述。
.new-class {
background-color: #f0f0f0;
padding: 10px;
}
CSSが適用されない場合の対策
- 全角文字のチェック:クラス名やプロパティ名に全角文字が含まれていないか確認。
- 誤字脱字の確認:プロパティや値の誤りがないか確認。
- 詳細度の調整:詳細度が低いために適用されない場合は、詳細度を高める。
無料でCSSを学べるサイト
web.dev: Googleが提供するWeb技術学習サイト。基本から応用まで無料で学習可能です。
まとめ
WordPressの追加CSS機能を活用することで、手軽にサイトのデザインをカスタマイズできます。初心者でも簡単に扱えるため、まずは少しずつCSSを追加して、デザインを変更してみましょう。