各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

タップしやすい画像付きリストを作る(第1回)

  • publish_advertise
2012/09/06

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を活用して、

見やすくてタップしやすい形の「リンクリスト」を簡単に作る方法をご紹介いたしました。

 

今回は、サムネイル画像やアイコン画像を付加したリンクリストを作る方法を

ご紹介いたします。

 

アフィリエイト商品の一覧ページを作る場合にも役立つと思いますので、

ぜひご活用ください。

 

まずは、下記の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>
……………………………………………………………………………………………

 

このように、スマートフォンで見やすく、タップしやすい「サムネイル画像付きリンクリスト」を簡単に作ることができます。

 

用途によっては、もっと小さめのアイコン画像を付加したリストや、1項目に2つのリンク先を含めたリストを作りたいこともあるでしょう。

 

「jQuery Mobile」では、それらのようなリンクリストも簡単に作れます。

 

それらの詳しい作り方に関しては、次回にご紹介いたします。

 

サンプルページはこちら

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.09.11
タップしやすい画像付きリストを作る(第2回)
2012.09.13
タップしやすい画像付きリストを作る(第3回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る