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

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

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

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、様々な「ボタン型リンク」を作成する方法をご紹介いたしました。

 

今回は、アイコンの表示位置や配色など、各種オプションの記述方法をご紹介いたします。

前回・前々回のソースと併せてご活用ください。

 


◆アイコンの表示位置を調整


 

ボタン表面のアイコンは、何も指定しなければ左端に表示されます。

しかし、data-iconpos属性を使えば、左端以外にも配置できます。

例えば下記のように、値を「top」にすれば上部に、「right」にすれば右端に配置できます。

 


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


 


◆アイコンだけを表示するボタン型リンク


 

ボタンには、アイコンだけを表示させることもできます。各ボタンに属性「data-iconpos=”notext”」を加えると、リンク文字がボタンの表面には表示されなくなります。その結果、アイコンだけが表示されるとても小さなボタンが作れます。

例えば下記では、「戻る」・「再読込」・「次へ」のリンク文字は表示されず、それぞれに該当するアイコン(arrow-l・refresh・arrow-r)だけが表示されます。

 


<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” data-role=”button” data-icon=”arrow-l” data-iconpos=”notext”>戻る</a>
<a href=”#” data-role=”button” data-icon=”refresh” data-iconpos=”notext”>再読込</a>
<a href=”#” data-role=”button” data-icon=”arrow-r” data-iconpos=”notext”>次へ</a>
</div>


 

なお、リンク文字自体は省略せずに、通常通り記述するよう注意してください。

そうしないと、「jQuery Mobile」が利用できない環境などから閲覧された場合に、リンクがクリックできなくなってしまいます。

また、リンク文字はtitle属性として使われますから、PCなどから閲覧した際には、マウスを載せるとリンク文字がポップアップ表示されます。

 


◆デザインテーマ(配色)を指定


 

ボタンにも、「jQuery Mobile」が用意している「a」~「e」の5つのデザインテーマ(配色)が指定できます。

data-theme属性を使って、望みの配色を指定してください。

下記の例では、「ホーム」は黄色、「情報」は白色、「検索」は青色の配色で表示されます。

 


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


 

今回は、3回にわたって、スマートフォンらしいデザインの「ボタン型リンク」の作り方をご紹介いたしました。

 

ぜひ、活用してみてください。

本日ご紹介したボタン型リンクのサンプルページはコチラ

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る