ElementorフォントがGutenbergスタイルをオーバーライドできない問題の実用的な解決策

WordPressでウェブサイトを構築する場合、多くの人がエレメンタ歌で応えるグーテンベルク・エディター.どちらにも利点があるが、フォントスタイルの競合に遭遇することもある。例えば、Elementorでフォントを設定しても、Gutenbergで編集したコンテンツでは、これらのフォント設定は機能せず、Gutenbergのデフォルトスタイルによって上書きされているように見えます。この記事では、なぜこのようなことが起こるのかを説明し、フォントを正しくスタイル設定しやすくするための実践的な解決策をいくつか紹介します。

Elementorのフォント設定がGutenbergのスタイルによって上書きされるのはなぜですか？

Gutenbergエディターには、特に段落、見出し、リストなどの要素について、フォント、フォントサイズ、行の高さなどのCSSルールが組み込まれたスタイル指定がデフォルトで用意されています。これらのルールは優先順位が高い傾向にあり、Gutenbergスタイルファイルに直接記述されます。Elementorがページ上でフォントをグローバルに設定してもグーテンベルクコンテンツブロック自体には強制的なスタイリングが付属しているため、Elementor でフォントを調整しても効果がないように見えてしまいます。

一言で言えばスタイルの対立歌で応える優先順位Gutenbergはコンテンツブロックにデフォルトのフォントスタイルを追加し、Elementorが設定したフォントを上書きします。

解決策1：GutenbergコンテンツブロックにカスタムCSSを追加する

これを行う最も直接的な方法は、次のように書くことである。カスタムCSSでセレクタの優先度を上げ、Elementorのフォントスタイルを有効にします。

ワードプレスの外観"→"カスタマイズ "に進みます。テーマカスタマイザーが開きます。

Extra CSS」または「Custom CSS」オプションを見つけます。ほとんどのテーマは、ここに余分なCSSコードを追加することをサポートしています。

以下のコードをコピーして、CSS編集ボックスに貼り付けます。

.entry-content p、
.entry-content h1, .
.entry-content h2, .
.entry-content h3, .
.entry-content h4, .
.entry-content h5, .entry-content h7, .entry-content h8, .entry-content h9
.entry-content h6 {
  font-family: 'フォント名', sans-serif !important；
}

以下は エントリー・コンテンツ は、多くのテーマコンテンツエリアのメインコンテナクラスの名前で、テーマに合わせて調整することができます。重要 優先順位を上げ、フォント設定がGutenbergのデフォルトよりも優先されるようにするために使用します。

解決策2：ElementorのグローバルCSSによる調整

Elementorで統一されたフォント・コントロールに慣れているなら、ElementorのグローバルなカスタムCSS必須エレメンタル・プロ):

WordPressのバックエンドを開き、Elementor → Custom Code → Add Codeと進む。

カスタムCSS入力ボックスに以下のコードを追加する。

セレクタp
セレクタh1
セレクタh1, セレクタh2, セレクタh2
セレクタh2、セレクタh3、
セレクタh3, セレクタh4, セレクタh4
セレクタh4、セレクタh5、セレクタh6 {セレクタh4、セレクタh5、セレクタh6
セレクタh6
  font-family: 'フォント名', sans-serif !important；
}

以下は セレクタ 自動的に現在の編集領域に配置されます。フォント設定をElementorテーマスタイルに追加するには重要他のスタイルによって上書きされないようにするためである。

解決策3：Gutenberg独自のスタイルを無効にする

Gutenbergのデフォルトスタイルにあまり依存しない場合は、オフにすることもできます。例えば、テーマやプラグインを使ってGutenbergのフロントエンドのスタイル読み込みを無効にすることが可能だ：

WordPressのバックエンドにアクセスし、「外観」→「テーマファイルエディター」を選択します。

テーマのfunctions.phpファイルを開く

ファイルの最後に以下のコードを追加します。

関数 disable_gutenberg_frontend_styles() {
    wp_dequeue_style( 'wp-block-library' )；
}
add_action( 'wp_enqueue_scripts', 'disable_gutenberg_frontend_styles', 100 ); } 。

しかし、これは慎重に行うべきであり、他のブロックのスタイルパフォーマンスに影響を与える可能性がある。最初にバックアップテストし、再利用する。

解決策4：Elementorでコンテンツ作成を優先する

もしあなたのサイトが高いビジュアルスタイルを要求し、フォントの統一性が重要であるならば、Gutenbergよりも多くのページや記事のコンテンツにElementorを使うことを検討してください。エレメンタコンフリクトを避けるためだ。

短い

フォントスタイルに一貫性がないのは、たいていGutenberg独自のCSSの優先順位が高く、Elementorの設定を上書きしてしまうことが原因です。カスタムCSSで優先順位を上げるか、Gutenbergのスタイルをオフにするか、あるいはGutenbergのコンテンツの使用を減らすことでこの問題を解決しましょう。これらの方法を導入することで、ウェブサイトのフォントが統一され、よりプロフェッショナルで統一感のある見た目になります。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み