ヘッダー画像を変えたら、ブログのタイトル文字が目立たなくなって困ってませんか？
その解決法は、ロゴ画像を入れることです。
タイトル文字がくるあたりは無地になるよう設定しないと、背景の画像に埋もれて文字が目立たなくなってしまいますよね。ということは、背景画像に適したものしか、選べなくなってしまいます。
でも、ロゴさえ入れておけば、ヘッダー背景画像を変えただけで、雰囲気がガラッと変えられます。
こちらはもう１つのブログのヘッダーですが、ブルー系の画像だと、また雰囲気が変わりますよね。
このように、ロゴを設定しておくだけで、ヘッダー背景画像の選択の幅が広がります。
このやり方をご紹介しますね。
Cocoonのヘッダーにロゴを入れる方法
こんな風に、ヘッダーの中央にロゴを入れる方法です。
スマホで見ると、こうなります。
めっちゃカンタンなので、ぜひ挑戦して下さい。ついでに、
- ヘッダー背景画像を入れる方法
- ヘッダー画像の高さを変える方法
- 本文の背景に画像を入れる方法
も、後半でご紹介します。
私のヘッダー画像の幅は、1920pxで作っています。
ロゴを入れる方法：Cocoonのヘッダー編集
まず、ブログの編集モードから、コクーン設定を２回押し、
ヘッダーのタブを押す。
ヘッダーロゴの横にある、選択を押し、
すでに画像フォルダに入れた、ロゴ用の画像を選択します。
すると、こうなります。
ヘッダー画像を入れる：Cocoonのヘッダー編集方法
ヘッダー背景画像を入れるには、Cocoon設定を２回押した後、「ヘッダー背景画像」の横の選択を押して、画像フォルダの中から選びます。
私の場合は、このオレンジの花柄がそれに当たります。
ヘッダー用画像は、あらかじめ画像フォルダに入れておくと作業がスムーズです。
♥無料画像はここでゲット！
無料会員だと１日に５枚までしか検索できないので、有料版の方が断然使いやすいです。
ロゴ作りでも使うサイトなので、今すぐこちらから有料会員に登録しておきましょう。
↓ ↓ ↓ ↓ ↓ ↓ ↓
上の黄色い画像を押して登録すると、写真もイラストも両方ダウンロードできますよ。
有料会員になると、１日に何枚でもダウンロードできるようになります。
ヘッダー画像の高さを変える：Cocoonのヘッダー編集方法
ヘッダーの高さ（幅）を調整するには、ここの数値を変えればOK。
私は、すぐに本文が見えるよう、200pxにしてます。
本文の背景に画像を入れる：Cocoonの編集方法
本文の背景画像を入れるには、Cocoon設定を２回押した後、「サイト背景画像」の横の選択を押して、画像フォルダの中から選びます。
私の場合は、このゴールドのきらきら画像がそれに当たります。
まとめ：Cocoonのヘッダーにロゴを入れる方法
コクーン（Cocoon）ワードプレスのヘッダーにロゴを入れる方法と、
- ヘッダー画像を入れる方法
- ヘッダー画像の高さを変える方法
- 本文の背景に画像を入れる方法
もご紹介しました。いかがでしたか？けっこうカンタンにできるので、練習してみて下さいね。
ロゴ画像は小さな画像でOKなので、スマホで作ったものを使ってもいいですよ。
ロゴ画像の作り方も別記事でご紹介します。
コメント