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

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/07/12

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

 

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、ボタン型リンクを作る基礎と、複数のボタンをグループ化して表示させる基本をご紹介いたしました。

 

今回は、より多くのスマートフォンらしいデザインの「ボタン型リンク」
を作成する方法をご紹介いたします。

 


◆グループ化したボタン型リンクを横並び(インライン)で表示


 

グループ化するdivタグに、属性「data-type=”horizontal”」を加えると、ボタンが横並びで表示されます。

 

各ボタンの横幅は、ボタンのラベルに合わせて自動調節され、すべてのボタンが連結されます。

 

下記では、3つのボタンが横方向に連結されて表示されます。

 


<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” data-role=”button”>リンク左</a>
<a href=”#” data-role=”button”>リンク中</a>
<a href=”#” data-role=”button”>リンク右</a>
</div>


 

ボタンを並べる数に制限はないので、以下のように5つ並べることもできます。

両端の枠だけが丸く加工され、すべてのボタンが連結して表示されます。

 


<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” data-role=”button”>Link1</a>
<a href=”#” data-role=”button”>Link2</a>
<a href=”#” data-role=”button”>Link3</a>
<a href=”#” data-role=”button”>Link4</a>
<a href=”#” data-role=”button”>Link5</a>
</div>


 


◆各ボタンにアイコンを付加


 

ボタンにはdata-icon属性を加えることで、

あらかじめ「jQuery Mobile」に用意されている様々なアイコンを付加することもできます。

下記では、「戻る」・「再読込」・「進む」の矢印アイコンを表示させています。

リンクの方向を分かりやすく示すには、矢印アイコンが便利です。

 


<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” data-role=”button” data-icon=”back”>戻る</a>
<a href=”#” data-role=”button” data-icon=”refresh”>再読込</a>
<a href=”#” data-role=”button” data-icon=”forward”>進む</a>
</div>


 

他にも下記のように、ホーム(家)アイコン、情報(iマーク)アイコン、検索(虫眼鏡)アイコンなど、特定の目的のリンクに便利なアイコンが用意されています。

 


<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” data-role=”button” data-icon=”home”>ホーム</a>
<a href=”#” data-role=”button” data-icon=”info”>情報</a>
<a href=”#” data-role=”button” data-icon=”search”>検索</a>
</div>


 

アイコンは、他にも以下のような種類が用意されています。描かれる内容と属性値の対応を掲載しておきますので、望みのアイコンがあれば、data-icon属性の値に指定して使ってみてください。

 

左向き矢印 : arrow-l
右向き矢印 : arrow-r
上向き矢印 : arrow-u
下向き矢印 : arrow-d
再読込矢印 : refresh
進む矢印  : forward
戻る矢印  : back

チェック  : check
バツ(×) : delete
足す(+) : plus
引く(-) : minus

ホーム : home
虫眼鏡 : search
星(☆): star
情報  : info
警告  : alert
グリッド: grid
歯車  : gear

 

今回は、スマートフォンらしいデザインの「ボタン型リンク」を作成する方法をご紹介いたしました。

 

「jQuery Mobile」では、アイコンの表示位置や配色に関するオプションも多数用意されています。

 

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

 


【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  続きを読む>>
続編
2012.07.10
スマホ用に様々なスタイルのボタン型リンクを作る(第1回)
2012.07.17
スマホ用に様々なスタイルのボタン型リンクを作る(第3回)

▲ページトップへ戻る

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

▲ページトップへ戻る