見ていただきありがとうございます。ぽぽです。
Cocoonのヘッダーで、止まっていませんか。
- ヘッダーに入れた画像が、上だけ切れて表示される
- ロゴの大きさが合わない
- スマホで見ると、なんだか変
- 色を変えたいのに、場所がわからない
※ヘッダーは、ブログのいちばん上の帯です。ブログ名やメニューが入っている部分ですね。
私も、ここで止まった側です。
スケートボードのブログはCocoonで書いています。
ロゴを画像にしたかったんです。
でも、やり方がわからない。
結局、文字のままにしました😇
この記事のために、今回あらためて設定してみました。
先に答えを書いておくと、こうです。
| やりたいこと | Cocoonで |
|---|---|
| ヘッダーの高さを変える | |
| ロゴを画像にする | |
| ロゴの大きさを変える | |
| 背景の画像を切らずに出す | |
| スマホでもロゴを出す | |
| 色を変える |
ヘッダーは、設定でかなりできます。
見出しやブログカードとは、そこが違うんですよね。
私が知らなかっただけ、という話です。
ということで、私のブログの実物から順に書きます。
- 過去の自分：ロゴを画像にしたかったが、やり方がわからず文字のまま
- いま：SWELLでブログ4年目（スケートボードのブログはCocoonのまま）
スケートボードのブログのヘッダーは、文字のロゴ
まず、私のスケートボードのブログのヘッダーです。
| 部分 | 中身 |
|---|---|
| ロゴ | 文字の「じぇしーの家」 |
| ヘッダーの画像 | なし |
| 色 | ピンク（スキン「Simple Pink」） |
| 形 | ロゴが真ん中・メニューが上 |
ロゴは画像にしたかったんですよね。
でも、どこで入れるのかがわからない。
そのまま文字で書き続けて、今に至ります。
ピンクの色は、自分で選んだ色ではありません。
スキンという「着せ替え」を選んだだけ。
それで、ヘッダーも見出しも全部ピンクになりました。
スキンの話は、見出しの記事に書いています。
困ったのは、切れる・大きさ・スマホ・色の4つ
当時つまずいたのは、この4つです。
- 画像が切れる
- 大きさが合わない
- スマホで変になる
- 色
見本のページで再現すると、こんな感じです。
同じところで困っている人、多いんですよね。
Yahoo!知恵袋には、こんな質問が並んでいます。
- ヘッダーに画像を入れると、上の部分だけ表示される
- ロゴを選んでも表示されない
- ロゴが横長になる
- スマホだけロゴが出ない
今年の質問もありました。
いまも、みんなここで止まっているわけです。
Cocoonのヘッダー カスタマイズは「ヘッダー」タブ
場所は、ここです。
WordPressの管理画面 →「Cocoon 設定」→「ヘッダー」タブ
項目は、Cocoon公式の最新のプログラムで確かめました。
私が困った4つに当てはめると、こうです。
| 困ったこと | 見る項目 |
|---|---|
| 画像が切れる | ヘッダー背景画像 →「背景画像を全て表示する」 |
| 大きさが合わない | ヘッダーロゴ →「ロゴの幅・高さ」 |
| スマホで変になる | 高さ（モバイル） |
| 色 | ヘッダー全体色 |
ぽぽ正直に書くと、どの項目も覚えていません。知らなかったんだと思います。
高さ・高さ（モバイル）
ヘッダーの高さを、数字（px＝画面の点の数）で決めます。
未入力なら、はじめの高さのままです。
スマホ用は別の欄なんですね。
スマホ用が効くのは、画面の幅が834px以下のとき。
タブレットもこちらに入ります。
ヘッダーロゴと、ロゴの幅・高さ
ロゴにする画像を選ぶ欄です。
その下に、幅と高さを数字で入れる欄もあります。
大きい画像をそのまま入れると、どうなるか。
ロゴがはみ出します😭
幅に数字を入れれば、その大きさにそろいますよ。
私がやりたかったのは、たぶんここですね。
ヘッダー全体色
ヘッダー全体の背景の色と、文字の色を選びます。
ロゴのまわりの色は、別の欄。
「ヘッダー色（ロゴ部）」です。
見本では、2つとも紺にしました。
スキンのピンクから、がらっと変わりますね。
画像が切れるときの直し方
いちばん多い「画像が切れる」を、順番に直してみます。
何がダメなのか
ヘッダーに写真を入れると、上の部分しか出ません。
見本では、写真の下の板がまるごと消えています。
理由は、Cocoonの見た目を決めるファイル（CSS）に書いてありました。
- 背景の画像は、ヘッダーの横幅いっぱいに広げる
- 位置は「上の真ん中」にそろえる
- はみ出した下の部分は、表示しない
横長の帯に合わせて広げるので、縦がはみ出すんですね。
スマホだと、見える所がパソコンと変わります。
どうすればよくなるか
「ヘッダー」タブで、3か所を変えます。
はじめての人向けに、最初から順番に書きますね。
- WordPressにログインして、管理画面を開く
- 左のメニューから「Cocoon 設定」を押す
- 画面の上に並んだタブから「ヘッダー」を押す
- 「ヘッダーレイアウト」の点が、「センターロゴ」で始まる名前に付いているか見る
- 「ヘッダー背景画像」の「選択」を押して、使いたい写真を選ぶ
- その下の「背景画像を全て表示する」にチェックを入れる
- 「変更をまとめて保存」を押す
- 自分のブログを開いて、写真が全部出ているか確かめる
4の「センターロゴ」は、4種類あります。
名前が「センターロゴ」で始まるものなら、どれでも大丈夫です。
たとえば「センターロゴ（デフォルト）」や「センターロゴ（トップメニュー）」ですね。
私のスケートボードのブログは「センターロゴ（トップメニュー）」でした。
このチェックで、ヘッダーの形が写真の縦横に合います。
見本では、元の写真がはしまで全部出ました。
スケートボードのブログで、本当にやってみた
見本だけでは心配です。
なので、私のスケートボードのブログでも試しました。
ロゴは文字を画像にしたもの、写真はシドニーで買った板です。
写真の板が、はしまで出ています。
ロゴも、写真の真ん中にのりました。
ただし、効くのは「センターロゴ」のときだけです。
「トップメニュー」で始まる形では効きません。
私のブログは、センターロゴでした。
実際に試したら、写真はチェック1つで全部出ました。
スマホだけロゴが出ないときは「モバイル」タブ
試していて、もう1つ見つけたことがあります。
パソコンでは出ているロゴが、スマホだと消えていました。
左がスマホで見たところです。
写真の上の大きなロゴが、消えています。
上の細い帯に、小さく出るだけでした。
原因は「ヘッダー」タブではなく、「モバイル」タブ。
この仕組みも、Cocoon公式のプログラムで確かめました。
| 項目 | 中身 |
|---|---|
| 場所 | Cocoon 設定 →「モバイル」タブ |
| 項目 | 「常にサイトヘッダーロゴを表示する」 |
| 効くとき | 「モバイルメニュー」が「ヘッダーモバイルボタン」か「ヘッダー・フッターモバイルボタン」 |
| オフだと | 画面の幅が1023px以下で、ヘッダーのロゴが消える |
はじめはオンになっている項目です。
私のスケートボードのブログは、これがオフでした。
ぽぽスマホで見て、ヘッダーが変なのは気づいていました。でも「まーしょうがない、いつの日か直そう」って思ってたんですよね。
直し方は、この順番です。
- 「Cocoon 設定」→「モバイル」タブを押す
- 「常にサイトヘッダーロゴを表示する」にチェックを入れる
- 「変更をまとめて保存」を押す
- スマホで自分のブログを開いて、ロゴが出ているか確かめる
チェックを入れたら、右のようにロゴが出ました。
こちらも、チェック1つで済みました。
ぽぽ記事のために試したあと、スケートボードのブログは元の文字のロゴに戻しています。
SWELLにした犬のブログは、画像のロゴ
犬のブログは、いまSWELLで書いています。
こちらのロゴは画像です。
では、同じことをCocoonとSWELLでやると、どう違うのか。
SWELLの公式マニュアルと、私の犬のブログで確かめた範囲です。
| やりたいこと | Cocoonだと | SWELLだと |
|---|---|---|
| 設定する場所 | Cocoon 設定 →「ヘッダー」タブ | 外観 → カスタマイズ →「ヘッダー」 |
| ロゴの大きさ | 幅と高さを数字で入れる | 高さを数字で入れる（パソコン・スマホ・スクロールしたときで別々） |
| スマホの形 | 高さ（モバイル）を変える | ロゴとメニューの並びを3種類から選ぶ |
| 写真を大きく見せる | ヘッダー背景画像（全部出すのはセンターロゴのときだけ） | ヘッダーの下の「メインビジュアル」に出す |
| 色 | ヘッダー全体色・ヘッダー色（ロゴ部）・スキン | ヘッダーの背景色・文字色 |
SWELLのよいところは2つ
私の犬のブログで、実物を見てみます。
① 写真を、画面いっぱいに出せる
- ヘッダーの下の「メインビジュアル」に出す
- 写真の上に、文字とボタンも重ねられる
② スマホの見た目を、別に決められる
- ロゴとメニューの並びを、3種類から選ぶ
- ロゴの高さも、スマホ用に決められる
ただ、SWELLは有料のテーマです。
Cocoonでも、ヘッダーは設定でかなりできます。
まずはCocoonの「ヘッダー」タブを試す。
それでも足りなければ、SWELLを見る。
この順番でいいと思います。
CocoonとSWELLのほかの違いは、こちらにまとめています。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ
- Cocoonのヘッダーは「Cocoon 設定」→「ヘッダー」タブで変える
- 画像が切れるときは「背景画像を全て表示する」にチェックして「変更をまとめて保存」（センターロゴのときだけ）
- ロゴの大きさは「ロゴの幅・高さ」に数字を入れる。大きい画像のままだと、はみ出す
- 高さは「高さ」、スマホは「高さ（モバイル）」が別にある
- スマホだけロゴが出ないときは「モバイル」タブの「常にサイトヘッダーロゴを表示する」にチェック
- 色は「ヘッダー全体色」。スキンを使っているなら「ヘッダー色（ロゴ部）」も変える
- ピンクの色は、私の場合スキンだった
- SWELLなら、写真はメインビジュアルに大きく出せて、スマホの並び方も別に選べる
Cocoonでも、ヘッダーはチェック1つで直せました。
でも私は、項目があることすら知りませんでした。
「いつの日か直そう」と思ったまま、ずっと文字のロゴです😇
まずは「ヘッダー」タブを、一度開いてみてくださいね。
「いつか直そう」が、ほかにもたまっている人へ。
私がCocoonからSWELLに変えて、何が変わったか。
記事が崩れた3ヶ月の話も、正直に書いています。
コメント