【Cocoon】ヘッダーのシンプルなカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はリクエストをいただいたヘッダーのカスタマイズ方法をご紹介します。

当ブログで現在設定しているような、メニューなどもなくシンプルなヘッダーの作り方です。

ではさっそくやっていきましょう〜！

ロゴ画像の設定

まずは一番大事なロゴを設定します。

初期状態だと「設定 ＞ 一般」にある「サイトのタイトル」と「キャッチフレーズ」が表示されますね。

ロゴがあったほうがサイトもカッコよくなるので、できれば画像を用意しましょう。僕は背景透過のPNG画像で用意しました↓

用意した画像を「Cocoon設定 ＞ ヘッダー」にある「ヘッダーロゴ」に指定します。サイズは幅か高さのどちらかを指定すれば、縦横比が自動で調整されます↓

モバイルでロゴのサイズを変更したい場合はCSSで調整します。僕の場合はPCで幅300px（Cocoon設定）、モバイルで幅200px（CSS）にしています↓

.logo-header img {
  width: 200px;
}

上記コードを「外観 ＞ テーマエディター ＞ スタイルシート（style.css）」の中にある、「/*768px以下*/」の部分に追加します。こんな感じですね↓

@media screen and (max-width: 768px){
.logo-header img {
  width: 200px;
}
}

キャッチフレーズの設定

ヘッダーロゴサイズの下に「キャッチフレーズ」の設定があると思いますが、僕はなるべくシンプルにしたいので「表示しない」にしています。

背景色・ボーダーの設定

背景色は「Cocoon設定 ＞ ヘッダー」の「ヘッダー全体色」で設定します。

カラーピッカーを動かして調整するか、「#444d53」などのカラーコードを直接入力して指定します。

下部のボーダーは設定項目がないので、CSSでカスタマイズしています。僕の場合はグラデーションになっているのでこんなコードです↓

#header:after {
  content:"";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, #72c7e6 0%,#8ae2d7 100%);
  background: -webkit-linear-gradient(left, #72c7e6 0%,#8ae2d7 100%);
}

グラデーションじゃなくて普通の単色のボーダーの場合は以下のようなシンプルなコードで大丈夫です↓

#header {
  border-bottom: solid 4px #72c7e6;
}

「solid」がボーダーの形状、
「4px」が太さ、
「#72c7e6」の部分が色ですね。

ヘッダーの高さの調整

あとは高さのバランスを整えれば完了です。

「Cocoon設定 ＞ ヘッダー」にある「高さ」でも変更できますが、僕の場合はロゴの上下で余白のサイズを変えたかったのでCSSで変更しています↓

.logo-header {
  padding: 20px 0 10px 0;
}

４つの数字はそれぞれ「上、右、下、左」の順番になっています。

フッターのロゴを調整

フッターにロゴを指定していない場合にヘッダーと同じ画像が表示されますが、デフォルトで最大幅と高さが指定されているので、画像の表示がおかしくなる場合があります。

以下がデフォルトで指定されているコードなので、ヘッダーと同じ画像を使用する場合には最大幅や高さを調整してみてください。

.footer-bottom-logo img {
  height: 50px; /* ロゴ画像の高さの指定 */
  width: auto;
}
.footer-bottom-logo .logo-image {
  max-width: 120px; /* ロゴ画像の最大幅の指定 */
}

当ブログと同じようなフッターのカスタマイズについては以下の記事で詳しく紹介しています。

【Cocoon】フッターのシンプルなカスタマイズ

...

web-ashibi.net

2019.05.12

ということでヘッダーのカスタマイズ方法のご紹介でした！メニューもない超シンプルなタイプですが参考になれば幸いです。