ワードプレスCocoonのヘッダー設定とヘッダーロゴの設定を解説

Cocoon設定ヘッダーのロゴ画像と背景画像の設定の仕方 WordPress

ワードプレス無料テーマ コクーンのCocoon設定の中にある「ヘッダーレイアウト」の表示設定は、ワードプレス初心者でも簡単に設定できて便利です。

TOPページのイメージチェンジも、Cocoon設定内のプレビューで確認できるので、サイトの気分転換や季節ごとの雰囲気に合わせて完全オリジナルで自分のブログサイトを楽しむことが可能です。

今回はヘッダーの高さを変えてみた時の見え方、ヘッダーロゴ画像の設定の一例をプレビュー画面で紹介していきたいと思います。

ままん
ままん

綺麗な画像やセンスの良いイラストで飾られた個人ブログは魅力的で楽しいですね。(@takamaman52)

ヘッダーの構成と設定例

コクーン設定のヘッダー設定についての解説

※こちらの画像はヘッダーの高さやヘッダーロゴサイズをデフォルト(空欄)にしています。

ヘッダーは「ヘッダーロゴ」「キャッチフレーズ」「グローバルメニュー」で構成されています。

Cocoonのヘッダー設定のヘッダーの高さやロゴなどの大きさは、デフォルトで簡単に表示でき、またお好みで高さや配置を簡単に変更できます。

ヘッダーの高さを指定した場合の表示例

コクーンヘッダー設定 ヘッダーの高さ指定なし

ヘッダーレイアウト:センターロゴ(デフォルト)
高さ:指定なし(空欄)


コクーンのヘッダー設定 高さ50pxヘッダーレイアウト:センターロゴ(デフォルト)
高さ:50px


コクーン設定のヘッダーの高さの見え方

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

AREN
AREN

高さ指定の数値を大きくして、お気に入りの写真やイラストでブログのイメージを表現するのも素敵だと思います。

ワードプレス キャッチコピーの入力手順

ワードプレスの外観からカスタマイズしてキャッチコピーを入力する手順
ダッシュボードの「外観」を開き、順番にサイト基本情報の中にあるキャッチフレーズの入力部分へ進みます。

ダッシュボード>外観>カスタマイズ>サイト基本情報>キャッチフレーズ

入力したら「公開」をクリックします。この手順でキャッチフレーズの書き換えはいつでもできます。

ままん
ままん

ブログの記事数が増えるにつれ、キャッチコピーを書き換えたくなることもよくあるようです。書き換えるための手順を覚えておくと、心配なくブログを続けていくチカラになるかもしれません。

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

オリジナルロゴを作成し表示設定する仕方

画像作成ソフトでロゴ画像を作成します。今回は、一例として作成した画像サイズと設定例を紹介しています。

パソコンの画像編集ソフトなどを使い、簡単にオリジナルのヘッダーロゴを作ります。

AREN
AREN

画像編集ができるフリーソフトの「フォトスケープ PhotoScape」は、画像加工が初心者でも無料で簡単に使えて便利です。

「フォトスケープ」で検索し、ダウンロードするとすぐに利用できます。

ままん
ままん

サイトロゴ画像をCocoon設定内のヘッダーロゴに設定する前に用意しておくことから始まる下準備です。

サイトロゴ画像の作成手順

  1. 背景が不透明な設定の画像ファイルを新規作成
  2. ロゴとなるテキスト(文字)を入力。
  3. イラスト・写真などもお好みで挿入し、自作のヘッダーロゴを作りパソコン内に保存。

Cocoon設定 ヘッダーロゴ作成例

cocoon設定のヘッダー設定でヘッダーロゴ画像をアップロードする

Cocoon設定にヘッダータブ内にある「ヘッダーロゴ」から作った画像ファイルを選択してワードプレスのメディアフォルダにアップロードします。

ヘッダーロゴサイズは、お好みでサイズ指定できますが空欄でもOKです。

ヘッダーレイアウト:センターロゴ(デフォルト)高さ:空欄
ヘッダーロゴサイズ:幅:空欄×高さ:空欄

ヘッダー背景画像の作成と設定

Cocoonのヘッダーに背景画像を挿入する

ヘッダーに背景画像やイラストを使って、個性的なイメージにすることもできます。

例として今回はフォトスケープを使って簡単なグラデーションの画像を作って、これを背景画像に設定してみました。

まず、フォトスケープを開き画像を「新規」作成します。背景の不透明度を0%に設定すると、透明なファイルになります。

フォトスケープでヘッダーの背景画像を作成

 

透明の新規ファイルの右上にある「挿入」>「長方形」を選択します。

フォトスケープで背景画像を作成する

 

AREN
AREN

写真やデザインがお好きなかたは、じっくりとお好みのイラストを自作するのも楽しいと思います。

