PR

【Cocoon】〈初心者〉ヘッダーの設定(見た目調整)

Cocoon
スポンサーリンク

ヘッダーの見た目を調整します。

無料テーマであって、特にデザインスキルも無いので、見た目で目を引けるようなものはできません(いずれ何とかしたいと思っている)が、できるだけ自分の望むイメージに近いものが表示される方がテンションがあがります。

という初歩的な所の設定です。

ここでは下図の「ヘッダー」と「グローバルナビメニュー」の色とサイズを設定します。

両方とも「ヘッダー」の設定で一連で作業できますが、いじる場所を明確にするために項目を分けておきます。

ヘッダーのサイズ設定

「ダッシュボード」から「Cocoon設定」を開きます。

「ヘッダー」を選択します。

プレビューでいきなりヘッダーの背景色が白くなってしまいます。

慣れていないとちょっと驚きますが、設定自体を変更しない限り変わりませんのでここでは無視します。

ヘッダーレイアウト

ヘッダーレイアウトの設定をします。

ここで選択を変えてもプレビューは変わってくれません。

(何か設定があるのかはわかりませんが・・・)

なので面倒ですがいちいち「設定を保存」して実際の画面を確認しないといけませんね。

センターロゴ(トップメニュー)
センターロゴ(スリムメニュー)
センターロゴ(スリムトップメニュー)
トップメニュー(右寄せ)
トップメニュー
トプメニュー 小
トップメニュー 小(右寄せ)

ということで、とりあえず各レイアウトを並べてみました。

トップメニューの場合は、この後で設定しますが、グローバルナビメニューの背景をヘッダーと同じ色にするか透過にした方が良いのかなという見栄えになりました。

「こんな配色だから」ということもあるかも知れませんので、実際にお試しください。

ヘッダーの固定

ヘッダーの固定という項目は文字通り、スクロールしてもヘッダーが画面に残る設定です。

ここは動くか動かないかだけなので説明はしません。BeCanDoでは固定はしていません。

高さ

ヘッダーの高さを設定します。何かというと”タイトル部分の帯の幅”です。

「未入力でデフォルトになります」ということなのですが、デフォルトがどれだけかわかりません。

なのでまたサンプルを作ってみます。

高さの数字を変更するとプレビューの画面高さが変わりましたが、実画面の比較の方がイメージ付きやすいので並べました。

高さ 最大800px
半分の 400px
200px
最小 0px
デフォルト

ヘッダーの文字

大枠が決まったら次は肝心な文字の設定です。

ヘッダーロゴ

ヘッダーロゴの設定です。

これは表示したいロゴを作成して画像データとして登録しておく必要があります。

サンプル用としてこんなロゴを作っておきました。

「ヘッダーロゴ」の「選択」をクリックすると

「メディアライブラリー」に移動しますので、作ってあったロゴを選択します。

この際、別の場所にロゴが格納されていて、「ファイルをアップロード」の方から選択しても同じです。

「変更をまとめて保存」してサイトを表示させたらこうなります。

ロゴを作成した時に背景処理をしなかったのでこうなってしまいました。

ヘッダーロゴサイズ

ヘッダーロゴのサイズを調整します。

元のロゴの大きさにもよりますが、デフォルトでこんなになりました。

このサイトは最大幅800pxだったと思うので半分の400を幅のところに入力します。

高さは幅に追従して自動的に変更されますので、特にバランスを独自で変えたいという以外はあまり気にしなくて大丈夫です。

キャッチフレーズの配置

キャッチフレーズとはこのサイトだと「BeCanDo」の下に小さく書いてある「びかんどう」のことです。

セットアップの指南によっては「キャッチフレーズは入れない方が良い」と説明されていますので、その場合はここは不要です。入力されていなければ表示しませんのでね。

気になるようなら「表示しない」にすれば良いと思います。

このサイト「BeCanDo」では見ての通りタイトルの下に付けてあります。

ちょっと余談ですが、

いわゆる「キャッチフレーズ」は「社名」の前なのか後なのか?という観点で上か下か要らないかを選択するだけです。

例を挙げると

 「HITACHI Inspire the Next」が記憶に残っているキャッチフレーズが社名の後のものですね。

 意図があるのかはわかりませんが日本企業のCMの多くは

 「水と生きる SUNTORY」

 「Fun to Drive TOYOTA」 (ちょっと古いですが)

とかキャッチフレーズが前ですね。

このサイト「BeCanDo」ではそういうキャッチフレーズは無くて、今のところは単純に”読み方”を書いているだけですが、いずれにしてもサブタイトル的な意味合いでメインタイトルの下に配置しています。

背景・色の設定

文字、タイトルもそうですが、背景のカラーや写真・画像が自分らしさを演出するツールです。

背景の設定をしていきます。

ヘッダー背景画像設定

ヘッダーの背景画像の設定をします。

「ヘッダー背景画像」のところの「選択」をクリックすると「メディアライブラリー」に移動します。

画像を選択すると選択された画像が表示されます。

「変更を保存」すると、このようにプレビューに表示されます。

見ての通り、正方形の画像を取り込みましたが、ヘッダーの幅が小さいので勝手にカットされます。

実際に使う時は事前にトリミングをしておく必要がありますが、それはまた別に説明します。

ここで、タイトル文字が見えなくなっていますが、よく見ると「黒い文字」で表示されているのがわかります。

これもサイトを表示すると元の指定色で表示されますので気にしないで大丈夫です。

ヘッダー全体色の設定

ヘッダー全体色の設定をします。

ここでは背景を緑、文字を赤に設定しましたが

このようになり、背景色はスキンで選択した色が優先されるようです。

文字は白抜き設定だったので文字だけ赤く変わりました。

ヘッダー色の設定の方で指定をすると

全体の色が変わります。

ヘッダーの色は「全体」の設定をすると「スキン」の設定が優先され、

「ロゴ部」「グローバルメニュー」の設定をすると設定が反映されます。

グローバルナビメニュー

グローバルナビメニューの設定ですが、操作はこれまでと同じです。

前項の、スキンが優先されるのかヘッダーの設定が優先されるのか、ということがわかっていれば悩むこともありません。

なのでここでは文字の表示に関する設定だけです。

グローバルナビメニュー幅の設定

グローバルナビメニューの文字間隔を設定します。

数字を入れてメニューの文字の間隔を設定します。

デフォルトは”176”で最小は”100”、最大は”300”です。

等間隔にこだわらなければ「テキストに合わせる」設定もあります。

最小値:100のとき
最大値:300のとき
テキストに合わせたとき

設定した結果が枠からはみ出る場合は2行になります。

まとめ

以上でヘッダーの設定は終わりです。

グローバルナビメニューの表示内容は「メニュー」のところで設定します。

マニュアルなどを見ながら設定すると、難しいことではないのでさらっとできるのですが、苦労しないで済んでしまったものほど再設定や設定変更をするとなると「あれ?どうだっけ?」となるものです。

後半の項目は、操作自体は前半と同じなので説明が簡単になってしまったかもしれませんが、ここに書かれたことだけで一通り色や表示を変えることはできるはずです。

ブログ全体の「アイキャッチ」でもありますし、自分の思うようなヘッダーができればそれだけでも気持ちの入り方が変わるはずです。

ブログは記事を書くのが前提ですが、気持ちよく記事を書くためと、せっかく書いた記事を見てもらいやすくなるよう、カッコいいブログにしてみましょう!

BeCanDoのヘッダーのセンスは・・・そっとしといてください。

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