私だけが把握している「2つ目のブログを作ります」シリーズ。今回はヘッダー上部のカスタマイズを行っていきます。カスタマイズっていっても標準設定触るだけですけど。
このサイト作ったとき感じたのですが、ヘッダーの画像の幅が上手いこと合わないんですよね…
PCで見た場合、スマホで見た場合も見た目が異なるし、きっとコツがあるのだろうと少し調べてみました。結果としては、メディアクエリ（機器ごとの幅）で画像の表示量が異なるみたい。
今回の記事では、同じようなブログ開設準備を行っていてヘッダー幅が微妙に合わなくてつかれちゃった人へ向けて、Cocoonテーマのヘッダーのカスタマイズ方法を共有します。
と言いつつアナタの備忘録。
Cocoonテーマのヘッダー構成要素
ヘッダー上部ってどこからどこまで？となるので設定するのは次の通り。
- ヘッダー背景
- ヘッダーロゴ
- アピールエリア
- 通知エリア
- グローバルメニュー
- トップページのOGP画像
- ファビコン
と言ってもアピールエリア、通知エリアは今回触りません。一定量のブログアクセスがあって、人を呼び込めるコンテンツがある人は使ってみるとよいと思います。
Cocoonテーマでのヘッダー設定
「Cocoon設定」→「ヘッダー」
ヘッダーレイアウト
ヘッダーレイアウトは、ロゴやキャッチフレーズの表示場所を制御する設定です。
- センターロゴ（デフォルト）
- センターロゴ（トップメニュー）
- センターロゴ（スリムメニュー）
- センターロゴ（スリムトップメニュー）
- トップメニュー
- トップメニュー（右寄せ）
- トップメニュー小
- トップメニュー小（右寄せ）
って言ったってこれだけじゃわかりませんよね。実際にやってみます。
PC画面での8種類です。縦横比は同じ画像です。
▲ まずはデフォルト設定。
▲ グローバルメニューが上に変わっています。
▲ グローバルメニューがやや細くなっています。
▲ グローバルメニューが上にいきスリムバージョン。
▲ ロゴが左へグローバルメニューが真ん中に。
▲ メニューが右に寄りました。
▲ メニュー幅がスリムバージョン。
▲ メニュー幅スリムで右寄りバージョン。
モバイル（タブレット縦表示含む）の場合、グローバルメニューが表示されなかったので違いは二つだけでした。
以下は全て同じ表示。
- センターロゴ（デフォルト）
- センターロゴ（トップ）
- センターロゴ（スリムメニュー）
- センターロゴ（スリムトップメニュー）
以下は全て同じ表示。
- トップメニュー
- トップメニュー（右寄せ）
- トップメニュー小
- トップメニュー小（右寄せ）
この記事ではセンターロゴ（デフォルト）の設定で進めます。記事の後半にトップメニューで画像を使わないパターンも掲載します。
ヘッダーの高さ（PCとモバイル）
この設定は運営される方の好みです。注意点としては、いつも見ているPC画面だけではなく、いろんなサイズで確認しましょう。
サイズを確認するツールがコクーンに備わっています。
▲ ワードプレスにログインした後、自分のブログを見ると画面下部に表示されています。このツールは秀逸です。コクーンには3種類入っていますが、今回はResolution Testでご紹介します。
高さの印象がデバイスで異なります。縦横比が異なるのでそうですよね。
コクーンのヘッダー高さはPC用（タブレット含む）、モバイル用で分かれるので自分の好みで調整してみましょう。それぞれの画面をみながら好みの高さを決めると良いと思います。
私は、PC・モバイル双方「200px」としました。ロゴのサイズを決めるのに明示的に設定しておいた方が良いような気がします（でないと既定幅毎回調べないといけないので）
ヘッダー背景とロゴ
さてヘッダー背景とロゴですが、やり方いくつかありそうですね。
- 背景画像とロゴ画像の組み合わせ
- 背景画像のみでブログ名はテキスト表示
ヘッダー画像やロゴは、ココナラとかでも依頼はできます。
そいえばヘッダーの幅って
コクーンのヘッダーは高さは設定画面で指定できましたよね。横幅については… ヘッダー設定内には少なくともない（多分他にもない）
PC、タブレット、モバイルごとにヘッダー幅を開発コンソールで確認しました。
読み取れないと思いますが、中央部分「1236px x 200px」となっています。オレンジ部分が見え始めると、画像がオリジナルより拡大されているということになります。
これは見えますね。「360px x 200px」
これもなんとか読めます。「768px x 200px」
基本はPC幅の1236px（少し余分に1240px）にしておけばどのデバイスで見ても画像の劣化はなかったです。また、1240px以上にするとどうなるかというと少しずつ中央に向かって拡大していきます。
まとめると次の通り。
- ヘッダー幅 < 1240pxの場合：画像の真ん中を中心に幅だけ変わる。
- ヘッダー幅 > 1240pxの場合：途中から中央に向かって拡大していく。
前者は、1240pxの幅で画像を用意すれば、その範囲内であれば劣化はないです。デバイスの幅によって中央によっていくので背景画像はそこを意識して選択したほうが良さそうです。
追記：高さはGIFアニメーションだと少し足りなくて、ヘッダー画像下で一瞬ブルー背景が見えるタイミングがあると思います。高さは200pxに対して画像は215pxにしていました。これではまだ足りない。240pxでブルー背景は消えました。上記と同じような操作をやりながら確認することをお勧めします。
ブログで使える写真画像サイト
いくつかブログ向けに使える画像サイトをご紹介します。
- ぱくたそ(Pakutaso)
- 高品質・高画質な画像が使える。人物画像は日本人なので使いやすい。
- Unsplash
- 世界中の綺麗な写真画像が使えるサイト。一切の広告表示がないのが使いやすい
- PIXTA（ピクスタ）
- 著名な有料素材サイト。ここぞという画像は有料モノを使うとほかのサイトと差別化（かっこよく・おしゃれ）できます。
- 「パノラマ」「パノラマ＋何か」「イラスト＋ヘッダー」などで検索すると横長画像を探せます。
ヘッダーに使うような画像は、パノラマ的な横長画像だと扱いやすいです。上記の中ではPIXTA（ピクスタ）が一番見つけやすいですね。一点から購入可能です。
ブログで使えるロゴジェネレーター
これも色々なサービスがあります。私はロゴメーカーというところで作りました。
▲ 見ての通り、直感的にさわれます。ブログ名入れてフォントやアイコンを選んで好みの配置を並べるだけです。
GIFアニメーションでわかるか微妙ですがアイコンを配置する時に中央や右端といったガイド（縦横の線）が出て位置を教えてくれています。アイコンは背景が透過されたものとそうでないもの、サイズは3種類から選ぶことができます。
▲ 2, 3分くらいでそれっぽくなります。
参考 ロゴメーカー
もっと凝ったロゴじゃないとダメという方。
確かにロゴメーカーで作るとどことなく既視感が出るので、それがイヤな人はココナラとかで作ってもらうのもアリですね。
仕上げにCanva（キャンバ）を使う
写真画像にそのままロゴ載せても良いのですが、素材が合わないとロゴがうまくなじみません。私は、Canvaというデザインツールを使ってロゴ周辺部分にマスクをかけました。
当ブログで文字入りのアイキャッチは全てCanvaで作成しています。直感的なインタフェースですが数時間も触っていればすぐになれます。ご心配なく無料です（データ保存量が増えてきたときに有料の提案がきそうですが）
▲ 追記（’20年10月）：最近の サブブログ はこんな感じ。この記事投稿時点は、数記事しかなかったのですが、今では60記事程度あります。ちょっと戦力になってきました (‘ω’)
70記事ちょい、コロナ禍とはいえ収益は抜き去れれました…
▲ 追記（’20年10月）：このブログ、サブともにヘッダー・モバイルメニューを有効化しています。モバイルメニューの背景色に合わせた色でロゴを作っておくと馴染みます。
ヘッダーとロゴの設定方法
「Cocoon設定」→「ヘッダー」
グローバルメニュー
グローバルメニューはヘッダー上部に表示させるサイト内のメニューです。コクーンでは、階層表示もできるようにアコーディオンで使えます。設定はCocoon設定ではなく「外観」から行います。
「外観」→「メニュー」
▲ 結構直感的に触っていきます。メニューはカテゴリ、固定ページから選べたり、記事ではないカスタムリンクなんかも使えます。
OGP背景画像
OGPとは、「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。
OGPを設定しよう！SNSでシェアされやすい設定方法とは？（DigitalMarketingblog）
トップページをSNSでシェアした際に表示されるのがOGPの画像です。これ、結構忘れて設定していない方多く見られます。ツイッター見ていると、みんなコクーンの画像。コクーンLOVEの証。
ツイッター見ていると、ブログ紹介とかしてもらっている人でサイト画像が依然として、Cocoonデフォルトになっています。
せっかく、ブログ紹介してもらうならオリジナルでキリッと決めましょう。
最適なサイズ
コクーンのマニュアル見たのですが見当たりませんでした。とりあえず、コクーンと同じ画角にしておけば問題ないでしょう。
サイズは「880px x 660px」でした。これと同じサイズにしてロゴも中央寄りにしておけば大丈夫じゃないかなと。
設定方法
「Cocoon設定」→ 「OGP」
実際の投稿に反映されるかの確認
次のようなサイトで確認できるようです。
サイトアイコン（ファビコン）
ファビコンってブラウザの上部に出てくる小さなアイコンです。あとはマイクロソフトのタイルアイコンなんかにも使われるそうです。
これもCanvaでサイズ指定して、ロゴなり文字なり512px正方形で作ればすぐです。
追記（’19/5/24）：Googleの検索結果にも今後はファビコン表示されるらしいです。サイトブランドを示すためにもしっかり設定しておきたいですね。
設定方法
「外観」→「ヘッダー」→「サイト基本情報」
画像のないパターン（トップメニュー）
（20年5月追記）気分転換にサブブログのヘッダーを画像なしパターンにしてみました。以下が設定内容です。
- Cocoon設定 → ヘッダー
- 「ヘッダーレイアウト」を「トップメニュー（右寄せ）」に設定
- 「ヘッダーを固定する」にチェック
- 以下を同一色にする
- 「ヘッダー全体色」→「ヘッダー全体背景色」
- 「グローバルナビメニュー色」→ 「グローバルナビ色」
▲ スキンは「ミックスブルー」「モダンブラック」あたりをよく使っています。
▲ シンプルですよね、サブはテック系なのでこういうヘッダーの方が相性が良いかもしれません。
まとめ
少しクセのあるCocoonのヘッダー設定について記事投稿しました。
うまく合う写真がないからか、コクーン利用者の中には無色背景を使っている人もいます。パノラマ的な写真やヘッダーを用意すると綺麗に仕上がります。
ブラウザについている開発コンソールをよく見て設定しましょう。
- 素材を一点から購入可能
- 買い切りなので何度でも使える
- 著作権を侵害する心配なし
- 高品質な日本人素材多数
- 写真・イラスト・動画素材
- 複数枚なら定額プランがお得
コメント
こんにちは！
ヘッダーサイズなど弄ろうかと考えていたのですが参考になりました！
ありがとうございます！
ゴリラーアーキテクトさん
お役に立てたようで何よりです ^^