• Elementor
  • WordPressを自在に更新できるページビルダー型エディタ"Elementor"の機能と使い方を紹介!

Elementorで賢威8 見出しCSSが上書きされて余白が無くなる件

 WordPressのテーマを賢威8にバージョンアップしたところ、Elementorが見出のCSSを勝手に上書して余白が無くなる事例が発生。その原因と解決策を紹介します。

賢威8の見出しの余白がない!

Namara Groupで運営している別のサイトでは賢威8を使っています。Pagespeedの評価も高く、モバイルにも対応したレスポンシブのテーマなので重宝しています。アフィリエイトをやるサイトで効果をあげています。(今ご覧いただいているサイトは趣味のサイトでデザイン重視のため賢威8ではありません。ご容赦ください。) さて、前置きは長くなりましたが、その賢威8。最新型ということもありさすがの高性能です。PageSpeed Insightsの点数も90点以上を簡単に出してくれるのですが・・・。 賢威で運営中のサイト

見出しがおかしい!

 このようなデザインになってしまい、違和感があります。文字の周りの余白が欲しいところです。もともとのテーマのCSSではちゃんと余白が設定されていますので、Elementorを停止したらデザインは戻ります。Elementorを使わずに記事の更新もできますが、なんといっても超便利なプラグイン。SEOにもさほど影響がなさそうであればできるだけ使いたいのです。でも、このデザインへの影響・・・。CSSがElementorで上書きされるというどうにもし難い事態。解決策を探りました。 

原因はプラグインのCSS

 chromeの検証機能を使うと、どのようなスタイルが適用されているかがわかります。見てみると、elementor-widger-headingとelementor-heading-titleの2つのCSSが作用していることがわかりました。プラグインで指定しているCSSを変更するのは他に影響がないのか気になるところですが、見たところ公開画面上では影響が見当たらないので修正することにします。

「子テーマ」のCSSを上書き

 プラグインのファイルを直接上書きすると、更新の際にまた修正しなければならなくなります。Elementorはどんどん便利になる分、更新の頻度も多いのでかなりの手間になります。そこで、賢威8の子テーマで編集しておき、プラグインやテーマのバージョンアップに備えます。

 FTPソフトなどで、plugins/elementor/assets/css/frontend.min.cssとアクセスし、該当箇所を見つけます。検索などで探せばすぐ見つかります。で、そこをコピーして子テーマのCSSに貼り付けます。その際、paddingやmarginなどの数値を変えて!importantをつけます。

 すると、見出しの文字にも余白が生まれ、見た感じの違和感はなくなります。賢威8に変えてもElementorを使って記事更新することが可能になりました。

Elementorで記事を更新していると、backspaceで行を詰めたときに勝手にspanやpタグとスタイルが挿入されるテーマがあります。その原因の1つを突き止めましたので記録しておきます。

関連記事一覧

  1. この記事へのコメントはありません。