Cocoonテーマのヘッダーとロゴ。画像幅を理解してピッタリと。

Cocoon(コクーン)
スポンサーリンク

私だけが把握している「2つ目のブログを作ります」シリーズ。今回はヘッダー上部のカスタマイズを行っていきます。カスタマイズっていっても標準設定触るだけですけど。

このサイト作ったとき感じたのですが、ヘッダーの画像の幅が上手いこと合わないんですよね…

PCで見た場合、スマホで見た場合も見た目が異なるし、きっとコツがあるのだろうと少し調べてみました。結果としては、メディアクエリ(機器ごとの幅)で画像の表示量が異なるみたい。

あとは今回、お財布にやさしくということで画像は商用利用可で無料で使える素材をヘッダー画像とロゴに使います。これらの組み合わせでおよそ人とかぶることはないだろうと。

今回の記事では、同じようなブログ開設準備を行っていてヘッダー幅が微妙に合わなくてつかれちゃった人へ向けて、Cocoonテーマのヘッダーのカスタマイズ方法を共有します。

ドンちゃん
ドンちゃん

と言いつつアナタの備忘録。

スポンサーリンク

Cocoonテーマのヘッダー構成要素

ヘッダー上部ってどこからどこまで?となるので設定するのは次の通り。

ヘッダー上部の設定
  • ヘッダー背景
  • ヘッダーロゴ
  • アピールエリア
  • 通知エリア
  • グローバルメニュー
それとおまけで設定
  • トップページのOGP画像
  • ファビコン
Cocoonヘッダー上部の構成
Cocoonヘッダー上部の構成

と言ってもアピールエリア、通知エリアは今回触りません。一定量のブログアクセスがあって、人を呼び込めるコンテンツがある人は使ってみるとよいと思います。

Cocoonテーマでのヘッダー設定

「Cocoon設定」→「ヘッダー」

ヘッダーレイアウト

ヘッダーレイアウトは、ロゴやキャッチフレーズの表示場所を制御する設定です。

8種類のヘッダーレイアウト
  1. センターロゴ(デフォルト)
  2. センターロゴ(トップメニュー)
  3. センターロゴ(スリムメニュー)
  4. センターロゴ(スリムトップメニュー)
  5. トップメニュー
  6. トップメニュー(右寄せ)
  7. トップメニュー小
  8. トップメニュー小(右寄せ)

って言ったってこれだけじゃわかりませんよね。実際にやってみます。

ヘッダーレイアウトは設定項目によっては、スキン側の制御が入って設定できないようです。中央寄せの設定にしておくと、スキンどれを選んでも印象が変わらないかなぁ…

PC画面での8種類です。縦横比は同じ画像です。

Cocoonヘッダーレイアウト:センターロゴ(デフォルト)
センターロゴ(デフォルト)

▲ まずはデフォルト設定。

Cocoonヘッダーレイアウト:センターロゴ(トップメニュー)
センターロゴ(トップメニュー)

▲ グローバルメニューが上に変わっています。

Cocoonヘッダーレイアウト:センターロゴ(スリムメニュー)
センターロゴ(スリムメニュー)

▲ グローバルメニューがやや細くなっています。

Cocoonヘッダーレイアウト:センターロゴ(スリムトップメニュー)
センターロゴ(スリムトップメニュー)

▲ グローバルメニューが上にいきスリムバージョン。

Cocoonヘッダーレイアウト:トップメニュー
トップメニュー

▲ ロゴが左へグローバルメニューが真ん中に。

Cocoonヘッダーレイアウト:トップメニュー(右寄せ)
トップメニュー(右寄せ)

▲ メニューが右に寄りました。

Cocoonヘッダーレイアウト:トップメニュー小
トップメニュー小

▲ メニュー幅がスリムバージョン。

Cocoonヘッダーレイアウト:トップメニュー(右寄せ)
トップメニュー(右寄せ)

▲ メニュー幅スリムで右寄りバージョン。

モバイル(タブレット縦表示含む)の場合、グローバルメニューが表示されなかったので違いは二つだけでした。

Cocoonヘッダーレイアウト:センターロゴ(モバイル)

以下は全て同じ表示。

  • センターロゴ(デフォルト)
  • センターロゴ(トップ)
  • センターロゴ(スリムメニュー)
  • センターロゴ(スリムトップメニュー)
Cocoonヘッダーレイアウト:トップメニュー(モバイル)

以下は全て同じ表示。

  • トップメニュー
  • トップメニュー(右寄せ)
  • トップメニュー小
  • トップメニュー小(右寄せ)

最初違いがよくわかりませんでした。トップメニューの方は私にはデザイン難易度がたかそうなので、結局デフォルトにします。ここまでやって…w

ヘッダーの高さ(PCとモバイル)

この設定は運営される方の好みです。注意点としては、いつも見ているPC画面だけではなく、いろんなサイズで確認しましょう。

サイズを確認するツールがコクーンに備わっています。

Cocoonのレスポンシブテストツール
Cocoonのレスポンシブテストツール

▲ ワードプレスにログインした後、自分のブログを見ると画面下部に表示されています。このツールは秀逸です。コクーンには3種類入っていますが、今回はResolution Testでご紹介します。

Cocoonに備わっているResolution Testツール
Cocoonに備わっているResolution Testツール

高さの印象がデバイスで異なります。縦横比が異なるのでそうですよね。

コクーンのヘッダー高さはPC用(タブレット含む)、モバイル用で分かれるので自分の好みで調整してみましょう。それぞれの画面をみながら好みの高さを決めると良いと思います。

私は、PC・モバイル双方「200px」としました。ロゴのサイズを決めるのに明示的に設定しておいた方が良いような気がします(でないと既定幅毎回調べないといけないので)

ヘッダー背景とロゴ

さてヘッダー背景とロゴですが、やり方いくつかありそうですね。

  1. 背景画像とロゴ画像の組み合わせ
  2. 背景画像にロゴも一体化
  3. 背景画像のみでロゴはテキスト表示

ココナラとかに依頼する場合、1番目か2番目の方法かな。アイコンは頼んだことあるのですが、ヘッダー画像はまだ未経験です。私は1番目の方法で対応しました。

スポンサーリンク

そいえばヘッダーの幅って

コクーンのヘッダーは高さは設定画面で指定できましたよね。横幅については… ヘッダー設定内には少なくともない(多分他にもない)

PC、タブレット、モバイルごとにヘッダー幅を開発コンソールで確認しました。

Cocoonのヘッダー幅を開発コンソールで確認

読み取れないと思いますが、中央部分「1236px x 200px」となっています。オレンジ部分が見え始めると、画像がオリジナルより拡大されているということになります。

Cocoonのヘッダー幅を開発コンソールで確認(モバイル)

これは見えますね。「360px x 200px」

Cocoonのヘッダー幅を開発コンソールで確認(タブレット)

これもなんとか読めます。「768px x 200px」

基本はPC幅の1236px(少し余分に1240px)にしておけばどのデバイスで見ても画像の劣化はなかったです。また、1240px以上にするとどうなるかというと少しずつ中央に向かって拡大していきます。

Cocoonのヘッダー上部を幅を変えながら表示領域を確認する(PC環境)
Cocoonヘッダー画像が幅によって表示が変わる様子

まとめると次の通り。

  • ヘッダー幅 < 1240pxの場合:画像の真ん中を中心に幅だけ変わる。
  • ヘッダー幅 > 1240pxの場合:途中から中央に向かって拡大していく。

前者は、1240pxの幅で画像を用意すれば、その範囲内であれば劣化はないです。デバイスの幅によって中央によっていくので背景画像はそこを意識して選択したほうが良さそうです。

追記:高さはGIFアニメーションだと少し足りなくて、ヘッダー画像下で一瞬ブルー背景が見えるタイミングがあると思います。高さは200pxに対して画像は215pxにしていました。これではまだ足りない。240pxでブルー背景は消えました。上記と同じような操作をやりながら確認することをお勧めします。

ブログで使える写真画像サイト

いくつかブログ向けに使える画像サイトをご紹介します。私はもっぱらunsplashです。

商用利用可能な写真画像サイト
  • ぱたくそ(Patakuso)
    • 高品質・高画質な画像が使える。人物画像は日本人なので使いやすい。
  • Unsplash
    • 世界中の綺麗な写真画像が使えるサイト。一切の広告表示がないのが使いやすい
  • Pixabay
    • 私はUnsplash見てピンとこないときに見ます。レタッチが多少入るか。
ブログで使えるロゴジェネレーター

これも色々なサービスがあります。次のサイトでまとめられています。

私はロゴメーカーというところで作りました。

Cocoonヘッダーに表示するロゴをLOGO MAKERで作ってみる

▲ 見ての通り、直感的にさわれます。ブログ名入れてフォントやアイコンを選んで好みの配置を並べるだけです。

GIFアニメーションでわかるか微妙ですがアイコンを配置する時に中央や右端といったガイド(縦横の線)が出て位置を教えてくれています。アイコンは背景が透過されたものとそうでないもの、サイズは3種類から選ぶことができます。

LOGO MAKERで作った実際のロゴ

▲ 2, 3分くらいでそれっぽくなります。

もっと凝ったロゴじゃないとダメという方。

確かにロゴメーカーで作るとどことなく既視感が出るので、それがイヤな人はココナラとかで作ってもらうのもアリですね。

Cocoonヘッダーで使うお好みロゴがない場合は、ココナラでどうぞ。

参考 ココナラ「ロゴ・デザイン(3,000円以下)」

会員登録無料です。リンクからの登録 で300ptゲットできます。
プロモーションコードc86fab

