WordPress

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

当サイトはアフィリエイト広告を利用しています。

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

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

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

ロゴ画像の設定

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

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

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

解像度が2倍のRetinaディスプレイでも綺麗に見えるように、画像のサイズは表示したいサイズの倍の大きさで用意するのをオススメします。

用意した画像を「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;
}

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

フッターのロゴを調整

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

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

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

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

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

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. よろぶろ より:

    DICEさん、こんばんは。
    いつも記事を楽しみにしています。
    そして、とてもお世話になっています。
    DICEさん、もし良かったら、もし良かったらですが…
    先日アップグレードされたSTORK19のようなJINにもあるような「ピックアップ・コンテンツ」をcocoonでも表示できるようなカスタマイズを教えて頂けないしょうか?
    ネットサーフィンを続けてもそれらしき情報はなくw(あってもデザイン的にDICEさんのようなカッコよさはなくて)
    リクエストする失礼なコメントを残してまで聞いてみたいと思いましたw
    すみませんが、お願い致します。

  2. よろぶろ より:

    すみません。こちらこそありがとうございます。
    楽しみにしております!

  3. よろぶろ より:

    DICEさん、ありがとうございました。
    早々とピックアップコンテンツを表示するカスタマイズの仕方を教えて下さって本当にありがとうございます。
    ブログを作りながらcssを分かっていない自分にうんざりしていました。なのに、そのくせしてデザインにこだわりたいというなんとも形容しがたいジレンマに陥ったりしていました。その時に出会えたのが「うぇぶあしび」でした。
    DICEさんの書いた記事を参考に、見様見真似でブログをカスタマイズしてきました。
    きっと自分が「こういうふうにしたいなぁ」と思ってることが、DICEさんが取り入れてるデザインに「既にあったから」だと思います。それで、導入できたらなと渇望していたカスタマイズについて勇気を出して質問してみようと思いました。応えて下さるなんて。涙

    自分が思っていた通りのデザインを教えて頂けて本当に感謝感謝です。

    何よりDICEさんに感謝したいのは、DICEさんの記事を真似てカスタマイズをしているうちに、まだ書けはしませんが、どこがどうなるのか、ある程度cssが分かってきたことです。
    ありがとうございました。

    これからも更新されていく記事を楽しみにしています。
    そして、これからも宜しくお願いします。

    • DICEDICE より:

      お役に立てて良かったです^^
      適当に数字を変えたりして実験してみるとCSSの内容がより理解できると思うのでやってみてくださいね!

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