【2020年】特定のページのタイトルを表示させないCSSは?WordPressコクーン使用

ワードプレスタブ ワードプレスCocoon

エディタはGutenberg、テーマはCocoon

グーテンベルグエディタ、テーマはCocoonを使用しての記事になります。

ワードプレスにお引越しを考えていらっしゃる方はエックスサーバー 経由がおすすめですよ。 アップロードが簡単です!

タイトルを空欄にすればいいだけじゃないの?

タイトルを空欄にしてもCSSで消すのと同じようにすることができます。が、そのページへのリンクを貼った時に下のような状態になってしまいます。

しずくログトップページへのリンク(タイトルなし)

タイトルを書いておいてCSSで消すと…

しずくログトップページへのリンク(タイトルあり)

違いがお分かりになるかと思います。

指定したページが開かれている時だけタイトルが消えるようにしているので、外からのリンクなどでは表示させることができます。

逆にどんな時でもタイトルなしにしたい時はタイトル欄に何も書かなくてもいいのかもしれませんね。

例えばブログの1ページをホームページ風に作成して、そのページをトップページに固定したいときなどに使えるかと思います。

タイトルを消すCSSはこれ!

.entry-title {
display: none;
}

CSSコードを書く場所

タイトルを消したい記事の作成画面の一番下に『カスタムCSS』という欄が見つかると思います。そちらに先ほどのコードをコピーして貼り付けてください。

カスタムCSS

実際に貼り付けてみます。CSSコードを貼り付ける前のプレビュー画面がこちら↓

タイトル非表示ブログの画面

『カスタムCSS』欄に先ほどのコードをコピーして

カスタムCSS

プレビューボタンを押すと

しずくログトップページへ(タイトルなし)

タイトルが消えてそしてタイトル部分のスペースも無くなっていることがお分かりいただけると思います。(シェアボタンがタイトルのあった部分に上がってきています。)これで設定完了です!

さいごに

お読みいただきありがとうございました!Wordpress(Cocoon使用)の設定方法に関する記事をほかにも書いていますのでよかったら読んでいってくださいね。

ワードプレス・auPAY etc.しずくログトップ
shiizuku(しずく)ブログトップページへようこそ!2020年版Wordpressコクーンの各種設定方法やお気に入り商品のレビュー、旭川観光情報などを詳し~く発信しています。
タイトルとURLをコピーしました