【100%動作】Elementor でページタイトルが非表示にできない時の対処法

最近ではElementorに関するお問い合わせも良くいただきます。

Elementorを使って、固定ページを編集する際にテーマによっては固定ページのタイトルが邪魔になることがあります。

↓こんな感じです。

通常であれば、 固定ページ 設定 ＞ タイトルを隠す をONにすることで 固定ページのデフォルト表示されているタイトルが非表示になるはずですが、テーマによってはこれが機能しないことがあります。

タイトルが非表示にできない原因はなぜ？

原因は明らかです。 デフォルトではElementorのこの機能はONにすることで、 CSS の h1.entry-title を非表示にするように動作します。

なので、これでタイトルが非表示にならないということは 現在使用中のテーマのタイトルが h1.entry-title で定義されていないということです。

こういうことも多々あるので、テーマ自体は問題ないです。そして、解決方法は簡単です。

解決方法

幸い、 Elementorでは h1.entry-title から別のCSSをタイトルとして割り当てることができるようになっています。

そのためには、 現在お使いのテーマのタイトルを定義しているCSSを知っておく必要があります。

よくわからない場合はテーマサポートに直接確認しても良いですし、ブラウザーの F12 でインスペクターツールを使って、 非表示にしたいエリアを選択するのが速いです。 

例えば、 上の画像のテーマのタイトルの帯のCSSを確認したら、 header.page-header というCSSセレクターということがわかりました。

次に、 サイト設定 > レイアウト > ページタイトルセレクター に進み、ここに先ほどのセレクターを貼り付けます↓

そうすると、以下のようにElementorの設定からタイトルを消すことができるようになりました！

これは一度設定しておけば、テーマでタイトルＣＳＳセレクターは同じはずなので、別の固定ページでも共通して表示/非表示を切り替えることができるよになりました。

この方法をマスターしておけば、他のテーマで同様の現象に遭遇しても落ち着いて対応できますね！

よくある質問