写真スペースの設置
お店紹介ページでおすすめメニューを
表示すると見やすくなると思うので
写真を表示するスペースを設置します
この部分は後々 wordpress プラグインで
スライドショーに変えるというのもありです
とはいっても最初から素材を用意するのは大変なので
無料写真素材サイト
FOODIE’S FEED
のものを使わせていただくことにします
写真をクリックして
DOWNLOAD ボタンをクリックすれば
ダウンロードできます
あとは、このファイルをサイトのHTMLファイルのあるところへコピーします
ちなみに、このときにwordpress で使うことも考え
imageフォルダをつくっておくと
後々楽になります
mkdir image
ちなみに、ファイル名が長いので
変更しました
cp foodiesfeed.com_chicken-breast-potatoes-ratatouille.jpg food.jpg
これで準備ができたので
<img src="image/food.jpg" alt="" width="300" height="300">
を
<div role="main" class="ui-content">
の下へ貼り付けます
これで写真が表示されます
なお width=”300″ は横幅
height=”300″ は縦幅になります
せっかくなので、ここで更に写真を追加して
ランチの説明文もつけます
また、写真をスライドに後々変えたいのでタイトルに
ギャラリーとつけてみました
<h2>ティーセット</h2> <h3>午後の緩やかな時間を本とともに</h3> <p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p> <img src="image/tee.jpg" alt="" width="300" height="300"> <h3>ギャラリー</h3> <img src="image/food.jpg" alt="" width="300" height="300">
これで写真エリアができました
ページ全体のソースは以下のようになります
<!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" data-add-back-btn="thue" data-back-btn-text="戻る">
<h1>お店情報</h1>
</div>
<div role="main" class="ui-content">
<h2>ティーセット</h2>
<h3>午後の緩やかな時間を本とともに</h3>
<p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p>
<img src="image/tee.jpg" alt="" width="300" height="300">
<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">
<h3>メニュー</h3>
<div data-role="collapsible">
<h3>私のおすすめメニュー</h3>
<p>イカスミパスタ</p>
</div>
<h3>店舗情報</h3>
<table data-role="table" data-mode="reflow" class="ui-responsive">
<thead>
<tr>
<th>店名</th>
<th>定休日</th>
<th>価格</th>
<th>住所</th>
<th>電話番号</th>
<th>HP</th>
<th>アクセス</th>
</tr>
</thead>
<tbody>
<tr>
<td>○○のお店</td>
<td>日曜日</td>
<td>ランチ1000円</td>
<td>東京都</td>
<td>000-000-0000</td>
<td>http://example.co.jp</td>
<td>○○駅○版口から徒歩</td>
</tr>
</tbody>
</table>
<h3>周辺地図</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</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>
</body>
</html>
