ワードプレス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設定の中のヘッダー設定で、ヘッダーのロゴ画像と背景画像の設定例を解説してみました。

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

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

ままん
ままん

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

これからワードプレスでブログを始めるかたはこちらのレンタルサーバーが初心者向きでオススメです。

初心者でも安心の24時間365日メールサポート
私も安心してサポートしていただいているレンタルサーバーです
10日間の無料お試し期間があるので、ドメイン設定からワードプレスのインストール、ブログの開設を安心して始められます。
エックスサーバー

 

コメント

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