スポンサーリンク

【Cocoon】ヘッダーのカスタマイズ(ロゴと背景画像の設定を分かりやすく)

cocoonヘッダー画像Cocoon

Cocoonテーマのヘッダーのカスタマイズ方法をご紹介します。

ヘッダーのロゴや背景画像の設定は、様々なケース、パターンがあることもあり、分かりにくい部分も多いです。

全てを紹介しきれないと思いますが、様々なケースを想定し、図を使って、初心者向けになるべく分かりやすくご紹介しています。

モバイルのヘッダーのカスタマイズについては以下の記事もご覧ください。

Cocoon ヘッダーの構成

Cocoonのヘッダーの構成は以下のようになっています。(画像はCocoonのデモサイト)

このページでは、①の「ヘッダー」の設定について解説します。

cocoonヘッダー画像

④の「アピールエリア」の画像の設定方法は以下のページをごらんください。

ヘッダー ロゴの設定

ヘッダー ロゴ(テキスト・画像を使わない)の設定

以下、 Coconn設定 > ヘッダー 内 の設定です。

「グローバルメニュー色」
この例では、見やすくするために「グローバルメニュー」を青色にしています。

cocoonヘッダー設定

「キャッチフレーズの配置」
キャッチフレーズの位置、非表示を選択できます。
この例では、「ヘッダートップ」を選択しています。

cocoonヘッダー設定

「ヘッダーレイアウト」
ヘッダーレイアウトは8種類の中から選択できます。

この後、それぞれ実際にどのように表示されるか解説します。

cocoonヘッダー設定

その他の設定はデフォルトのままです。

センターロゴの表示例です。以下の例は、ロゴはテキスト、キャッチフレーズも表示する設定です。

cocoonヘッダー設定

ロゴ(テキスト)とキャッチフレーズは 
WordPressの ダッシュボード > 設定 > 一般設定に入力した内容が表示されます。

・ロゴ(テキスト)⇒ サイトタイトル
・キャッチ―フレーズ⇒ キャッチフレーズ

cocoonヘッダー設定

ヘッダーレイアウトの表示例

前述の「ヘッダーレイアウト」8種類の表示例をご紹介します。
(大きく分けて「センターロゴ」「トップメニュー」がそれぞれ4種類あります。)
ロゴはテキスト、キャッチフレーズは表示する設定です。

センターロゴ(ロゴをセンターに配置)4種類

▼①センターロゴ(デフォルト)

グローバルメニューの上のセンターに、キャッチフレーズとロゴが表示されます。

cocoonヘッダー画像

▼②センターロゴ(トップメニュー)

グローバルメニューの下のセンターに、キャッチフレーズとロゴが表示されます。

cocoonヘッダー画像

▼③センターロゴ(スリムメニュー)

①と同じスタイルで、グローバルメニューが細くなります。

cocoonヘッダー画像

▼④センターロゴ(スリムトップメニュー)

②と同じスタイルで、グローバルメニューが細くなります。

cocoonヘッダー画像

トップメニュー(ロゴとメニューが横並びに配置)

「トップメニュー」はロゴとメニューが横並びに配置されます。
キャッチフレーズは表示されません。

グローバルメニューは前述の例と同じ設定です。
使うには調整が必要ですが、レイアウトの説明のためにこのままご紹介します。

▼⑤トップメニュー

ロゴが左側、グローバルメニューがセンタリングされます。

cocoonヘッダー画像

▼⑥トップメニュー(右寄せ)

ロゴが左側、グローバルメニューが右寄せになります。

cocoonヘッダー画像

▼⑦トップメニュー小

⑤と同じスタイルで 、グローバルメニューが細くなります。

cocoonヘッダー画像

▼ ⑧トップメニュー小(右寄せ)

⑥と同じスタイルで 、グローバルメニューが細くなります。

cocoonヘッダー画像
トップメニュー のカスタマイズ

一つの例ですが、トップメニューでグローバルメニューを含むヘッダー全体の背景色をなくすと、以下のようになり、コンパクトでシンプルなヘッダーになります。