仕上げにCanva(キャンバ)を使う

写真画像にそのままロゴ載せても良いのですが、素材が合わないとロゴがうまくなじみません。私は、Canvaというデザインツールを使ってロゴ周辺部分にマスクをかけました。

当ブログで文字入りのアイキャッチは全てCanvaで作成しています。直感的なインタフェースですが数時間も触っていればすぐになれます。ご心配なく無料です(データ保存量が増えてきたときに有料の提案がきそうですが)

この記事から投稿後、3ヶ月をへてCanvaの有料プランに移行しました

▲ まだいまいち感がありますけど妥協。マスクの透明度の最適化に一番時間かかりました。

▲ ついでにこのブログも直しました。このブログを作った頃、要領わかっておらず画像が最適化できてなかったですね。PC画面の通常表示(1240px)でも画像劣化してました。

このブログの場合は、PC表示とスマートフォン表示で最適化、タブレットは数%の検索流入なので…(手抜きw)

▲ 追記(’19年6月):一つ前のものからさらに修正しました。とあるブロガーイベントに申し込みをしたので、サイト全体に一体感を持たせました。リンク広告とかも馴染んでたでしょ。

今回はどのデバイスでもかっこよく見えるようになったと勝手に思っています。見えないとは思いますが、元の画像にブラックのうすーいマスクをかけてロゴが浮かび上がるようにしています。

スポンサーリンク

ヘッダーとロゴの設定方法

「Cocoon設定」→「ヘッダー」

Cocoonヘッダー・ロゴ画像の設定
Cocoonロゴ画像の設定
Cocoonヘッダー画像の設定
Cocoonヘッダー画像の設定

ヘッダーロゴは指定しないとテキストタイトルが表示されます。ロゴと背景が一体化された画像を使う場合は、CSSでタイトルを消す必要があるようです。

セレクタで要素指定して、「display: none;」ですね。

グローバルメニュー

グローバルメニューはヘッダー上部に表示させるサイト内のメニューです。コクーンでは、階層表示もできるようにアコーディオンで使えます。設定はCocoon設定ではなく「外観」から行います。

「外観」→「メニュー」

Cocoonヘッダー上部のグローバルメニューを作る設定

▲ 結構直感的に触っていきます。メニューはカテゴリ、固定ページから選べたり、記事ではないカスタムリンクなんかも使えます。

OGP背景画像

OGPとは、「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

OGPを設定しよう!SNSでシェアされやすい設定方法とは?(DigitalMarketingblog)

トップページをSNSでシェアした際に表示されるのがOGPの画像です。これ、結構忘れて設定していない方多く見られます。ツイッター見ていると、みんなコクーンの画像。コクーンLOVEの証。

チャンビア
チャンビア

ツイッター見ていると、ブログ紹介とかしてもらっている人でサイト画像が依然として、Cocoonデフォルトになっています。

せっかく、ブログ紹介してもらうならオリジナルでキリッと決めましょう。

最適なサイズ

コクーンのマニュアル見たのですが見当たりませんでした。とりあえず、コクーンと同じ画角にしておけば問題ないでしょう。

CocoonデフォルトのOGP画像

サイズは「880px x 660px」でした。これと同じサイズにしてロゴも中央寄りにしておけば大丈夫じゃないかなと。

設定方法

「Cocoon設定」→ 「OGP」

CocoonのOGP画像設定
CocoonのOGP画像設定

実際の投稿に反映されるかの確認

次のようなサイトで確認できるようです。

サイトアイコン(ファビコン)

ファビコンってブラウザの上部に出てくる小さなアイコンです。あとはマイクロソフトのタイルアイコンなんかにも使われるそうです。

ファビコンの例

これもCanvaでサイズ指定して、ロゴなり文字なり512px正方形で作ればすぐです。

追記(’19/5/24):Googleの検索結果にも今後はファビコン表示されるらしいです。サイトブランドを示すためにもしっかり設定しておきたいですね。

設定方法

「外観」→「ヘッダー」→「サイト基本情報」

ワードプレスのサイトアイコン(ファビコン)設定
ワードプレスのサイトアイコン(ファビコン)設定

まとめ

この記事、結構疲れました。一度触るとそれ以降は触らないので忘れちゃいますよね。今作っているサイトは、もう少し記事を増やして4月上旬にはインデックスしようと思います。

おしまい。

ドンちゃん
ドンちゃん

これ、新しいブログの宣伝?(深読み

Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。
このブログを購読してみる
スポンサーリンク
スポンサーリンク
ブログの購読はこちら

バジェットな旅行記ロク、主に東南アジアを中心とした旅行ブログです。

ブログ投稿は週に2, 3回です。写真多め、見やすい記事をお届けします。

cocoon-affiliate-tag-bannerblog-icon-banner
バジェットな旅行記ロク

コメント

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