当ブログは広告が含まれています

【Cocoon】ヘッダーロゴの設定方法

Cocoon ヘッダーロゴの設定方法 Cocoon

こんにちは、ikuzo(いくぞう)です。

今回はWordPressのテーマ「Cocoon」でのヘッダーロゴの設定方法を紹介します。

ちなみにブログのロゴの作り方は、こちらの記事を参考にして下さい。

スポンサーリンク

ヘッダーロゴがないとタイトルがそのまま表示される

Cocoonで「ヘッダーロゴ」を設定していないと、サイトのタイトルがそのまま表示されます。

ヘッダーロゴなし(サイトのタイトルがそのまま表示)

サイトのタイトルとは、WordPressの「一般設定」で入力したものです。

WordPressの「サイトのタイトル」

ヘッダーロゴを設定すると、たとえばこんな感じになります。

ヘッダーロゴあり

スポンサーリンク

Cocoonのヘッダーロゴ設定方法

それでは、Cocoonのヘッダーロゴの設定方法を説明します。

Cocoon設定」をクリックします。

Cocoon設定

次に「ヘッダー」タブを押します。

「ヘッダー」タブを押す

以下、「ヘッダー設定」の内容をひとつずつ説明します。

ヘッダー&ロゴ設定①

ヘッダー及びヘッダーロゴの設定①

ヘッダーレイアウト

ここは、ロゴの位置メニューの位置と太さを選びます。

Cocoonのヘッダーレイアウトは全部で8種類あります。

レイアウトの中から1つ選んで「変更をまとめて保存」を押すと、どんなレイアウトなのかプレビューで確認ができます。

一通り試して、気に入ったものを選びましょう。

なお、Cocoonのトップメニューは作らないとありません

グローバルナビメニューの作り方↓

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ

 

ヘッダーの固定

ヘッダーを追従させるか(画面に出たままにするか)どうかです。

こちらはPCのみの設定です。モバイルの設定はこちらの記事をご覧ください。

【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ

 

高さ

必要があればヘッダーの高さを指定します。

ヘッダーロゴ

ここでロゴを設定します

ヘッダーロゴの「選択」を押して、

ヘッダーロゴの「選択」を押す

ロゴをドロップ、

ロゴをドロップ

代替テキストに「ブログのロゴ」などと入力して「画像の選択」を押します。

代替テキストに「ブログのロゴ」などと入力して「画像の選択」を押す

これでヘッダーにロゴが表示されているはずです。

スポンサーリンク

ヘッダー&ロゴ設定②

ヘッダー及びヘッダーロゴの設定②

ヘッダーロゴサイズ

表示させるロゴの大きさを、ここで指定します。

「幅」か「高さ」のどちらかを決めれば、もう片方は比率を保持して表示されます。

ヘッダー背景画像

ヘッダーの背景に写真などの画像を使う場合は、ここで設定します。

ヘッダー全体色など

ヘッダーやグローバルナビメニューの色を指定します。

何も指定しなければ背景は「キーカラー」が表示されるようです。

スポンサーリンク

最後に

今回は、Cocoonのヘッダーロゴの設定方法を紹介しました。

「これからロゴを作る」という方は、こちらの記事を参考にして下さい。

 

本日は最後まで読んでいただき、ありがとうございました(^_^)

Cocoon
スポンサーリンク
ikuzoblog

コメント