以下の例は
・「グローバルナビメニュー色」を「なし」(クリアする)
・ヘッダーの「高さ」を108 にしています。

ヘッダーの高さは指定しないと細いです。

後で解説しますが、画像のロゴを使うと更におしゃれなヘッダーになると思います。

▼トップメニュー

cocoonヘッダー設定

▼トップメニュー(右寄せ)

cocoonヘッダー設定

スマホの表示

スマホの表示は以下の画像のようになります。

左側に「ハンバーガーメニュー」、真ん中にロゴ(テキスト)、右側に検索 が配置された例です。
ハンバーガーメニュー とは、横3本線のメニューボタンです。
この例では、横スライド式でグローバルメニューと同じ内容が表示されます。

メニュー設定 外観>メニュー > メニュー 設定 > 
グローバルメニュー用に作成したメニュー
メニューの位置⇒ 「ヘッダーメニュー」のみにチェック
※「ヘッダーモバイルボタン」にチェックを入れた場合は、カスタマイズが必要です。
 カスタマイズ方法(Cocoonオフィシャル) 

Cocoonの設定(ヘッダー) Cocoon設定 > ヘッダー >
「モバイルメニュー」「ヘッダー・フッターモバイルボタン」または、「ヘッダーモバイルボタン」にチェック
※「ヘッダーモバイルボタン」は、ハンバーガーメニューやロゴがあるエリアです。
「サイトヘッダーロゴを表示する」⇒ チェックを入れない

Cocoonの設定(モバイル設定) Cocoon設定 > モバイル設定 >
「モバイルメニュー」「ヘッダー・フッターモバイルボタン」または、「ヘッダーモバイルボタン」 にチェック
「サイトヘッダーロゴを表示する」⇒ チェックを入れない

センターロゴ(デフォルト)

cocoonヘッダー設定

キャッチフレーズが表示されています。

トップメニュー

cocoonヘッダー設定

キャッチフレーズが表示されません。

スマホ表示は、Cocoonの便利な機能「レスポンシブテスト」を使っています。
(他にも2種類の同様ツールがあります)
Cocoon設定 > 管理者画面 > レスポンシブツールエリアの表示 で設定できます。

レスポンシブテスト

ちなみに、モバイル設定で「サイトヘッダーロゴを表示する」⇒ チェックを入れる。
にすると、このようにロゴ(テキスト)が二重に表示されてしまいます。
※ヘッダー設定で、「高さ(モバイル)」を空欄(指定なし)にしていてもこのようになりました。

cocoonヘッダー画像

スマホでキャッチフレーズを表示しない方法

前述の①センターロゴ(デフォルト) の場合、キャッチフレーズの上に線が入っています。
キャッチフレーズを空欄にすると消えますが、スマホの場合のみ消したいという場合もあると思います。

その場合は、以下のCSSを子テーマに追加すると、キャッチフレーズが消え、⑤トップメニュー と同じように表示されます。

/* スマホのキャッチフレーズを消す*/
@media screen and (max-width: 1023px) {
  .tagline {
    display: none;
  }
}

ロゴ文字(テキスト)のフォントを変える

デフォルトの文字だと細いので、フォントや太さを変更する場合は、以下のCSSを子テーマに追加すると変更できます。

font-family(フォントファミリー) と太さ、色を変えています。
(色はグローバルメニューに合わせて青色に変更)

/*サイトロゴのフォント変更*/
.logo-header a span{
font-family: font-family: 'Avenir','Helvetica Neue'; /*好きなフォントに変更*/
font-size:36px;
color:#1e73be;
font-weight: 700;
}

以下のように表示されました。
①センターロゴ(デフォルト)

cocoonヘッダー設定

スマホでサイトロゴのフォントサイズを変更するには、さらにCSSを追加する必要があります。

以下はフォントサイズを30pxにする例です。

/*サイトロゴのフォントサイズ変更(スマホ)*/
@media screen and (max-width: 480px){
#header .site-name-text {
    font-size: 30px;
}
}

設定が少し面倒ですが、Googleフォントを使うと、より選択肢が広がります。

ヘッダーの背景色を変える

