モックアップ作成 – 共通部分の作りこみ

モックアップ用HTML作成の続きです。

本日はサイトの共通部分

  • サイトヘッダー(サイトロゴ部分)
  • サイドバー(メニューやウィジェットの表示部分)
  • フッター

のHTMLコーディングを行いました。

以下は sigle.html の中身。

 

サイドバーのメニューやウィジェットは、WordPressの「カスタムメニュー」や「カスタムウィジェット」の機能でカスタマイズできるようにする予定なので、該当部分のHTMLはそれらの機能が出力するTHMLに準拠させています(要は、Twenty Fifteenが出力している該当部分のHTMLのコピペです)。

 

今回作り込んだHTMLをブラウザで表示させると以下のようになります(スタイルシートを定義していないので素っ気ない画面になっています)。

mockup 2015/9/10

次回はスタイルシートをいじって、それなりの見た目になるようにしてみたいと思います。