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

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/

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

  • publish_advertise
2012/09/11

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

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、サムネイル画像を付加したリンクリストを作る方法をご紹介いたしました。

 

今回は、もっと小さい任意のアイコン画像を付加してリストを作る方法をご紹介いたします。

前回のHTMLソースや、サンプルページと一緒にご参照ください。

 

サンプルページはこちら

 


◆もっと小さい、任意のアイコン画像を付加したリスト


 

リストを作るHTMLソースを以下のように記述すると、前回のサムネイル画像よりももっと小さい画像(アイコン画像)を付加したリストが作れます。

 

アイコンは、「jQuery Mobile」が内蔵しているアイコンではなく、

任意に用意した画像が使えます。

 


<ul data-role=”listview”>
<li><a href=”sample1.html”><img src=”http://jquerymobile.com/demos/1.1.1/docs/lists/images/gf.png” alt=”France”>France</a></li>
<li><a href=”sample2.html”><img src=”http://jquerymobile.com/demos/1.1.1/docs/lists/images/de.png” alt=”Germany”>Germany</a></li>
<li><a href=”sample3.html”><img src=”http://jquerymobile.com/demos/1.1.1/docs/lists/images/gb.png” alt=”Great Britain”>Britain</a></li>
</ul>


 

※上記のサンプル内に掲載している画像は、「jQuery Mobile」サイト内の解説用サンプルページで使用されている画像をそのまま使っています。

 

作り方は、前回の「サムネイル画像付きリスト」の場合とほぼ同じです。ただ、画像を指定するimg要素に、アイコンであることを示すclass属性「class=”ui-li-icon”」を付加しておく点が異なるだけです。

 

これによって、指定した画像がアイコンとして各項目の左端に表示されます。

簡単にまとめると、以下のような記述になります。

 


<ul data-role=”listview”>
<li><a href=”リンク先”><img src=”アイコン画像URL” alt=”代替文字”>項目名</a></li>
<li><a href=”リンク先”><img src=”アイコン画像URL” alt=”代替文字”>項目名</a></li>
<li><a href=”リンク先”><img src=”アイコン画像URL” alt=”代替文字”>項目名</a></li>
:  :  :
</ul>


 

さて、今回と前回にご紹介したリンクリストでは、タップしたときの移動先が1項目につき1ページだけでした。

 

しかし、サムネイル画像付きのリストで「商品リスト」を作った際などは、

「詳細情報ページ」と「購入手続きページ」など、1項目に2種類の移動先を用意したい場合もあるでしょう。

 

「jQuery Mobile」で作るリンクリストでは、1項目を左右2つに分割して、移動先も2つに分ける「分割ボタン」リストを作ることもできます。

 

次回は、その詳しい作り方をご紹介いたします。

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る