この例では、「ヘッダー背景色」をグローバルメニューの青色より少し薄め、「ヘッダー全体文字色」を白色に設定しています。

ヘッダー背景色とグローバルメニューの色を同一色にする場合は、「ヘッダー全体背景色」で設定します。(この例では使っていません)

「ヘッダー色」をグローバルナビメニューの色より薄めの青色、「ロゴ文字色」を白にすると、このように表示されます。

cocoonヘッダー画像

ロゴに画像を使用する場合

ロゴに画像を使用する方法です。

これまでと同じく、Coconn設定 > ヘッダー 内 の設定です。

「ヘッダーロゴ」

ヘッダー画像を用意し、ここで画像を選択します。

この例では、500×152pxの画像を使い、ヘッダーロゴサイズ幅を250としました。
高さは空欄で大丈夫です。

cocoonヘッダー設定

以下のように表示されました。
ヘッダーレイアウト⇒①センターロゴ(デフォルト) の場合

ヘッダーレイアウト⇒⑤トップメニュー(右寄せ)の場合

「ヘッダー設定」の「高さ」を100にしています。(空欄だと高さが足りないので)

cocoonヘッダー設定

この画像では分かりにくいと思いますが、これまでの設定のまま(ロゴ画像の幅を250)にしています。
この場合、ロゴが少し横に伸びて、若干ぼやけた感じになります。
(ロゴ画像の幅が空欄の場合は、ロゴが小さくなりますが、問題なく表示されます。)
これは、ロゴ画像のmax-heightが指定されているためだと思われます。

縦横比が変わらないようにするためには、以下のCSSを追加します。(横幅は220pxに指定しています。)

/* ヘッダー ロゴ(トップメニューの場合つぶれるのを修正)*/
div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 220px;
}

修正後は以下ののように表示されました。

cocoonヘッダー設定

ロゴ画像を使用した場合のスマホ表示

スマホの表示です。

①センターロゴ(デフォルト) の場合

cocoonヘッダー画像

キャッチフレーズが表示されています。
キャッチフレーズを表示しない方法はこちら

⑤トップメニュー(右寄せ) の場合

cocoonヘッダー画像

ヘッダー背景画像の設定

ヘッダー背景画像のサイズは?

画面一杯に広がる背景画像は幅1400px以上がおすすめです。(高さはお好みで)

1260px程度でも問題なく表示されると思いますが、大きめのモニターを考慮すると大きめの画像がよいでしょう。

Cocoonのヘッダー背景画像は、左右は自動的に画面の横幅いっぱいに縮小・拡大されます。
同時に、上下の入りきらない部分は下部から切り取られました。

高さを指定していない場合は、測ってみると、画面の横幅に関係なく高さ110x程度に切り取られていました。

ヘッダー背景画像の設定方法

この例では、1500×287xの画像を使いました。

Coconn設定 > ヘッダー >ヘッダー背景画像 で画像を選択します。

cocoonヘッダー画像

「高さ」を200に指定しました。

cocoonヘッダー画像

ヘッダー色(ロゴ部) ロゴ文字(テキスト)の色を白にします。

cocoonヘッダー画像

以下のように表示されました。
ちょっとインパクトが足りない感じです。

cocoonヘッダー画像

そこで、子テーマに以下のCSSを追加し、先に解説したフォントの変更とサイズ指定、文字を黒、白縁取りにしました。
その結果が以下のようになりました。

cocoonヘッダー画像

ロゴの部分を拡大すると、以下のような感じです。

cocoonヘッダー画像

スマホではこのように表示されました。
※スマホの背景画像の設定方法やロゴが重複していることについては、次の項目で解説します。

cocoonヘッダー画像

追加したCSSは以下です。

/*サイトロゴのフォント等を変更*/
.logo-header a span{
font-family: font-family: 'Avenir','Helvetica Neue';
font-size:36px;
font-weight: 700;
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
/*サイトロゴのフォント変更(スマホ)*/
@media screen and (max-width: 480px){
#header .site-name-text {
    font-size:30px;
}
}

ヘッダー背景画像の設定(スマホの場合)

ここでは、前の項目で設定した背景画像を使い、スマホのヘッダーに背景画像を設定する方法をご紹介します。

