こんにちは。All About ホームページ作成ガイドの西村文宏です。
今回は、サムネイル画像やアイコン画像を付加したリンクリストを作る方法をご紹介いたします。
アフィリエイト商品の一覧ページを作る場合にも役立つと思いますので、ぜひご活用ください。
タップしやすい画像付きリストの作りかた
まずは、下記のHTMLソースを保存して、スマートフォンのブラウザで表示してみてください。
これは、画像付きリンクリストを「jQuery Mobile」で作成したサンプルです。
- ※以下のHTMLソースを保存する際には、文字コードを「UTF-8」にしないと全体が文字化けしてしまいますので注意してください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<title>jQuery Mobile リストのサンプルページ</title>
</head>
<body>
<div data-role="page" id="pcontents">
<div data-role="header">
<h1>jQuery Mobile リストのサンプル</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="sample1.html">
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a></li>
<li><a href="sample2.html">
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-ok.jpg" />
<h3>Of The Blue Colour Of The Sky</h3>
<p>Ok Go</p>
</a></li>
<li><a href="sample3.html">
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-mg.jpg" />
<h3>Congratulations</h3>
<p>MGMT</p>
</a></li>
</ul>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>
</html>- ※上記のサンプル内に掲載している画像は、「jQuery Mobile」サイト内の解説用サンプルページで使用されている画像をそのまま使っています。
上記のソースをブラウザで表示すると、「サムネイル画像付きのリスト」が縦方向にぴったり並んで、メニュー項目のように表示されます。
画像は、表示サイズが自動的に調整されて左端に配置されます。
さらに、移動できることを示す矢印アイコンが、自動的に右端に表示されます。
上記が、「jQuery Mobile」を使って「画像付きリンクリスト」を作る例です。
書き方はとても簡単で、a要素を使って作るリンクを、ul要素とli要素を使ってリストの形にするだけです。
その際、ulタグには「data-role="listview"」という属性を加えておきます。
簡単にまとめると、以下のような記述になります。
簡単にまとめると、以下のような記述になります。
<ul data-role="listview"> <li><a href="リンク先"><img src="画像URL"><h3>見出し</h3><p>文章</p></a></li> <li><a href="リンク先"><img src="画像URL"><h3>見出し</h3><p>文章</p></a></li> <li><a href="リンク先"><img src="画像URL"><h3>見出し</h3><p>文章</p></a></li> ： ： ： </ul>
このように、スマートフォンで見やすく、タップしやすい「サムネイル画像付きリンクリスト」を簡単に作ることができます。
用途によっては、もっと小さめのアイコン画像を付加したリストや、１項目に２つのリンク先を含めたリストを作りたいこともあるでしょう。
「jQuery Mobile」では、それらのようなリンクリストも簡単に作れます。
続きはアクセストレードに
ログインしてご覧ください。
ログインしてご覧ください。
SHARE
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら