ブログ

【Cocoon】ヘッダーのサイトタイトルを非表示にする方法

Cocoonでのサイト制作にも慣れてきて

そろそろ自分のサイトタイトルの入ったヘッダー画像を使いたい!

でも、、

今のサイトタイトルをどうやって非表示にするの?

そんな疑問を抱えた方へ、サイトタイトルを非表示にする方法をお伝えします!

サイトタイトルを非表示にするCSSコード

手順はいたってシンプル!

下記のコードをCSSにコピー&ペーストで完了です!

かんたんでしょ^^

それでは説明していきます。

CSSコード

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

.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;
  }
}

 

サイトタイトルを非表示にする手順

「外観」「テーマエディター」を選択する

テーマエディター

①「スタイルシート」テーマが②「Cocoon Child」

になっているか確認し、③空白部分にコードをコピペ

して④「ファイルを更新」をクリックして完了。

スタイルシート

このCSSを設定すると「Cocoon設定」「ヘッダー」プレビューではサイトタイトルが表示されています。

でも、ブラウザでサイトを確認するとちゃんと非表示になってますのでご安心を。

もし、CSSが反映されていなければブラウザのキャッシュをクリアしてみてください。

ヘッダープレビュー

PCとスマホのブラウザで開いた時は非表示になっている↓↓

PCブラウザ
スマホブラウザ

SEO的にはどうなのか?

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

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

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

上記のサイトを見るとSEO的には不利になる可能性はあるみたいです。

ただ、色んなブロガーさんもサイトタイトルを非表示にしているので大きな問題はないと思います。

当サイトも「しゅんセキblog」「セキログ」のサイトタイトルで検索をかけたらちゃんと表示されています。

サイトタイトルを非表示にする方法 まとめ

以上でヘッダーのサイトタイトルを非表示にする方法とSEO上の注意になります。

これからもより良いブログ環境をお届けできるよう発信していきます!

それでは、シュンセキでした^^

あわせて読みたい
【Cocoon】わかりやすい吹き出し機能の使い方と設定方法

続きを見る

あわせて読みたい
【ワードプレス】ブログ初心者におすすめプラグイン【8選】

続きを見る

-ブログ
-, ,

© 2021 セキログ