まず、スマホ表示の画面構成についての解説です。

cocoonヘッダー画像

以下はスマホに関連する設定です。
この例では、スマホのヘッダーの高さを100に指定しています。

メニュー設定 外観>メニュー > メニュー 設定 > 
グローバルメニュー用に作成したメニュー
メニューの位置⇒ 「ヘッダーメニュー」のみにチェック
※「ヘッダーモバイルボタン」のチェックははずしておきます。 

Cocoonの設定(ヘッダー) Cocoon設定 > ヘッダー >
●「高さ(モバイル)」⇒ 100
 ヘッダーの高さはここで自由に調整できます。

Cocoonの設定(モバイル設定) Cocoon設定 > モバイル設定 >
●「モバイルメニュー」⇒「ヘッダー・フッターモバイルボタン」または、「ヘッダーモバイルボタン」
「サイトヘッダーロゴを表示する」⇒ チェックを入れる

スマホ表示を確認すると、ロゴ(テキスト)が二重に表示されてしまいました。

これでは良くないので、次に修正方法をお伝えします。

cocoonヘッダー画像

スマホでのロゴの二重表示の修正方法

スマホでロゴが二重表示されないようにするための方法は色々あると思いますが、ここでは以下の2つの例をご紹介します。

  1. 上部の「ヘッダーモバイルボタン」(ロゴが入っている部分)をカスタマイズ
  2. 「ヘッダーモバイルボタン」を非表示にし、ヘッダーの下にメニューを表示する
1.「ヘッダーモバイルボタン」をカスタマイズ

デフォルトで、左から「メニュー」「ロゴ(テキスト)」「検索」が配置されていますが、カスタマイズすることによって、 「ロゴ(テキスト)」 を表示させないようにします。

カスタマイズ方法については省略します。以下をご覧ください。
カスタマイズ方法(Cocoonオフィシャル)

メニュー設定 外観>メニュー > メニュー 設定 > 
「ヘッダーモバイルボタン」 用に作成したメニュー
メニューの位置⇒  「ヘッダーモバイルボタン」 にチェック

Cocoonの設定(モバイル設定) Cocoon設定 > モバイル設定 >
●「モバイルメニュー」⇒「ヘッダー・フッターモバイルボタン」または、「ヘッダーモバイルボタン」
「サイトヘッダーロゴを表示する」⇒ チェックを入れる

画像はカスタマイズ例です。

ロゴ(テキスト)がなくなり、4つのアイコンが表示されています。

cocoonヘッダー画像
2.「ヘッダーモバイルボタン」を非表示にし、ヘッダーの下にメニューを表示

メニュー設定 外観>メニュー > メニュー 設定 > 
グローバルメニュー用に作成したメニュー
メニューの位置⇒  「ヘッダーメニュー」と「ヘッダーモバイルメニュー」 にチェック
これで、スマホのヘッダー画像下にメニューが表示されます。

似ているので紛らわしいですが、「ヘッダーモバイルボタン」と「ヘッダーモバイルメニュー」は別物。

Cocoonの設定(モバイル設定) Cocoon設定 > モバイル設定 >
●「モバイルメニュー」⇒ ボタンを表示しない(ミドルメニューのみ)

このように表示されます。

「ヘッダーモバイルボタン」 がなくなり、PC表示と似たような構成になりました。

cocoonヘッダー画像

ただ、メニューが2列になっており、少し格好悪いです。
子テーマに以下のCSSを追加することで、1列になり、メニューの項目が多くなって横長になると、スクロールするようになります。

/* モバイルトップメニュー 横スクロール*/
@media screen and (max-width: 480px){
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile .item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}

「リスブロ」さんのサイトを参考にさせていただきました。

このように表示されます。

前と比べると、見た目がかなりよくなりました。


cocoonヘッダー画像

まとめ

ヘッダーはサイトの顔にあたり、サイトの雰囲気もつくり出す重要な部分です。

なかなか思うようにいかないことも多いと思いますが、色々なパターンを試してみて、お好みのヘッダーをつくっていきましょう。

タイトルとURLをコピーしました