[WordPress]Cocoonカスタマイズ：サイトロゴの表示をスマホだけにする＋PCのヘッダー背景画像の調整

こんにちは！

当ブログは、皆さんご存じ

WordPress無料テーマのCocoonを利用しております。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

とても高機能で、

いまだに把握できていない部分の方が多いので

カスタマイズなんて偉そうな事は恐れ多いのですが・・・(^^;

今回、自分のサイトでこうしたい！と思った点について

対応した内容を書いていきます！

Index

サイトロゴの表示は、スマホだけにしたい
ヘッダー背景画像のPCでの見え方が気になる

サイトロゴの表示は、スマホだけにしたい

ななふ

Cocoonのヘッダー画像とロゴの配置って調整が難しい・・・

Cocoonに不満！があるとしたら、

ロゴとヘッダー画像の調整が難しいことです。

デスクトップPC、スマホ、タブレットで

自作のヘッダー画像をちゃんと見える様にしたいのですが

これまで挫折を繰り返してきました。

もう少し改善できないかと思いまして、

今回ヘッダー画像（背景画像）をロゴを含んだ一枚にして作り直し、

ロゴはモバイル専用として別ファイルで作成しました！

Cocoonのヘッダーレイアウトの設定

私が使っているのは「センターロゴ(スリムトップメニュー)」です。

つい最近までは、ヘッダー画像はPCのみで表示にして

モバイル(スマホ・タブレット）では表示を消していました。

自作したヘッダー画像のサイズが大き過ぎて、上手く表示できませんでした。

↓これまでのヘッダー画像のサイズ：1500×500でした。なんでこのサイズで作ったのか？

多分Cocoon関連のブログの影響を受けてだったと思いますが、あやふや💦

前のヘッダー画像を作ったのはかれこれ6月ぐらい？

紫陽花をイメージした画像を作りたかったんです～。

画面幅いっぱいに表示したかったんです・・・

モバイルでだけヘッダー画像を消したい時：
Cocoon設定 > ヘッダータブで、高さ(モバイル)の設定値を”0″にすれば消えます

ヘッダー背景画像を作り直し

今回、こちらのブログを参考にさせて頂いて、

ヘッダー画像のサイズは1240 x 250 で作成することにしました。

別々のファイルだとヘッダー画像とロゴの調整が難しいので、

ヘッダー画像内にロゴも含んで作ってしまうことにしました！

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

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

※後述のロゴの消し方とか、こちらの記事に書いてることを

実践しただけです(・・;)Cocoonのヘッダーについて理解が深まるので、おススメです！

ロゴの扱い

ロゴはPC, モバイルで分けての表示設定が無いので、

デフォルトでは設定したらPC,モバイル両方で表示されます。

もしロゴを設定しないと、サイトタイトルがテキストでロゴの代わりに表示されてしまいます。

↓こんな感じに、Na2factoryのテキストがど真ん中に登場！！これはいらないよ～(^^;

そんなわけでロゴの設定はしないとだけど、

ヘッダー背景画像は既にロゴも含んでいるので、

ロゴ表示したくない！！（消したい！！）

それが今回のカスタマイズその1。（簡単！）

Cocoon子テーマのstyle.cssに、以下を追加するだけ～

※cssを変更する際は、各時でBackup等取ってから行いましょう～

/* PCのHeader　ロゴを消す */
.header-site-logo-image {
display:none;
}

Cocoon設定のヘッダーのプレビューではこんな風に↓

背景の上にロゴが表示されてしまってますが、

実際の公開ページではロゴは表示されません。

これでロゴの問題は回避とします！

ヘッダー背景画像のPCでの見え方が気になる

さて、作り直したヘッダー背景画像なんですが・・・

モバイルでは色々な端末の表示を見て、とりあえず問題ない感じになりました。

Cocoon設定で、高さの設定はPC,モバイル共に画像作成サイズの250pxにしてます。

問題は、PCの大きい画面の時！

特にフルHDのモニターでは、ヘッダー画像が拡大されていき、

ヘッダー画像に入っているテキスト部分が欠けそうになってしまいました💦

解析ツールで確認し、

ヘッダー背景画像のcssで以下が効いている事を確認！

まあ、そりゃそう設定してあるだろうな・・・

  .header {
    background-size: cover;
  }

background-size: coverは、画像の縦横比を保ったまま画面サイズに合わせて

画像を拡大するので

PCで大きい方向に拡大する際には、表示が切れてしまう事に💦

ただ、モバイルの場合はこちらが設定されていないと逆に画像が

小さくなりすぎておかしな表示になってしまいます。

尚、Cocoon設定で背景画像の高さを250よりも大きくすれば、（500ぐらい)

cssを変更せずとも画像を全て表示することは可能でしたが、

下の新着記事との間がかなり空いてしまって不自然な見た目になってしまいました。

NG!

そこで、

カスタマイズその2！

PC表示の際にはbackground-size:contain;を有効にし、

モバイル(※画面幅1023px以下の時としました)では

background-size: coverが有効になるように、

Cocoon子テーマのstyle.cssに追加しました！

/* PC表示の背景画像 */
.header {
  background-size: contain;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  .header {
    background-size: cover;
  }
}

これで,何とか自分的に納得できる表示になったと思います。(^^;

今回私の作った背景画像はイラストパターンで

背景白で作っていたこと、

横幅画面いっぱい拡大しなくてもよい画像であった為

この対応で良かったですが、もし写真を使っていたら

やっぱりbackground-size: cover;を使った方が見た目いいと思うので

そこは画像次第ですね(;^_^A

自分の為の備忘録になっていて、お役に立てずでしたら申し訳ございません！！

以前よりもほんの少し表示を改善できて、自分的には満足でした。

今回は以上になります。

ありがとうございました！