WordPress カスタムCSSを追加:カスタマイズするvs。 チャイルドテーマ

Last Updated:2024年04月09日| | コメントを残す

WordPressでカスタムCSSを追加するにはさまざまな方法があります。 大幅にカスタマイズする 追加CSSに追加するか、チャイルドテーマ内のスタイルシートファイル(style.css)に追加する方法があります。 さらに、各テーマのテーマオプションで提供されるカスタムCSSセクションに追加したり、エレメントページビルダーの場合は、個々のセクションまたは個々の要素のカスタムCSSからカスタムCSSを追加することもできます。

WordPress カスタムCSSを追加:カスタマイズするvs。 チャイルドテーマ

WordPressでは、さまざまな方法でカスタムCSSを追加できるので、使い慣れた方法でCSSコードを追加することができます。

カスタマイズの追加のCSSセクションに追加するときの注意

ただし、最近 WordPress テーマが更新されると、突然カスタマイズする際に追加のCSSに追加したコードがすべて消える現象を経験しました。 (そんな可能性はありませんが)私がCSSを修正する過程で、ちらつきがすべて選択して削除したのかはわかりませんが、突然カスタムCSSが消えるのは初めてだと少し戸惑いました。

カスタムCSS デザイン ( WordPress 6.5 未満のバージョンでは、ルックス") »カスタマイズする»追加CSSに追加する場合は、CSSコードをコピーして安全な場所に保管することをお勧めします。 たとえば、テキストファイルとしてPCの特定のフォルダに保存したり、電子メールで送信したりすると、今後問題が発生したときに簡単に回復できます。

また、テーマを変更してもカスタマイズに追加したコードが消える可能性があるため、あらかじめバックアップした後に進んでください。

カスタマイズの追加CSSにユーザーCSSを追加する場合...

  1. 時にはエラーが発生する可能性があるため、コードをすべてコピーして別々のTXTファイルにバックアップすることは安全です。
  2. ハングル入力時に消えるバグがあります。ハングル入力時にスペースキーを押すか、エンターを押すとハングルが消えるので、ハングル入力後にスペースやエンターを押さずに、矢印キーを使って左右に移動した後にスペース/エンターを押すことができます。
  3. WebでCSSコードを貼り付けると、正しく認識されず、エラーが表示されることがあります。この場合、直接入力することができます。
  4. カスタマイズにCSSコードを追加すると、サイトの個々のページ/記事のヘッダーセクションに追加され、HTMLソースビューでそのCSSコードを簡単に確認できます。
  5. テーマを変更すると、追加のCSSのコードが消えます。

エレメンプロを使用する場合は、個々のウィジェットやセクションなど 詳細 » Custom CSSにカスタムCSSを追加できます。

WordPress カスタムCSSを追加:カスタマイズするvs。 チャイルドテーマ

この方法では、ページを離れることなくカスタムCSSコードを追加できるという利点があります。 しかし、後でそのコードを変更したい場合は、どこにコードを追加したのかを見つけるのは難しいかもしれません。

チャイルドテーマ 内のスタイルシートファイル(style.cssの)にCSSコードを追加できます。 この方法でコードを追加する場合は、定期的にチャイルドテーマフォルダをPCやクラウドなどにバックアップすると良いと思います。

GeneratePress テーマの更新

このブログに適用された GeneratePress テーマ最近のアップデートでは、HTML構造がfloatsからより効率的なflexboxに変わりました。

WordPress GeneratePress テーマ構造の変更

新しくインストールした場合、デフォルトではflexbox構造が適用されているようです。 既存のユーザー 外観 » カスタマイズ » Generalに移動し、 Structureから構造 フレックスボックスに切り替えることができます。 このオプションを使用して切り替えると元に戻せません。Flexboxに変更したい場合は、バックアップを受け取った後に進んでください。

新しいナビゲーション検索モーダル機能を使用するには、構造をFlexboxに置き換えて Icon Type(アイコンタイプ)SVGに設定する必要があります。 Flexboxの基本概念については、Mozillaのドキュメントを参照してください。

構造をFlexboxに変更すると、既存に追加した一部のCSSスタイルが正しく機能しなくなる可能性があります。 たとえば、このブログのヘッダーに適用した色合いが消えて、次のようなコードを追加しました。

/* header */
#site-navigation {
    -moz-box-shadow: 0 4px 4px rgba(156,156,156,.4);
    -webkit-box-shadow: 0 4px 4px rgba(156,156,156,.4);
    box-shadow: 0 4px 4px rgba(156,156,156,.4);
}

また、 WordPressが更新されると、ブロックエディタの一部のブロックの構造が変わった可能性があります。 既存のブロックに適用したCSSが機能しない場合があります。 たとえば、このブログでは コード ブロックに追加した既存のコードの一部が機能しないため、コードを修正しました。

最後に、

カスタマイズの追加CSSセクションを使用すると、 FTPに接続する必要なし WordPress 通知パネルでカスタムCSSスタイルを追加できるという利点があります。 追加のCSSコードをコピーして別のファイルに保存すると、後でコードが消えるなどの問題が発生したときに簡単に復元できます。 また、チャイルドテーマのスタイルシートファイルにカスタムCSSを追加する場合でも、子テーマフォルダをコンピュータまたはクラウドにバックアップすることは安全です。

参照


コメントを残す

コメント