【Cocoon】サイトタイトルを非表示にしてヘッダー画像だけにするCSSカスタマイズ

Cocoon で作ったサイト。

 

サイトタイトルも入れた

いい感じのヘッダー画像ができた時、

サイトタイトルを非表示にしたい、、、

 

そんな方のために、

サイトタイトルのみを非表示にする

CSS のコードをどうぞ!

(のちに注意事項ありです)

 

Cocoonでサイトタイトルを非表示にしたい時のCSS

 

CSS・htmlのコード

 

超・簡単です!

 

以下のコードを、

子テーマの CSS

(「外観」→「テーマの編集」→「Cocoon child」のスタイルシート)に

コピペするだけでOK!

 

cocoonメニュー

 

cocoon_child子テーマ

 

/************************************
** サイトタイトル非表示
************************************/

.site-name-text{
  display: none;
}

/*ヘッダーレイアウトがトップメニューのとき*/
.header-container-in.hlt-top-menu .site-name-text{
  display: none;
}

/*ヘッダーレイアウトがトップメニュー(小)のとき*/
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text{
  display: none;
}

/*端末幅が768px以下のとき*/
@media screen and (max-width: 768px){
  #header .site-name-text{
    display: none;
  }
}

/*端末幅が480px以下のとき*/
@media screen and (max-width: 480px){
  #header .site-name-text{
    display: none;
  }
}

 

PCからもスマホからも

サイトタイトルが表示されなくなります。

 

ただし、この CSS だと

「Cocoon 設定」→「ヘッダー」のプレビューでは、

サイトタイトルが表示されちゃってます↓

 

Cocoonサイトタイトル非表示

 

が、PCやスマホでみた場合には

ちゃんと非表示になりますので、ご安心ください。

(Chrome・Safari で確認済み)

もしサイトタイトルが表示されていた場合は、お手数ですがご一報下さい。できる限り、調査してみます。

 

(多分、プレビューの CSS を

サイトタイトル同様、

display: none;にすれば良いのでしょうが、

そこまではしませんでした。)

 

CSS が反映されないときは

ブラウザのキャッシュを削除してみてください。

 

キャッシュとは
一度開いたWebページのデータを、Webブラウザに保存しておく機能のこと。

サイトタイトルの非表示は、SEO的に難あり?

 

サイトタイトルを非表示にすると、

SEO的に不利になることがあります。

 

Q.「display:none」で隠したテキストには、SEO効果がありますか?

A.検索エンジンの評価を上げようとして「display:none」を利用する行為は、
本来の利用方法から外れています。
そのような行為は「SEOスパム」としてサイトの価値を下げる可能性があります。

引用元:https://seopack.jp/seo_faq/display_none_seo.php

 

気になって当サイトの

サイトタイトルで検索をかけましたが、

今のところちゃんと表示されているようです。

 

サイトタイトルに

重要なキーワードを入れてる場合は、

サイトタイトル非表示は避けた方が無難ですね。

 

以上、

サイトタイトル非表示の CSS と

SEO上の注意事項でした!

 

それでは、また( ´ ▽ ` )/

コメント