ヘッダーを自由な画像やロゴでカスタマイズしたい
キャッチフレーズを設定したい
例えば、カスタマイズをすると、ヘッダーを以下のように変更することができます。
本記事ではCocoonでヘッダーの背景やヘッダーロゴをカスタマイズする方法や、キャッチフレーズを設定する方法について解説します。
現状のヘッダーにピンと来ていない方は参考にしてみてください。
・Cocoonヘッダーの背景画像の追加方法
・Cocoonヘッダーロゴの追加方法
・Cocoonヘッダーのキャッチフレーズ追加方法
Cocoonのヘッダー画像の設定方法
まず、ヘッダーの背景画像の設定方法を紹介していきます。
ヘッダーの背景画像は、Cocoon設定⇨ヘッダーから追加できます。
下にスクロールして行くと、ヘッダー背景画像という項目があるので、左側の選択を押します。
選択をクリックするとこのような画面が出てくるので、背景にしたい画像をアップロードします。
ファイルをアップロードしたら、メディアライブラリからその画像を選択し、左下の画像を選択をクリックします。
選択し終わると以下のような表示が出るので、一番下までスクロールし、変更をまとめて保存をクリックしてください。
これで背景画像の追加は完了です。
左上のホームボタンからプレビューしてみましょう。
また、モバイル端末ではこのように表示されます。
ヘッダー高さの変更方法
次に、ヘッダーの高さの変更方法を解説します。
変更を行わないとデフォルト値での表示(上の画像)になります。
高さの変更もCocoon設定⇨ヘッダーから設定します。高さの項目を入力してください。
PC用表示の最大値が800、モバイル端末用の最大値が600ですが、今回は半分の400と300に変更してみましょう。
変更を保存を押し、プレビューしてみます。
PC用表示の400はこのようになり、かなり大きめの印象ですね。
デフォルトの値は100前後くらいのサイズではないかと思われます。
また、モバイル用300での表示は以下のようになります。
こちらも最大値の半分ですが、画面の半分以上を締めるくらいの大きさになります。
特にモバイルだと機種によって画面サイズが様々ですので、どのくらいの画面サイズを基準にするのかは決めておくといいでしょう。
Cocoonのヘッダーロゴの設定方法
ヘッダーロゴの文字色の設定
ヘッダーの文字が背景と被って見にくい場合、文字色を変更することができます。
Cocoon設定⇨ヘッダーで変更します。
下にスクロールし、ヘッダー色(ロゴ部)のロゴ文字色を選択することで変更できます。
先ほどまで黒だったのを、白に変更してみます。
変更をまとめて保存を押し、右上のホームボタンからプレビューすると、このようにサンプルの文字が白になっているのが分かります。
ヘッダーロゴに画像を設定
次に、ヘッダーにロゴを画像に変更する場合の方法を紹介します。
今回はこの画像を使用します。jpg、jpeg、png形式のファイルが使用できます。
画像ファイルをアップロードし、画像を選択をクリックします。
選択し終わるとこのように表示されます。
下のヘッダーロゴサイズを設定せずに、変更をまとめて保存をクリックしてみます。
プレビューすると以下のようになります。
ロゴ部分が大きいと感じたら、先ほどの画面に戻って設定します。
以下の画面に戻ったら、ヘッダーロゴサイズの値を入力します。
幅か高さのどちらかを入力すればそれに合わせて表示されます。
幅を300にしてプレビューするとこのようになりました。
文字の部分のみを表示する方法(背景透過)
png形式(背景透過)の画像を使うと、周りの白い部分を無くして、文字だけを表示できます。
今回はこの画像を使用します。
上の方法と同様に、ヘッダーロゴの選択からファイルを選択します。
プレビュー画面で見るとこのように文字の周りが背景画像になっています。
ロゴ画像のところに背景が入るのが嫌という方はPNG形式の画像を利用するようにして下さい。
キャッチフレーズの設定方法
続いて、キャッチフレーズの設定方法を解説していきます。
キャッチフレーズを設定すると、サイトの簡単な説明をヘッダーに表示することができます。
キャッチフレーズの表示方法
まずはキャッチフレーズの表示方法を説明します。
キャッチフレーズは、設定⇨一般から設定できます。
このような画面に切り替わったら、キャッチフレーズの欄にサイトの概要を入力し、変更を保存をクリックしてください。
プレビュー画面ではこのようにヘッダーの一部に表示されます。
これでキャッチフレーズが表示できるようになりました。
キャッチフレーズの非表示や位置の変更方法
次に、キャッチフレーズの表示非表示の選択や、位置の変更方法を説明します。
こちらは、ヘッダー背景画像のように、Cocoon設定⇨ヘッダーから変更します。
下にスクロールし、キャッチフレーズの配置で、表示しない、ヘッダーの上部に表示、ヘッダーの下部に表示の三つから選択できます。
ヘッダーボトムを選択すると、以下のような表示になります。
キャッチフレーズをうまく使うことで、タイトルよりも少し具体的にどんなサイトなのかを読者に知らせることができるので、うまく活用して下さい。
まとめ
今回はCocoonのヘッダーをカスタマイズする方法について解説しました。
Cocoonでは「Cocoon設定」からヘッダーの画像を登録したり、高さや幅を調整することができるので、初心者の方でも簡単におしゃれなヘッダーにすることができます。
もし、ヘッダーにロゴ画像を設定したい場合には、PNG形式の画像であれば背景透過ができるので、より一体感のあるヘッダーにすることができます。
キャッチフレーズも有効に使って、オリジナリティのあるヘッダーにしてみて下さい。