こんにちは、さこっしーです。
WordPressの無料テーマ「Cocoon」をインストールしたら、最初にカスタマイズしたくなるのは最初に表示されるヘッダー部分ですよね。
一番最初に表示される部分だからこそ、カスタマイズも大切です。
この記事では、WordPressテーマ「Cocoon」で、ヘッダーまわりをカスタマイズする手順についてご紹介します。
まだ、「Cocoon」をインストールしていない場合は、下記の記事をご覧ください。
ヘッダーをカスタマイズする手順
WordPress管理画面左メニューの「Cocoon設定」→「Cocoon設定」をクリックします。

「Cocoon設定」の「ヘッダー」をクリックします。

ヘッダー画像の設定
ヘッダーは文字だけの表示も可能ですが、「ヘッダーの背景画像」と「ヘッダーロゴ画像」を設定する手順をご紹介します。
ヘッダーの「背景画像」を設定する場合は、「ヘッダー背景画像」の右側にある「選択」をクリックします。

「メディアライブラリ」に背景にしたい画像がある場合はそれを選択して、ない場合は「ファイルをアップロード」をクリックして、画像をアップロードします。

ヘッダー背景画像を選択したら、画面右下の「画像の選択」をクリックします。


設定が終わったら、「変更をまとめて保存」をクリックします。

ブログを表示して、さきほど設定した画像がヘッダー部分に表示されていることを確認してみましょう。

ヘッダー背景画像の高さ設定
背景画像の高さを設定したい場合は、「高さ」と「高さ(モバイル)」に数値を入れます。
PC用とモバイル用で別々に指定することもできます。

例えば、「高さ」に「300」を入力して「変更をまとめて保存」をクリックすると、下図のように変わります。


同様にモバイルの背景画像の高さも設定したら、「ヘッダーの背景画像の設定」は完了です。
ヘッダーロゴの設定
ヘッダーの背景画像を設定した場合は、画像とロゴ文字の色によって、ロゴ文字が見づらくなる場合があります。
そういうときは、ロゴ文字の色を変えたり、ロゴ文字を画像にしてみましょう。
ロゴ文字色の設定
ロゴ文字色を変更したい場合は、「ヘッダー色(ロゴ部)」の「ロゴ文字色」→「色を選択」をクリックします。

設定する色をクリックするか色コードを入力します。

設定が終わったら「変更をまとめて保存」をクリックします。

ロゴ文字を画像に設定
ヘッダーロゴを画像にするには「ヘッダーロゴ」の「選択」をクリックします。

例えば、「sakossyblog」という文字の画像を黒色で作成して、ヘッダーロゴとして設定したら下のように表示されます。

ヘッダーロゴのサイズは「ヘッダーロゴサイズ」で変えることができます。
ロゴは、文字でも画像でもOKです。好きなロゴができたら設定完了です。

キャッチフレーズの表示設定
ヘッダー部分にはロゴだけでなくキャッチフレーズを表示することができます。
入力するかどうかは自由ですが、入力したらトップページに表示させることもできます。
キャッチフレーズを設定するには、WordPress管理画面左メニューの「設定」→「一般」をクリックします。

「キャッチフレーズ」にキャッチフレーズを入力して、「変更を保存」をクリックします。


グローバルナビメニュー設定
「グローバルメニュー」とは、ヘッダー部分に表示される「ヘッダーメニュー」のことです。
WordPress管理画面左メニューの「外観」→「メニュー」をクリックします。

「メニュー構造」で任意のメニュー名を入力して「メニューを作成」をクリックします。

グローバルナビメニューの表示位置の設定
「メニュー設定」→「メニューの位置」→「ヘッダーメニュー」を選択して、「メニューを保存」をクリックします。

すると、下記のように「グローバルナビメニュー」が表示されます。

グローバルナビメニューの色と幅の設定
次は、グローバルナビ全体の背景色やグローバルナビの文字色と、幅を設定します。
「Cocoon設定」→「ヘッダー」をクリックします。

今回は、グローバルナビ全体の背景色を水色にして、「メニューの幅をテキストに合わせる」にチェックをいれて、「変更をまとめて保存」をクリックします。

すると、ヘッダー画面は下記のように表示されます。

ヘッダーレイアウトの設定
ヘッダーレイアウトは、ヘッダーロゴやグローバルナビメニューの表示場所を設定できます。
Cocoonには、以下のように8種類のヘッダーレイアウト表示があります。
- センターロゴ(デフォルト)
- センターロゴ(トップメニュー)
- センターロゴ(スリムメニュー)
- センターロゴ(スリムトップメニュー)
- トップメニュー
- トップメニュー(右寄せ)
- トップメニュー小
- トップメニュー小(右寄せ)
①のセンターロゴ(デフォルト)は、ヘッダーロゴの下に表示されます。

②のセンターロゴ(トップメニュー)は、ヘッダーロゴの上に表示されます。

③のセンターロゴ(スリムメニュー)は、①のメニュー部分のスリムバージョンです。

④のセンターロゴ(スリムトップメニュー)は、②のメニュー部分のスリムバージョンです。

⑤のトップメニューは、ヘッダーロゴが左に表示されて、メニューが右に表示されます。

⑥のトップメニュー(右寄せ)は、メニューが右寄せで表示されます。

⑦のトップメニュー小は、⑤のメニュー部分のスリムバージョンです。

⑧のトップメニュー小(右寄せ)は、⑥のメニュー部分のスリムバージョンです。

すべてプレビューで表示されるので、好きなレイアウトを選択しましょう。
これで、Cocoonのヘッダーカスタマイズのご紹介は終了です。
まとめ
今回は、WordPressテーマ「Cocoon」で、ヘッダーまわりをカスタマイズする手順についてご紹介しました。
「Cocoon」は無料のWordPressテーマですが、ヘッダーの部分だけでも、細かくカスタマイズすることができます。
SEO対策や高速表示にも力を入れていて、無料版のWordPressテーマの中では、一番オススメできるテーマです。
いろいろと試してみて、自分好みにカスタマイズしていきましょう。
今回は、以上となります。
最後まで読んでいただき、ありがとうございました。
コメント