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

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/08/14

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

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

 

今回は、リスト内の各リンク項目にもっと情報を加えたり、複雑なリンクリストを見やすく作ったりする方法をご紹介いたします。

前回にご紹介したHTMLソースと一緒にご参照ください。

 


◆リンクの名称だけでなく、補足説明も一緒に加えて表示


 

リンクリストは、項目名だけを列挙するよりも、補足説明も一緒に掲載しておく方が分かりやすくなります。

 

「jQuery Mobile」で作るリンクリストでは、項目名を「h3要素」で記述し、説明文を「p要素」で記述することで、簡単に見やすくデザインされたリンク項目が作れます。

 

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

リンク項目を作るa要素の内側に、「項目名のh3要素」と「説明文のp要素」を記述しています。

 

 


<ul data-role=”listview”>
<li>
<a href=”apple.html”>
<h3>Apple</h3>
<p>項目名だけでなく説明文も合わせて、タップ可能なリンクとして動作。</p>
</a>
</li>
<li>
<a href=”orange.html”>
<h3>Orange</h3>
<p>リスト項目全体がタップ可能なので、押しやすいメニューが作れます。</p>
</a>
</li>
<li>
<a href=”grape.html”>
<h3>Grape</h3>
<p>項目名をh3要素、説明文をp要素で書くだけで、デザインされた項目を簡単作成。</p>
</a>
</li>
</ul>


 

 


◆複数階層のリンクリストを、自動的に複数ページに分割して表示


 

サイトマップを作る際など、リンクリストに複数の階層を作って、大きなツリー構造のリンクリストを作りたいこともあります。

 

「jQuery Mobile」では、ul要素とli要素を使って「複数階層のリスト」を書くだけで、自動的に「ページ遷移を伴うリンクリスト」になります。

 

次の階層へ移るためのリンクを自力で作る必要はありません。

 

「項目名をタップして次の階層へ移る」ためのリンクは、自動的に生成されます。

 

以下は、3階層のリンクリストの例です。

 

a要素を使ってリンクを作る必要があるのは、リストの最下層にあるリンク項目だけです。

なお、2階層目以降のページでは、自動的に「前の項目名」がページタイトルとして使われます。

 

 


<ul data-role=”listview”>
<li>
<h3>Sample List A</h3>
<p>この部分は特にリンクとして記述はしていませんが、タップ可能なリンクのように動作します。</p>
<ul>
<li>雑貨 Sundry Goods
<ul>
<li><a href=”dummypage.html”>インテリア</a></li>
<li><a href=”dummypage.html”>キッチン</a></li>
<li><a href=”dummypage.html”>バッグ</a></li>
<li><a href=”dummypage.html”>扇子</a></li>
<li><a href=”dummypage.html”>箱</a></li>
</ul>
</li>
<li>家具 Furniture
<ul>
<li><a href=”dummypage.html”>机</a></li>
<li><a href=”dummypage.html”>椅子</a></li>
<li><a href=”dummypage.html”>本棚</a></li>
<li><a href=”dummypage.html”>タンス</a></li>
<li><a href=”dummypage.html”>ソファ</a></li>
<li><a href=”dummypage.html”>ベッド</a></li>
</ul>
</li>
<li>照明 Lightings
<ul>
<li><a href=”dummypage.html”>ペンダントライト</a></li>
<li><a href=”dummypage.html”>シーリングライト</a></li>
<li><a href=”dummypage.html”>スタンドライト</a></li>
</ul>
</li>
</ul>
</li>
</ul>


 

さて、「jQuery Mobile」で作るリンクリストには、分類項目を加えて見やすくしたり、その階層に何項目が含まれているのかを示す「子要素カウンタ」を付けたりもできます。

 

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

 

本日紹介した内容のサンプルページはこちら

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る