スポンサーリンク

コクーン(Cocoon)ワードプレスのヘッダーにロゴを入れるには?ヘッダー画像、背景画像もついでに設定しよう!

ブログ関連ノウハウ

ヘッダー画像を変えたら、ブログのタイトル文字が目立たなくなって困ってませんか?

その解決法は、ロゴ画像を入れることです。

タイトル文字がくるあたりは無地になるよう設定しないと、背景の画像に埋もれて文字が目立たなくなってしまいますよね。ということは、背景画像に適したものしか、選べなくなってしまいます。

でも、ロゴさえ入れておけば、ヘッダー背景画像を変えただけで、雰囲気がガラッと変えられます。

こちらはもう1つのブログのヘッダーですが、ブルー系の画像だと、また雰囲気が変わりますよね。

このように、ロゴを設定しておくだけで、ヘッダー背景画像の選択の幅が広がります。

このやり方をご紹介しますね。

スポンサーリンク

Cocoonのヘッダーにロゴを入れる方法

こんな風に、ヘッダーの中央にロゴを入れる方法です。

スマホで見ると、こうなります。

めっちゃカンタンなので、ぜひ挑戦して下さい。ついでに、

  • ヘッダー背景画像を入れる方法
  • ヘッダー画像の高さを変える方法
  • 本文の背景に画像を入れる方法

も、後半でご紹介します。

準備
ロゴを作り、画像フォルダに入れておきましょう。ロゴは、画像に文字入れができるアプリで、簡単に作れます。スマホでもパソコンでもできます。ロゴの作り方については、別記事で紹介します。

私のヘッダー画像の幅は、1920pxで作っています。

1240pxぐらいあれば、画質は乱れないと言われていますが、あまり小さくならないよう、お好みで編集してみて下さい。

ロゴを入れる方法:Cocoonのヘッダー編集

まず、ブログの編集モードから、コクーン設定を2回押し、

ヘッダーのタブを押す。

ヘッダーロゴの横にある、選択を押し、

すでに画像フォルダに入れた、ロゴ用の画像を選択します。

すると、こうなります。

ロゴは自動で、ヘッダーの真ん中に表示されます。

ヘッダー画像を入れる:Cocoonのヘッダー編集方法

ヘッダー背景画像を入れるには、Cocoon設定を2回押した後、「ヘッダー背景画像」の横の選択を押して、画像フォルダの中から選びます。

私の場合は、このオレンジの花柄がそれに当たります。

ヘッダー用画像は、あらかじめ画像フォルダに入れておくと作業がスムーズです。

♥無料画像はここでゲット!

無料会員だと1日に5枚までしか検索できないので、有料版の方が断然使いやすいです。

ロゴ作りでも使うサイトなので、今すぐこちらから有料会員に登録しておきましょう。
↓ ↓ ↓ ↓ ↓ ↓ ↓
無料イラスト素材【イラストAC】

上の黄色い画像を押して登録すると、写真もイラストも両方ダウンロードできますよ。

有料会員になると、1日に何枚でもダウンロードできるようになります。

ヘッダー画像の高さを変える:Cocoonのヘッダー編集方法

ヘッダーの高さ(幅)を調整するには、ここの数値を変えればOK。

私は、すぐに本文が見えるよう、200pxにしてます。

本文の背景に画像を入れる:Cocoonの編集方法

本文の背景画像を入れるには、Cocoon設定を2回押した後、「サイト背景画像」の横の選択を押して、画像フォルダの中から選びます。

私の場合は、このゴールドのきらきら画像がそれに当たります。

まとめ:Cocoonのヘッダーにロゴを入れる方法

コクーン(Cocoon)ワードプレスのヘッダーにロゴを入れる方法と、

  • ヘッダー画像を入れる方法
  • ヘッダー画像の高さを変える方法
  • 本文の背景に画像を入れる方法

もご紹介しました。いかがでしたか?けっこうカンタンにできるので、練習してみて下さいね。

ロゴ画像は小さな画像でOKなので、スマホで作ったものを使ってもいいですよ。

ロゴ画像の作り方も別記事でご紹介します。

才能覚醒プログラムに参加しているメンバーは、ヘッダー画像の入れ方や、デザインの相談、質問ができます。より魅力的なサイトにして、ターゲットが喰いつくサイトに、あなたが気持ちよく使えるようサイトに設定しましょう。

コメント

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