作成した背景画像を選択し、最後に忘れずに「設定を保存」すれば出来上がりです。

ヘッダー背景画像を選択し設定

まとめ

今回は、Cocoon設定の中のヘッダー設定で、ヘッダーのロゴ画像と背景画像の設定例を解説してみました。

ワードプレス ダッシュボードの外観にある「サイト基本情報」から、「サイトタイトル」と「キャッチコピー」をテキスト入力すれば、ヘッダーはテキストで作成されたヘッダーが表示されます。

さらにオリジナリティを表現!ということで、「ロゴ画像」とヘッダー背景画像」を作成し設定することで もう一歩、自分好みの雰囲気のあるサイトを作ることができます。

ままん
ままん

グローバルナビメニューの色と幅を簡単に設定できますので、全体のカラーバランスを考えて季節ごとに衣替えするように楽しむことも可能ですね。

これからワードプレスでブログを始めるかた、サイトのお引越しを検討中のかたはエックスサーバー が初心者向きでオススメです。

コメント

  1. ミレイ より:

    ちょうどコクーンでblogを開設したばかりなので非常に助かっています^^
    ちなみにサムネイル?アイキャッチのサイズはいくつに設定していますか?

  2. アバター画像 ままん より:

    コメント、ありがとうございます。
    アイキャッチ画像の設定でアップロードしているのは、私の場合は、横1280×縦720px で作っています。そして文中のH2の下に画像を置く場合は、この比率以外では横800×縦500〜600pxが多いです。
    ちなみに本家コクーンのアイキャッチ画像 800×600px のようです。
    アイキャッチ画像の設定をしない場合は、投稿文中の一番大きいサイズの画像がアイキャッチ画像となるそうなので、文中の画像はアイキャッチ画像より小さくなるように横幅を作ったほうが上手くいくようです。

  3. サムライ より:

    初めまして。
    私はまったくの初心者です。
    とても説明がわかりやすく助かっております。
    ありがとうございます。

    わからない点がありますので教えて頂けますか?

    キャッチフレーズ、ヘッダーロゴ、グローバルメニューなどヘッダーの高さ内にあるものは理解できました。
    その下に記事のタイトルがあり、本文が始まります。

    1.記事タイトルの高さは変えられますか?
    変えられる場合はどのように?

    2.現在本文で使用しております画像が記事タイトルの背景画像として表示されております。
    しかし設定した覚えはありません。
    この記事タイトルの背景画像を消す事は出来ますか?
    やり方を再三ググってみましたが未だ良くわかりません。

    疑問にぶつかる度に調べてばかりで中々先に進めません。

    何卒どうぞ宜しくお願い致します。

  4. アバター画像 ままん より:

    回答が遅くなってしまい、大変お待たせしました。
    もう解決できましたか?
    ご質問の内容
    1.記事タイトルの高さについて
    記事タイトルの高さとは、どんな風なイメージなのか想像がつきませんが、
    2.記事タイトルの背景画像?
    という問いを読んで、何となく想像したことでお答えしますね。

    『2.現在本文で使用しております画像が記事タイトルの背景画像として表示されております。
    しかし設定した覚えはありません。
    この記事タイトルの背景画像を消す事は出来ますか?』
    記事タイトルの直下の画像は、「アイキャッチ画像」と呼ばれいるもので、
    ブログの【投稿を編集】の時点で、アイキャッチ画像の設定をしていないと、
    記事内の一番初めの画像、または記事中の一番大きい画像がタイトル直下に表示されます。
    これは、そういう仕組みだということで覚えておいた方がいいですね。
    ですから、記事中に挿入した画像をタイトル下に表示させたくない場合は、
    【投稿を編集】の「アイキャッチ画像」のところに画像ファイルをアップロードさせておきます。
    アイキャッチ画像のファイルは、横800px以上の大きさだったと思うのですが…もうすこし小さなサイズ画像のサイトもあります。
    コクーン(本家)の記事中のアイキャッチ画像は確か、800×600pxが多かったように記憶しています。
    色々な、サイトのアイキャッチ画像の大きさを調べて自分の好みのバランスのいい大きさを見つけるのも良いかもしれません。
    ちなみに、私のブログのアイキャッチ画像のサイズは1280×720pxで作ってあります。
    この比率がブログカード等に縮小されたときや、youtubeのサムネイルに、綺麗かな?と判断したからだと記憶しています。
    本文中の画像が記事タイトルの直下の「アイキャッチ画像」として表示されて困るということを回避するなら、
    フリー画像などの感じの良い画像を使うのも楽しいですよ。
    無料でアイキャッチ画像
    https://pixabay.com/ja/
    私がよく見に行くフリー素材のサイトです。

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