【Cocoon】ヘッダーからサイト名を消す＆キャッチフレーズの位置を調整する方法

1.Cocoonヘッダーのトラブルの原因

WordPressのテーマ「Cocoon」設定画面でキャッチコピーとサイト名を設定すると、下図のようにヘッダー中央にテキスト形式で表示されます。

キャッチコピー（この場合：WordPress初心者による、初心者のためのブログ）の表示に関しては、Cocoon設定 > ヘッダー > キャッチフレーズの配置 で「表示しない」という選択肢があります。

しかし、サイト名の表示に関しては「表示しない」という選択肢がない！！

そのため、ロゴ（サイト名）入りのヘッダー画像を使った場合にはサイト名が２つ重なって表示されてしまうのです。

↓こんな感じ

WordPress・Webサイト制作初心者の私も困りました。

というわけで、今回はヘッダーから不要なサイト名・ロゴを消す方法とキャッチフレーズの位置を調整する方法をご紹介します。

2. テキストのサイト名を消す（非表示にする）方法

ヘッダーからテキストのサイト名を消すには、ダッシュボード > 外観 > カスタマイズ > 追加CSSに下記のコードをコピペして追加してください。

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

すると、テキストのサイト名を消す（非表示にする）ことができます！

コードの解説

上記のコードが何を意味しているのか、解説します。

Chromeの「デベロッパーツール」を使って、消したい箇所のid属性・class属性を確認すると…

「WordPress１年生」のテキストには、【.site-name-text】という名前がついていることがわかります。

先程のコードは、.site-name-textの表示（display）をしない（none）という指示です。

ロゴ画像を消したい場合は？

Cocoon設定画面で【ヘッダーロゴ画像】を設定している場合は、こんな感じに表示されます。

このような状態になっている場合は、ダッシュボード > 外観 > カスタマイズ > 追加CSSに下記のコードをコピペして追加してください。

このコードは.logo-header（ヘッダーロゴ）のimg（画像）を消す（display: none)という意味です。

.logo-header img{
 display: none;
}

3. キャッチフレーズの位置を修正する方法

サイト名を消したら、キャッチフレーズの位置も修正しましょう！

キャッチフレーズのid属性・class属性をデベロッパーツールで調べてみると…

「WordPress初心者による、初心者のためのブログ」は、【.tagline】という名前がついています。

位置を調べてみると、text-aline（テキストの表示）はcenter（中央）、上下のmargin（余白）は0.6emの位置になっています。

1emは、フォント１個分のサイズのこと。

キャッチフレーズのfont-size（フォントサイズ）は14pxなので、上下のmarginは14×0.6で8.4pxずつに設定されています。

8.4pxだけ上げても見た目が全然変わらないので、思い切ってマイナスに。

.tagline {
margin-top: -7em; ← 高さはヘッダー全体の高さに応じて適宜変更してください
}

ヘッダーの高さを200pxで設定している場合、キャッチフレーズのmargin-topを-7emに変更したことで下図のようになりました。

ご自身が設定したヘッダーの高さに合わせて、margin-topの値を調整してみてくださいね。