テーマの適用 その5 ヘッダー作成と配色の巻

テーマの適用 その5 ヘッダー作成と配色の巻

まだ先方から店舗写真を受取っていないので、出来る範囲で進めていきます。

今回は「ヘッダーの作成」と「配色」について。

といっても、前回までにカスタムメニューは終わってるので、画像を編集しただけ。

店舗ロゴは業者さんに作ってもらってたらしいので、それだけ先に送ってもらいました。
(ゆくゆくは完成したサイトを公開するつもりなので、ここで画像も公開します。)

ロゴから店舗をイメージするに、ポップで明るい雰囲気なんでしょうね。
フォントも堅苦しくならないように、変更の必要もあるかもしれません。

そこはクライアントとよく話し合ってみたいと思います。

ヘッダー作成

まずは、実際に作ってみたヘッダー部分です。

とりあえずこんな感じになりました。

以下、5つに分けてます。

► h1

このテーマでは、青帯の部分がサイトのh1です。
なので、ここに重要な文言を記述してます。

ここは管理画面の「設定」で記述します。

レスポンシブのスマホサイズなんかを考えると、長くなりすぎはNGです。

► utility

ここはカスタムメニューで作成したutilityが表示されます。
デザインのくずれが起こる可能性もあるので、3つの設定が推奨です。

また、このutilityはタブレット以下の端末では表示されないので注意。

► 店舗ロゴ

準備した店舗ロゴを、logo.png」というファイル名で/imagesフォルダに入れると反映されます。
ffftpなどを利用すると便利です。

デフォルトでは、サンプルで作成したlogo.pngが入ってるので、削除するか、上書きしてご利用下さい。

► 電話番号の画像

この画像部分も、ロゴと同じです。

準備した画像を「h-tel.png」というファイル名で、imagesフォルダに上書き保存して下さい。

► h2

ヘッダーの真ん中の部分ですね。

ここは何かに使えるかもしれないと思って、短い文章を入れれるようにしてます。
サイトのh2なので、アピールしたい文言や、ロゴの補足などが良いと思います。

設定は【テーマ編集】 ⇒ 【header.php】で。

赤枠の3つめ。
ここの<h2>~</h2>の間に記入して下さい。

デザインの関係上、長くなり過ぎないようにしてください。

色の変更

今回は色の変更も少しやりました。

変更はstyle.cssからやります。

可能な限り変更しやすくするために、前半部分に「配色カスタマイズ」を用意してます。
これは、サイト全体の「色設定のみ」を集めたものです。

サイトの各場所の色を変更する時はここで行なって下さい。
基本的にそれ以外はさわらないように。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください