ヘッダーのカスタマイズ

Cocoonのテーマでヘッダーのカスタマイズ

Cocoonのテーマでは、下の画像の赤枠の「管理メニュー」をクリックした後、Cocoon設定をクリックします。
 

 

ヘッダーの画像を変える

「ヘッダー」のタグをクリック。

ヘッダーの背景画像となる画像を選びます。画像は、自分でアップロードして、「メディア」に入れるか事前にアップロードされていた画像を使います。もしくは、画像がなければ、画像なしで背景の色だけ指定して行う方法もあります。今回は以下のような画像を選びました。

「グローバルナビ」を設定

「グローバルナビ」ってどこ？という疑問を持つ人はいませんか。私もその一人でした。ヘッダーの画像と、本文との間にある、細長い帯に書かれている固定ページを紹介するところです。私のサイトなら、「Front Page」「ブログ」「お問い合わせ」「太陽治療院」「privvacy policy」の所です。

ヘッダーの文字の色を赤に設定

すると、こんな感じになりました。

グローバルナビの色を変えると、「お問い合わせ」などの部分の文字色が変わります。また、ヘッダーの文字色を変えると、画像のように、「すーさんのブログ」の部分が赤色になりました。赤色を黒色に変えることもできます。

ヘッダー直下、本文一番上にアイキャッチ画像を大きく表示

「ヘッダー画像を固定ページごとに変えたい」と思いました。検索ワードは、「固定ページのヘッダー画像の変更」です。すると、固定ページごとに画像を変える方法がいろいろ出てきたのですが、ｐｈｐファイルを操作するなど、どこにそのファイルがあるのかも、どこをいじればいいのかも分かりません。

いろいろ他の簡単な方法がないかと探していると、見つけました。テーマによっては、「ブログ投稿・固定ページで「アイキャッチ画像」を指定するとその投稿やページを個別表示している際に画像がヘッダーとして表示されます。」という紹介をしているサイトを見つけました。

それで私が試した方法が以下です。

①ダッシュボードで固定ページを選択し、「固定ページ一覧」をクリック

②固定ページの中から、編集したいページにチェックをいれて、編集をクリック

③編集したいページの編集画面が出ると、その右側に「アイキャッチ画像」とあるので、アイキャッチ画像を設定をクリックすると、アップロードした画像がメディアライブラリにあれば（なければアップロードする）、それをクリック。

④公開する。

この方法は、固定ページに限らず、今投稿しようとしてブログの編集画面にも、「アイキャッチ画像」とあるので、同様にすれば、この投稿ブログのようになります。

やってみて、テーマによって、アイキャッチ画像の全体が表示できないものがあることがわかりました。

※追記

どのテーマを使うかによって状況が異なるようです。

実際にやってみると、ヘッダーではなくて、ヘッダー下の本文の一番上に大きくアイキャッチ画像が表示されていました。