こんにちは、さこっしーです。
WordPressの無料テーマ「Cocoon」をインストールしたら、最初にカスタマイズしたくなるのは最初に表示されるヘッダー部分ですよね。
一番最初に表示される部分だからこそ、カスタマイズも大切です。
この記事では、WordPressテーマ「Cocoon」で、ヘッダーまわりをカスタマイズする手順についてご紹介します。
まだ、「Cocoon」をインストールしていない場合は、下記の記事をご覧ください。
ヘッダーをカスタマイズする手順
WordPress管理画面左メニューの「Cocoon設定」→「Cocoon設定」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/3974634d8d52fb0df0a82ce435975688.png)
「Cocoon設定」の「ヘッダー」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/71af63a06782f66afa5e54fb16f66961.png)
ヘッダー画像の設定
ヘッダーは文字だけの表示も可能ですが、「ヘッダーの背景画像」と「ヘッダーロゴ画像」を設定する手順をご紹介します。
ヘッダーの「背景画像」を設定する場合は、「ヘッダー背景画像」の右側にある「選択」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/4218c49072d28e250007265fbd881e4f.png)
「メディアライブラリ」に背景にしたい画像がある場合はそれを選択して、ない場合は「ファイルをアップロード」をクリックして、画像をアップロードします。
![](https://sakossy.com/wp-content/uploads/2021/04/d02f1164bec947948b6e1bd1060cf337.png)
ヘッダー背景画像を選択したら、画面右下の「画像の選択」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/914d74657d9cead29fa1429ffb395ac2-1.png)
![](https://sakossy.com/wp-content/uploads/2021/04/68e360d0ba575f09bd06287a94b039b4-1.png)
設定が終わったら、「変更をまとめて保存」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/9e6a91620cb357b0db8d01df728cdedb.png)
ブログを表示して、さきほど設定した画像がヘッダー部分に表示されていることを確認してみましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/cef330a51384779ab99018f2bedcdffb.png)
ヘッダー背景画像の高さ設定
背景画像の高さを設定したい場合は、「高さ」と「高さ(モバイル)」に数値を入れます。
PC用とモバイル用で別々に指定することもできます。
![](https://sakossy.com/wp-content/uploads/2021/04/b1058d2283436b81c85989f5fc9db35e-1.png)
例えば、「高さ」に「300」を入力して「変更をまとめて保存」をクリックすると、下図のように変わります。
![](https://sakossy.com/wp-content/uploads/2021/04/4394b5b1f3bb5204178d1f930ab3bfb5.png)
![](https://sakossy.com/wp-content/uploads/2021/04/71946ab77b6c83650e7f5bbba564e01a.png)
同様にモバイルの背景画像の高さも設定したら、「ヘッダーの背景画像の設定」は完了です。
ヘッダーロゴの設定
ヘッダーの背景画像を設定した場合は、画像とロゴ文字の色によって、ロゴ文字が見づらくなる場合があります。
そういうときは、ロゴ文字の色を変えたり、ロゴ文字を画像にしてみましょう。
ロゴ文字色の設定
ロゴ文字色を変更したい場合は、「ヘッダー色(ロゴ部)」の「ロゴ文字色」→「色を選択」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/ad6e197f4d20b2593e13611094143f83.png)
設定する色をクリックするか色コードを入力します。
![](https://sakossy.com/wp-content/uploads/2021/04/a661b61023e9ff1106e1a141185f381e.png)
設定が終わったら「変更をまとめて保存」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/b9850ae4a7ca103b121323c7562644f6.png)
ロゴ文字を画像に設定
ヘッダーロゴを画像にするには「ヘッダーロゴ」の「選択」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/5e17e1f5f30419951fe855c0ac7dc87f.png)
例えば、「sakossyblog」という文字の画像を黒色で作成して、ヘッダーロゴとして設定したら下のように表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/ff560595879d05a12dea2f8fd6067775.png)
ヘッダーロゴのサイズは「ヘッダーロゴサイズ」で変えることができます。
ロゴは、文字でも画像でもOKです。好きなロゴができたら設定完了です。
![](https://sakossy.com/wp-content/uploads/2021/04/f92d8a2e2e94be0c53e2092f3b260411-1.png)
キャッチフレーズの表示設定
ヘッダー部分にはロゴだけでなくキャッチフレーズを表示することができます。
入力するかどうかは自由ですが、入力したらトップページに表示させることもできます。
キャッチフレーズを設定するには、WordPress管理画面左メニューの「設定」→「一般」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/627bc4a9f90bb46d2ec439f186690a31.png)
「キャッチフレーズ」にキャッチフレーズを入力して、「変更を保存」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/6340420eda6f6cdfcae0da19fb44dc98.png)
![](https://sakossy.com/wp-content/uploads/2021/04/842f09996d6466b8858fb5d109696b31.png)
グローバルナビメニュー設定
「グローバルメニュー」とは、ヘッダー部分に表示される「ヘッダーメニュー」のことです。
WordPress管理画面左メニューの「外観」→「メニュー」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/c501be8f01f0f8b4fd29f3e9168385f0.png)
「メニュー構造」で任意のメニュー名を入力して「メニューを作成」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/7cc9825f3e37b91ba3fd867329ed3738.png)
グローバルナビメニューの表示位置の設定
「メニュー設定」→「メニューの位置」→「ヘッダーメニュー」を選択して、「メニューを保存」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/818c55fa73b044ce908efbf0ee9b7f23.png)
すると、下記のように「グローバルナビメニュー」が表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/7fc494109fff8a7137e6ce29eb7a0d4e.png)
グローバルナビメニューの色と幅の設定
次は、グローバルナビ全体の背景色やグローバルナビの文字色と、幅を設定します。
「Cocoon設定」→「ヘッダー」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/ec585ed06e4a86767bf756855bf0f999.png)
今回は、グローバルナビ全体の背景色を水色にして、「メニューの幅をテキストに合わせる」にチェックをいれて、「変更をまとめて保存」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/b928ddfee73e1599521add11e3bd8650.png)
すると、ヘッダー画面は下記のように表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/ff5f78d60acbbb30396f4ec57dcac0c4.png)
ヘッダーレイアウトの設定
ヘッダーレイアウトは、ヘッダーロゴやグローバルナビメニューの表示場所を設定できます。
Cocoonには、以下のように8種類のヘッダーレイアウト表示があります。
- センターロゴ(デフォルト)
- センターロゴ(トップメニュー)
- センターロゴ(スリムメニュー)
- センターロゴ(スリムトップメニュー)
- トップメニュー
- トップメニュー(右寄せ)
- トップメニュー小
- トップメニュー小(右寄せ)
①のセンターロゴ(デフォルト)は、ヘッダーロゴの下に表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/9e60b25accd20b03e0604894b083e7e0.png)
②のセンターロゴ(トップメニュー)は、ヘッダーロゴの上に表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/18a5b6a250264d48a29d2591fc04026c.png)
③のセンターロゴ(スリムメニュー)は、①のメニュー部分のスリムバージョンです。
![](https://sakossy.com/wp-content/uploads/2021/04/007fc6f871c7f73b9e2fa65370a55a1b.png)
④のセンターロゴ(スリムトップメニュー)は、②のメニュー部分のスリムバージョンです。
![](https://sakossy.com/wp-content/uploads/2021/04/b017a4c98b6b21036f256c1b2c05ea24.png)
⑤のトップメニューは、ヘッダーロゴが左に表示されて、メニューが右に表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/7b2f22fcb3d372b3def5dc7174f48d50.png)
⑥のトップメニュー(右寄せ)は、メニューが右寄せで表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/31ca2c8e201ec2bbc3d9fb2f4eedccda.png)
⑦のトップメニュー小は、⑤のメニュー部分のスリムバージョンです。
![](https://sakossy.com/wp-content/uploads/2021/04/9287d7a1065dd7dbf0b11c56c15536d7.png)
⑧のトップメニュー小(右寄せ)は、⑥のメニュー部分のスリムバージョンです。
![](https://sakossy.com/wp-content/uploads/2021/04/e79b8f30fd54e06225395abdab94eda7.png)
すべてプレビューで表示されるので、好きなレイアウトを選択しましょう。
これで、Cocoonのヘッダーカスタマイズのご紹介は終了です。
まとめ
今回は、WordPressテーマ「Cocoon」で、ヘッダーまわりをカスタマイズする手順についてご紹介しました。
「Cocoon」は無料のWordPressテーマですが、ヘッダーの部分だけでも、細かくカスタマイズすることができます。
SEO対策や高速表示にも力を入れていて、無料版のWordPressテーマの中では、一番オススメできるテーマです。
いろいろと試してみて、自分好みにカスタマイズしていきましょう。
今回は、以上となります。
最後まで読んでいただき、ありがとうございました。
コメント