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

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/

スマホ用に様々なスタイルのボタン型リンクを作る(第1回)

  • publish_advertise
2012/07/10

 

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

フレームワーク「jQuery Mobile」を使って、スマートフォンらしいデザインを簡単に作る方法を、過去数回にわたってご紹介してきました。

 

初回では、スマートフォン用サイトによくある「ボタン型リンク」の作り方を少しだけご紹介いたしました。

しかし「jQuery Mobile」では、もっと多くのスマートフォンらしいデザインのボタン(リンク)が作成できます。

 

そこで今回は、「複数のボタンが合体したグループ型ボタン」など、スマートフォンらしいデザインの、様々なボタン(リンク)の作り方を、まとめてご紹介いたします。

 

まずは、下記のHTMLソースを保存して、スマートフォンのブラウザで表示させてみてください。

これは基本的な「ボタン型リンク」を「jQuery Mobile」で作ったサンプルです。

※以下のHTMLソースを保存する際には、文字コードを「UTF-8」にしないと全体が文字化けしてしまいますので注意してください。

 


<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js”></script>
<title>jQuery Mobile アコーディオン式コンテンツのサンプルページ</title>
</head>
<body>

<div data-role=”page” id=”pcontents”>
<div data-role=”header”>
<h1>jQuery Mobile ボタン型リンクのサンプル</h1>
</div>
<div data-role=”content”>

<p>● ボタン型リンクの基礎:</p>

<!– ▼ボタン型リンクの例1 –>
<a href=”#” data-role=”button”>標準のボタン型リンク</a>
<a href=”#” data-role=”button” data-mini=”true”>標準のボタン型リンク(低め)</a>

<p>● インラインのボタン型リンクの基礎:</p>

<!– ▼ボタン型リンクの例2 –>
<a href=”#” data-role=”button” data-inline=”true”>リンクA</a>
<a href=”#” data-role=”button” data-inline=”true”>リンクB</a>
<a href=”#” data-role=”button” data-inline=”true” data-theme=”e”>リンクC</a>

</div>
<div data-role=”footer”>
<h4>フッター</h4>
</div>
</div>

</body>
</html>


 

上記をブラウザで表示すると、

 

(1) 横幅いっぱいに広がったボタン

(2) テキストの幅に合わせたボタン

 

の2種類が表示されます。

上記が、「jQuery Mobile」でボタン型リンクを作る基本です。

 

これらのリンクを <div data-role=”controlgroup”> ~ </div> で囲むと、グループ化することができます。

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

 

 


<div data-role=”controlgroup”>
<a href=”#” data-role=”button”>リンク上</a>
<a href=”#” data-role=”button”>リンク中</a>
<a href=”#” data-role=”button”>リンク下</a>
</div>


 

上記のHTMLソースを、先ほどのHTML内に追記して表示させると、3つのボタン型リンクが縦方向に連結しているのが見えます。

このソースに、属性「data-type=”horizontal”」を加えて以下のようにすると、縦方向ではなく横方向に連結して表示されます。

 


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


 

このように「横方向に連結されたボタン群」は、スマートフォン用サイトでよく見かけるデザインでしょう。

 

「jQuery Mobile」では、より多くのスマートフォンらしいデザインのボタン型リンクが作成できます。

 

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

 

【ご注意ください】

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

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

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る