[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。
別に忘れていた訳じゃないんですが、時間がありませんでした。
あと方向性も見出せずにいます。
ヘッダー要素から成形していくよ!
だいぶ迷走中ですが、まずはヘッダーをしっかりと作り上げてしまおうと思います。
どんな風にするか決まってませんが・・・。
とりあえず、サイト名とサブタイトルを入れました。
これだけでもぐっとサイトっぽくなるね!(嘘)
ここから、背景色を変更したり、メニューをflexboxに変更したりでこうなりました。
割とそれっぽくなってきたかな?
フッター以下を同じ色にしたいんだけど、後付けでやるの面倒なのでどうしようか迷っていますが、やっちゃいましょう!
フッターもいい感じにしよう!
フッター以下を同じ色で続くようにするには、bodyに背景色をつけます。
そしてフッターの上の要素までを大きくdivで括ってそっちにも別の背景色をつけます。
こんなのちゃんとデザインしてから作業すれば、後からやることはないんですが・・・。
こんな感じになります。
よくあるミスとして上記画像のようにヘッダーの上に隙間ができることがあります。
これは、サイトタイトルの部分にmarginがついていてbodyに背景色を指定してあると、必ずなります。
こういう場合は、marginをpaddingに変更しましょう。
これで、ずいぶんとサイトっぽくなってきました。
次回は、本文エリアなどを作り込んでいきたいと思います!
ad
関連記事
-
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重
-
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像