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

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回)

  • publish_advertise
2012/08/16

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

 

前回と前々回では、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、見やすくてタップしやすい形の「リンクリスト」を簡単に作る方法を

ご紹介いたしました。

 

今回は、リストに分類項目を加えて分かりやすくしたり、その階層に何項目が含まれているのかを示す「子要素カウンタ」を付けたりする方法をご紹介いたします。

 


◆分類項目を付けて、リンクリストを分かりやすく表示


 

リンクリストの中には、見やすくするために「分類項目」(ヘッダ)を

設けることができます。

 

li要素に「data-role=”list-divider”」という属性を加えると、

その項目が「分類項目」としてデザインされます。

 

例えば以下のようにリストを記述すると、「雑貨 Sundry Goods」・「家具 Furniture」・「照明 Lightings」の3つの分類項目を使ってリストが分類されます。

 


<ul data-role=”listview”>
<li data-role=”list-divider”>雑貨 Sundry Goods</li>
<li><a href=”dummypage.html”>インテリア用品</a></li>
<li><a href=”dummypage.html”>キッチン用品</a></li>
<li data-role=”list-divider”>家具 Furniture</li>
<li><a href=”dummypage.html”>机・椅子</a></li>
<li><a href=”dummypage.html”>本棚</a></li>
<li data-role=”list-divider”>照明 Lightings</li>
<li><a href=”dummypage.html”>ペンダントライト</a></li>
</ul>


 


◆その階層に何項目含まれているのかを示す「子要素カウンタ」を付けた表示


 

商品リストなどのように、その階層にいくつの項目が含まれているのかを

表示できると便利な場合があります。

 

リストの項目内に、以下のようにspan要素を追記すると、

「次の階層に何項目あるのか?」を丸囲み数値で示すことができます。

 


<span>数字</span>


 

例えば以下のようにリストを記述すると、「雑貨」項目の右端には、丸囲みの数字で48が、「家具」項目の右端には、丸囲みの数字で7が、「照明」項目の右端には、丸囲み数字で21が表示されます。

 


<ul data-role=”listview”>
<li><a href=”dummypage.html”>雑貨 <span>48</span></a></li>
<li><a href=”dummypage.html”>家具 <span>7</span></a></li>
<li><a href=”dummypage.html”>照明 <span>21</span></a></li>
</ul>


 

前々回からの3回にわたって、スマートフォンらしいデザインで、見やすくてタップしやすい「リンクリスト」の作り方をご紹介いたしました。

 

メニューやサイトマップなどの作成に便利ですから、ぜひ、ご活用ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2012.08.09
スマホらしいリンクリストを簡単に作る(第1回)
2012.08.14
スマホらしいリンクリストを簡単に作る(第2回)

▲ページトップへ戻る

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

▲ページトップへ戻る