お店情報ページの作成 – Linux & Android Dialy

お店情報ページの作成

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>

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

このページを元にお店情報ページを作成します
なお、最初は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>

の中へ貼り付けます

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

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

<div data-role="footer">

</div>

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

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

<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>

となります

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル