お店情報ページの作成

お店情報ページの作成

JqueryMobile で作成して、
後々 wordpress のテンプレにしようと思います

まずは最初にベースとなるHTMLを作り
後からでも改造できるようにします

ファイル名は base.html

ソースは

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
 <h1>jQuery Mobile</h1>
</div>
<div role="main" class="ui-content">
  本文だよ
</div>
<div data-role="footer">
 Copyright 1998-2015
</div>
</div>
</body>
</html>

このファイルは以下のようになります

wps

このページを元にお店情報ページを作成します
なお、最初はHTMLと JavaScript でつくり
あとから wordpress のテンプレに変えていきます

ページ構成は
店舗情報
写真
メニュー
地図

店舗情報は
店名
定休日
価格
住所
電話番号
HP

使いやすくしたいので、
フッターにナビゲーションを配置する

お店関連なので
電話
地図
tweet ぐらいかな
tweet はメールとか line にしてもいいかもしれない

まずはこれだけでOK
カメラとかはお店の前でないと使わないし
現在地でカメラだすこともないと思う

まずは、フッター部分のソースを変えます

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>

<div data-role="footer">

</div>

の中へ貼り付けます

これで以下のようになります
wps2

フッターの
見た目が微妙だったので
class=”ui-bar”

<div data-role="footer">

</div>

へつけることで余白がつくようにします
wps3

これでフッターのソースは

<div data-role="footer" class="ui-bar">

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>
</div>

となります

コメントを残す

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