まだ先方から店舗写真を受取っていないので、出来る範囲で進めていきます。
今回は「ヘッダーの作成」と「配色」について。
といっても、前回までにカスタムメニューは終わってるので、画像を編集しただけ。
店舗ロゴは業者さんに作ってもらってたらしいので、それだけ先に送ってもらいました。
（ゆくゆくは完成したサイトを公開するつもりなので、ここで画像も公開します。）
ロゴから店舗をイメージするに、ポップで明るい雰囲気なんでしょうね。
フォントも堅苦しくならないように、変更の必要もあるかもしれません。
そこはクライアントとよく話し合ってみたいと思います。
ヘッダー作成
まずは、実際に作ってみたヘッダー部分です。
とりあえずこんな感じになりました。
以下、５つに分けてます。
► ｈ１
このテーマでは、青帯の部分がサイトのｈ１です。
なので、ここに重要な文言を記述してます。
ここは管理画面の「設定」で記述します。
レスポンシブのスマホサイズなんかを考えると、長くなりすぎはNGです。
► utility
ここはカスタムメニューで作成したutilityが表示されます。
デザインのくずれが起こる可能性もあるので、３つの設定が推奨です。
また、このutilityはタブレット以下の端末では表示されないので注意。
► 店舗ロゴ
準備した店舗ロゴを、「logo.png」というファイル名で/imagesフォルダに入れると反映されます。
ffftpなどを利用すると便利です。
デフォルトでは、サンプルで作成したlogo.pngが入ってるので、削除するか、上書きしてご利用下さい。
► 電話番号の画像
この画像部分も、ロゴと同じです。
準備した画像を「h-tel.png」というファイル名で、imagesフォルダに上書き保存して下さい。
► ｈ２
ヘッダーの真ん中の部分ですね。
ここは何かに使えるかもしれないと思って、短い文章を入れれるようにしてます。
サイトのｈ２なので、アピールしたい文言や、ロゴの補足などが良いと思います。
設定は【テーマ編集】 ⇒ 【header.php】で。
赤枠の３つめ。
ここの＜ｈ２＞～＜／ｈ２＞の間に記入して下さい。
デザインの関係上、長くなり過ぎないようにしてください。
色の変更
今回は色の変更も少しやりました。
変更はstyle.cssからやります。
可能な限り変更しやすくするために、前半部分に「配色カスタマイズ」を用意してます。
これは、サイト全体の「色設定のみ」を集めたものです。
サイトの各場所の色を変更する時はここで行なって下さい。
基本的にそれ以外はさわらないように。