2024年1月29日 Recordamu

WordPressで追加CSSの使い方・CSS編集方法

WordPressで追加CSSの使い方・CSS編集方法

追加CSS機能の概要

WordPressの追加CSS機能は、管理画面から直接CSSを追加できる機能です。これにより、テーマファイルを編集することなく、サイトのデザインをカスタマイズできます。

追加CSSの特徴と利点

  • リアルタイムプレビュー:CSSの変更を即座にプレビューできます。
  • テーマ更新に影響なし:親テーマの更新後もCSSの変更が保持されます。
  • 初心者に優しい:子テーマの作成やFTPの利用が不要。

追加CSS機能の使用方法

1. 追加CSSの設定

  1. 管理画面にアクセス:WordPressの管理画面から「外観」→「カスタマイズ」を選択。
  2. 追加CSSを選択:カスタマイズメニューの中から「追加CSS」をクリック。
  3. CSSを記述:表示されたエディタにCSSを記述し、プレビューを確認。

2. 既存のクラスを使用

  1. クラスを確認:ブラウザの検証ツールを使用して対象要素のクラスを確認。
  2. CSSを記述:確認したクラス名に対してCSSを適用。
.example-class {
    color: #333;
    font-size: 16px;
}

3. 新しいクラスを追加

  1. 新しいクラスを追加:ブロックエディタの高度な設定で新しいクラス名を追加。
  2. CSSを記述:追加したクラス名に対してCSSを記述。
.new-class {
    background-color: #f0f0f0;
    padding: 10px;
}

CSSが適用されない場合の対策

  • 全角文字のチェック:クラス名やプロパティ名に全角文字が含まれていないか確認。
  • 誤字脱字の確認:プロパティや値の誤りがないか確認。
  • 詳細度の調整:詳細度が低いために適用されない場合は、詳細度を高める。

無料でCSSを学べるサイト

web.dev: Googleが提供するWeb技術学習サイト。基本から応用まで無料で学習可能です。

まとめ

WordPressの追加CSS機能を活用することで、手軽にサイトのデザインをカスタマイズできます。初心者でも簡単に扱えるため、まずは少しずつCSSを追加して、デザインを変更してみましょう。

,
Contact

contact

We welcome you to contact us for more information about any of our services.

お気軽にお問い合わせください。

Create a web

We can provide a wide range of services from web direction / design / coding / WP integration / numerical analysis. Please feel free to contact us for an initial consultation.

Webディレクション/デザイン/コーディング/WP構築/数値解析まで、幅広く対応いたします。お気軽にご相談ください。

Japan information

We can help you do business for Japan.
Japan has its own rules and regulations, and the Japanese are sensitive to them.
We can help you with content (translation, sales, etc.) that takes into account communication that will work in Japan.

日本向けのビジネスのお手伝いをします。日本で通用するコミュニケーションを考慮した施策(翻訳や営業など)をご提供します。

Use our services

If you would like to use this service, please contact us. We also looking for people to collaborate and extend our services. Please feel free to contact us.

サービスの利用に関して、弊社までご連絡ください。また、コラボレーションしてサービスを拡張してくださる方も募集しています。

Contact