Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]

公開日: : 最終更新日:2014/08/08 html5, Web制作


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

完全に放置してました、僕です。

別に忘れていた訳じゃないんですが、時間がありませんでした。
あと方向性も見出せずにいます。

ヘッダー要素から成形していくよ!

だいぶ迷走中ですが、まずはヘッダーをしっかりと作り上げてしまおうと思います。
どんな風にするか決まってませんが・・・。

タイトル 2014-02-13 17-36-31 2014-02-13 17-36-34

とりあえず、サイト名とサブタイトルを入れました。
これだけでもぐっとサイトっぽくなるね!(嘘)

ここから、背景色を変更したり、メニューをflexboxに変更したりでこうなりました。

タイトル 2014-02-13 18-37-30 2014-02-13 18-37-33

割とそれっぽくなってきたかな?

フッター以下を同じ色にしたいんだけど、後付けでやるの面倒なのでどうしようか迷っていますが、やっちゃいましょう!

フッターもいい感じにしよう!

フッター以下を同じ色で続くようにするには、bodyに背景色をつけます。
そしてフッターの上の要素までを大きくdivで括ってそっちにも別の背景色をつけます。
こんなのちゃんとデザインしてから作業すれば、後からやることはないんですが・・・。

タイトル 2014-02-13 18-46-28 2014-02-13 18-47-29

 

こんな感じになります。
よくあるミスとして上記画像のようにヘッダーの上に隙間ができることがあります。
これは、サイトタイトルの部分にmarginがついていてbodyに背景色を指定してあると、必ずなります。
こういう場合は、marginをpaddingに変更しましょう。

これで、ずいぶんとサイトっぽくなってきました。
次回は、本文エリアなどを作り込んでいきたいと思います!

 

 

ad

関連記事

[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン

rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

ad

Message

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

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
PAGE TOP ↑

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524