皆さま引き続きコロナには気をつけてお過ごしください!

【WordPress】Cocoonでトップページのタイトルを非表示にするには?

アイキャッチ タイトル Cocoon


記事作成の画面では、記事のタイトルや、本文を入力できます。

投稿画面では、タイトルは必須ですが、

固定ページでは、タイトルを表示させたくないと思うこともあると思います。

 

タイトルを書かなければ、画面上には表示されませんが、

管理上、IDで管理されることになるため、

このID、なんだっけ?と管理上不便なことがあります。

 

今回は、タイトルを設定しても、

画面上にはタイトルを表示させない方法をご紹介したいと思います。

タイトル

 

スポンサーリンク

固定ページでタイトルを非表示にする方法

今回は、テーマでCocoonを使っている場合に非表示にする方法をご紹介します。

 

タイトルの非表示設定手順

①固定ページ一覧から、非表示にさせたいページを選択し、編集画面を表示する。

②カスタムCSS欄に以下を記入する。

.entry-title {
  display: none;
}
③「公開」、もしくは、「更新」ボタンをクリックする。

 

該当ページを表示させると、タイトルが非表示であることが確認できます。

タイトル非表示

 

スポンサーリンク

設定クラス名の確認方法

タイトル以外にも、表示設定をしたい場所もあると思います。

Cocoon設定で設定できる箇所は多いですが、

設定できない項目であった場合、CSSで設定変更ができることもあります。

 

その場合のCSSで該当がいとう箇所かしょのクラス名を確認する必要があります。

ブラウザがchrome、ならびに、edgeの場合での、その確認方法をご紹介します。

クラス名確認手順(chrome)

①確認したいページで右クリックする。

②「検証」をクリックする。

chrome

 

③検証画面左上の「Select an element in the page to inspect it」をクリックする。

selectelement

④確認したい箇所(今回はタイトル)をマウスオーバーすると、要素の情報が表示される。

クラス名

上記より、タイトルは、h1タグを使っており、さらに、entry-titleというクラス名がついていることがわかります。

クラス名確認手順(edge)

①確認したいページで右クリックする。

②「要素の検査」をクリックする。

edge

③検証画面左上の「要素の選択」をクリックする。

要素の選択

 

タイトルとURLをコピーしました