トップページのタイトルと日付をCSSで非表示に-Cooon(コクーン）テーマ

他のWordPressブログのテーマを変更しました。

テーマを変更すると、新しいテーマの設定に合わせないといけないので多少の時間がかかることは覚悟していました。

けれど予想以上に時間がかかり、徹夜する羽目になりました（笑）。

原因はトップページを固定ページにしていたため、タイトルと日付を非表示にするのに大苦戦したからです。

トップページのタイトルと日付を非表示に

 

トップページ（フロントページ）を固定ページにした場合、記事タイトルと投稿日と更新日が表示されます。

トップページに記事タイトルと日付が表示されると、見栄えが良くありません。

そこでトップページのタイトルと日付を非表示にすることにしました。

このブログでもトップページを固定ページにしています。

このブログではPHPを編集してタイトルを非表示にしました。

賢威7ではpage.phpで条件分岐タグを使ってフロントページだけタイトルを非表示に。

Twenty Seventeenではフロントページ用にcontent-front-page.phpがあるのでタイトルを出力しているコードを削除しました。

 

トップページのタイトルを非表示にする方法-賢威7のカスタマイズ

 

ただ、今回新しく利用したCocoon（コクーン）テーマ。

固定ページの記事タイトルをどこから出力しているのかわかりませんでした（笑）。

そこでCSSでトップページの記事タイトルと日付を非表示にすることにしました。

 

CSSでトップページの記事タイトルと日付を非表示に（Cocoon）

{
    position:absolute; 
    clip: rect(1px, 1px, 1px, 1px);
    overflow:hidden;
}

最初「clip: rect」でタイトルを非表示にしようと思いました。

 

 

タイトルと日付を非表示にすることはできました。

 

 

ところが、Font AwesomeのWebアイコンまで表示されなくなってしまいました。

デベロッパーツールで確認するとエラーが2箇所あるようです。

3時間ぐらい格闘しましたが、自分の知識ではすぐに解決できません（笑）。

セレクタの指定が間違っていたのかもしれません。

/**** タイトル・日付消す ****/
/*トップページのタイトルを非表示*/
.home.page .entry-title{
   display: none;
}
 

/*トップページの投稿日を非表示*/
.home.page .post-date{
     display: none;
}

/*トップページの更新日を非表示*/
.home.page .post-update{
     display: none;
}

そこで「display: none;」でトップページのタイトルと日付を非表示にすることにしました。

 

 

トップページの記事タイトルと日付が非表示になり、FontAwesomeのWebアイコンも正常に表示されました。

もしシェアボタンや投稿者のリンクも非表示にしたい場合、Cocoonの公式サイトに詳しく書かれています。

 
Cocoon「トップページを固定ページにした際にタイトル、シェア・フォローボタン、投稿日、更新日、投稿者名の表示を切り替えるCSS例」

 

ただ、「display:none;」はSEO的にはあまりよろしくないようです。

 

「display:none;」は隠しテキストになる？

「display:none;」を使うと要素を非表示にできるので便利だと思います。

ただ、サイトの訪問者には表示されんませんが要素自体は残ります。

これは「隠しテキスト」とみなされる可能性があり、SEO的に好ましくないと言われています。

ただ重要なコンテンツに対してならともかく、記事タイトルと日付に対して「display:none;」で非表示にしても問題ないような気はします（気がするだけかもしれません）。

けれど少しでもリスクがあることは控えたいのが心理。

そこで最初は「clip: rect(1px, 1px, 1px, 1px);」でタイトルと日付を非表示にしようとしました。

結局FontAwesomeのWebアイコンが表示されなくなってしまったので断念しましたが、「clip: rect(1px, 1px, 1px, 1px);」が「display: none;」よりSEO的にいいのかはわかりません。

ただスクリーンリーダーは読み上げてくれます。

 

まとめ

これでCocoon（コクーン）テーマでもトップページのタイトルと投稿日・更新日を非表示にすることができました。

けれどブログのテーマを変更すると莫大な時間を持っていかれます。

今回もテーマの設定をして、タイトルと日付を非表示にしただけなのに24時間以上かかりました。

ただ、24時間の半分以上の時間は「clip: rect(1px, 1px, 1px, 1px);の使い方」と「「display:none」と「clip: rect(1px, 1px, 1px, 1px);のSEO的な違い」を調べていただけですが（笑）。

特に「clip: rect(1px, 1px, 1px, 1px);」は自分の持っている本にも載っていなかったので、結構な時間を持っていかれました。

 

今日のたつじんへの一歩