こんにちは、ikuzo(いくぞう)です。
今回はWordPressのテーマ「Cocoon」のヘッダーロゴ、およびキャッチフレーズの設定方法を説明します。
ヘッダーロゴを設定しないとサイトのタイトルが表示されます
「ヘッダーロゴ」を設定していないと、サイトのタイトルがそのまま表示されます。
サイトのタイトルは、WordPressメニューの「設定」→「一般設定」で入力します。
「ヘッダーロゴは必要ない」「ヘッダーロゴはそのうち設定するつもり」という人は、ここを設定するだけでも特に問題ありません。
Cocoonのヘッダーロゴの設定方法
Cocoonのヘッダーロゴを設定するには、WordPressメニューの「Cocoon設定」をクリックします。
ヘッダー関連の設定は「ヘッダー」タブで行います。
ヘッダー色の設定
ヘッダーロゴを入れる前に「ヘッダー色」を設定しておきましょう。
ヘッダー色は、「全体色」「ロゴ部」「ナビメニュー色」の3つに分かれていて、全てを設定する必要はありません。
ロゴ周辺のヘッダー色とグローバルナビメニューを同じ色にする場合は「全体色」を、
違う色にする場合は「ロゴ部」と「グローバルナビメニュー色」を設定します。
グローバルナビメニューの設定方法↓
Cocoon設定の「全体」タブ→「キーカラー」→「サイトキーカラー」でもヘッダー色を設定できます。
ただしサイトキーカラーで設定した場合、見出しやフッターなども同じ色になります（スキンを使う場合は異なる色になる場合もあり）。
ヘッダーには、写真やイラストを入れることも可能です。
写真やイラストを入れるには「ヘッダー」タブの「ヘッダー背景画像」で設定します。
ヘッダーロゴの設定
ヘッダーロゴの設定は「ヘッダーロゴ」の「選択」を押します。
ロゴをアップロード（画面へロゴをドロップするか、ファイルを選択）します。
代替テキストの欄に「ヘッダーロゴ」などと入れて「画像の選択」を押します。
設定したら「変更をまとめて保存」を忘れずに押してください。
これでサイトを確認するとヘッダーロゴが表示されているはずです。
ヘッダーロゴを設定するとフッターにもロゴが表示されます。
「フッターのロゴは消したい」という方は、「フッター」タブの「フッター表示タイプ」で変更可能です。
ヘッダーロゴの大きさを設定
ヘッダーロゴの大きさは「ヘッダーロゴサイズ」で変更が可能です。
さきほどアップロードしたロゴの大きさは幅が686pxでした。
たとえばヘッダーロゴサイズを半分の幅（343px）で指定するとこのようになります（幅か高さのどちらかを指定すれば、もう一方は比率を維持して自動で変わります）。
ロゴの大きさは、ヘッダーレイアウトで「センターロゴ」を選択した場合のみ変更可能です。
ロゴが左側に表示される「トップメニュー」でロゴのサイズを指定すると、ロゴの縦横比が崩れます。
「トップメニュー」はヘッダーの高さが決まっているため、これは解消できません。
なのでロゴの大きさを指定する場合は「センターロゴ」を選択しましょう。センターロゴならヘッダーの高さも変えられます。
キャッチフレーズの設定方法
ヘッダーにキャッチフレーズを表示させる場合、ロゴの上下どちらに表示させるかを選択できます。
キャッチフレーズの文言は、「設定」→「一般」で入力します。
キャッチフレーズを入力して、配置で「ヘッダーボトム」を選択するとこんな感じです。
キャッチフレーズも「センターロゴ」を選択しないと表示されません。
ヘッダーロゴとキャッチフレーズの間隔を調整
キャッチフレーズを入れたら、ロゴとキャッチフレーズがやや離れていたので、
ロゴとキャッチフレーズの隙間を狭くして、キャッチフレーズの文字をロゴと同じ色にしました（下の画像は修正後です）。
使用したは下のCSSです。
/*ヘッダーロゴ、キャッチフレーズ間の余白*/
.logo.logo-header.logo-image{
padding-bottom: 0;
}
.tagline{
color: #fcf404;
margin: 0 8.4px 10px;
}
やり方ですが、メニューの「外観」→「テーマファイルエディター」を押します。
上のCSSをコピペして「ファイルを更新」を押します。
意味としては「padding-bottom: 0」と「margin: 0」でロゴとキャッチフレーズの隙間を狭くして、
「color」のところでは「#と6桁のコード」で文字色を指定しています。
最後に
今回は、Cocoonのヘッダーロゴの設定方法を紹介しました。
なお、パソコンで表示されるロゴとモバイル（スマホ）で表示されるロゴを変えることも可能です。
コメント