テーマCocoonのヘッダーロゴと背景

Cocoonヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:未指定、ロゴ画像:640 x 240 ピクセル、ロゴサイズ:未指定、背景の画像サイズ:480 x 270 ピクセル wordpressでブログを作ろう
Cocoonヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:未指定、ロゴ画像:640 x 240 ピクセル、ロゴサイズ:未指定、背景の画像サイズ:480 x 270 ピクセル

 Cocoonのヘッダーロゴと背景画像の関係がどうもピンと来なくって悪戦苦闘した。

 思った通りのヘッダーにならない。

 で、ようやくある程度納得がいったので経過をメモしておこうと思う。

広告

背景画像だけだとサイトタイトルが見えずらい

 Kのもう一つのサイト、「フリーソフト&無料サービス」ヘッダーだが、あまり派手な色を使いたくなかったので、背景をグレートーンにした。

 文字の色を明るい色にすればよいのだろうが、それもあまり雰囲気に合わない。

ロゴを設定すれば?

 ロゴにサイト名や説明をいれてしまうと、まあ、よい感じになるのだが、背景を変えたくなった時に面倒だ。

ロゴを透過にしよう

 最終的には、背景とは別にロゴをロゴを透過で作って、別々に設定してやっとなんとなくしっくり来た。

ロゴも背景も幅より高さの設定を

 Cocoonの場合、ロゴやヘッダー画像は高ささえ指定すれば、背景の幅はPCの解像度に合わせて自動的に伸縮する。

 なので、幅の設定は2の次。

 まずは、高さの設定をして、どうしても気になるなら幅の設定をする方が面倒がない。

ヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:100、ロゴ画像:640 x 240 ピクセル、ロゴサイズ:300×60、背景の画像サイズ:480 x 270 ピクセルで設定したのが下の画像。

ヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:100、ロゴサイズ:300×60、背景の画像サイズ:480 x 270 ピクセルで設定

ヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:100、ロゴサイズ:300×60、背景の画像サイズ:480 x 270 ピクセルで設定

ヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:未指定、ロゴ画像:640 x 240 ピクセル、ロゴサイズ:未指定、背景の画像サイズ:480 x 270 ピクセルで設定したのがこちらの画像。

ヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:未指定、ロゴ画像:640 x 240 ピクセル、ロゴサイズ:未指定、背景の画像サイズ:480 x 270 ピクセル

ヘッダーレイアウト:センターロゴ(デフォルト)、ヘッダーの高さ:未指定、ロゴ画像:640 x 240 ピクセル、ロゴサイズ:未指定、背景の画像サイズ:480 x 270 ピクセル

 上下左右をバランスよく、切り取っている感じ。

 こっちのサイトはどういうヘッダーにしようかな。

 考え中。

 

K
K

ちなみに、ロゴ画像の文字も間違ってる。

 こちらも修正しないといけない。

 まあ、中身には影響しないのでこのまま、いったん公開するよ

 

 

コメント

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