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

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/

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

  • seo
2012/09/13

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

 

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

 

今回は、1項目に2つのリンク先を含められる「分割リスト」の作り方をご紹介いたします。

例えば、商品リストで、1項目内に、

 

・「商品詳細ページ」へのリンク

・「購入ページ」へのリンク

 

の2つのリンク先を一緒に掲載したい場合などに役立ちます。

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

サンプルページはこちら

 


◆1項目に2つのアクションを含めた項目のソース例


 


<ul data-role=”listview” data-split-icon=”star” data-split-theme=”e”>
<li><a href=”detail001.html”>
<img src=”http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-hc.jpg” />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>
<a href=”buy001.html” data-rel=”dialog” data-transition=”slideup”>購入する</a>
</li>
<li><a href=”detail002.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>
<a href=”buy002.html” data-rel=”dialog” data-transition=”slideup”>購入する</a>
</li>
<li><a href=”detail003.html”>
<img src=”http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-mg.jpg” />
<h3>Congratulations</h3>
<p>MGMT</p>
</a>
<a href=”buy003.html” data-rel=”dialog” data-transition=”slideup”>購入する</a>
</li>
</ul>


 

上記のソースをブラウザで表示すると、3つの「サムネイル画像付きリスト」が表示されます。

 

その際、右端の星アイコンが縦線で分離されており、

 

・サムネイル画像側をタップすると、商品詳細ページ(detail001~3.html)へ

・星アイコン側をタップすると、購入ページ(buy001~3.html)へ

 

それぞれ移動するようになります。

作り方は、前々回の「サムネイル画像付きリスト」を作る場合と似ていますが、

さらにいくつかの属性を付加する必要があります。

 


◆リストを作るul要素の記述方法


 

まず、リストを作るul要素に、data-split-icon属性とdata-split-theme属性の2つを

付加します。

 

これらの属性を使って、

 

・分割された右側のボタンに、どのようなアイコンを使うか?
・分割された右側のデザインテーマを何にするか?

を指定します。

 


「data-split-icon=”star”」と記述すると、星アイコンが表示されます。
「data-split-icon=”gear”」と記述すると、歯車アイコンが表示されます。


 

これらのアイコンには、「jQuery Mobile」に内蔵されているアイコンを、

何でも指定できます。

 

 


「data-split-theme=”a”」と記述すると、アイコン側が黒色デザインで表示されます。
「data-split-theme=”e”」と記述すると、アイコン側が黄色デザインで表示されます。


 

このデザインテーマは、「a」~「e」の中で望みのデザインを選択できます。

 

 


◆各項目を作るli要素の記述方法


 

次に、各項目を作るli要素には、リンクを作るa要素を2つ含めます。

 

1つは、前々回にご紹介した「サムネイル画像付きのリスト」と同じように、

a要素(リンク)・img要素(画像)・h3要素(項目名)・p要素(説明文)などを記述します。その直後に、もう1つa要素を加えて、アイコン側がタップされた場合のリンク先を記述します。

 

例えば、以下のように記述します。

 


<li>
<a href=”リンク先1”>
<img src=”画像URL”>
<h3>見出し</h3>
<p>文章</p>
</a>
<a href=”リンク先2” data-rel=”dialog” data-transition=”slideup”>代替文章</a>
</li>

 


 

上記のような<li>~</li>で、1項目を作ります。

2つ目のリンクに指定されている文章(代替文章)は、画面には表示されません。

しかし、省略はしないようにしてください。省略してしまうと、もし「jQuery Mobile」が使えない環境で閲覧された場合に、リンクが表示されなくなってしまいます。

また、PCから閲覧された場合には、ツールチップとして表示されます。

 


◆ソースのまとめ


 

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

 


<ul data-role=”listview” data-split-icon=”star” data-split-theme=”e”>
<li><a href=”リンク先A”><img src=”画像URL”><h3>見出し</h3><p>文章</p></a><a href=”リンク先B” data-rel=”dialog” data-transition=”slideup”>代替文章</a></li>
<li><a href=”リンク先A”><img src=”画像URL”><h3>見出し</h3><p>文章</p></a><a href=”リンク先B” data-rel=”dialog” data-transition=”slideup”>代替文章</a></li>
<li><a href=”リンク先A”><img src=”画像URL”><h3>見出し</h3><p>文章</p></a><a href=”リンク先B” data-rel=”dialog” data-transition=”slideup”>代替文章</a></li>
:  :  :
</ul>


 

前々回からの3回にわたって、スマートフォンらしいデザインで「画像を加えたリンクリスト」を作る方法をご紹介いたしました。

 

アフィリエイトサイトでは、商品リストなどを作成する際にも便利です。

ぜひ、ご活用ください。

 


 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る