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

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/

jQuery Mobileを使って様々なページ切替効果を出す

  • publish_advertise
2012/11/29

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

 

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、別のHTMLを(ページ移動することなく)「ダイアログ」として表示させる方法をご紹介いたしました。

 

今回は、ダイアログを表示する際に、さまざまな表示効果(切替効果)を加える方法をご紹介いたします。

 

前回に掲載したソースと合わせてご参照ください。あるページ(たとえば dialog.html)をダイアログとして表示されるようにリンクを記述する方法は、前回ご紹介した通り以下のようなソースです。

 


<a href=”dialog.html” data-role=”button” data-rel=”dialog”>ダイアログを表示</a>


 

このa要素に、さらに「data-transition」属性を付加すると、閲覧者がリンクをタップしたときに、ダイアログの表示効果(ページ切替効果)が出せます。

 

効果には、以下の10種類が用意されています。

 

※スマートフォンではなくパソコンで表示確認をしたい場合は、Internet Explorer(IE)ではなく、Chromeの最新版などをご使用ください。

 

IEだと、(リンク自体は機能しますが)表示効果は再現できません。また、ローカル(HDD上)に置いたHTMLでは、リンクが機能しません。

 

必ずHTMLファイルをウェブサーバ上に置いてから表示させてください。

 

■fade

data-transition属性に、値「fade」を指定すると、ダイアログがフェイドインする形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”fade”>ダイアログをfadeで表示</a>


 

■pop
data-transition属性に、値「pop」を指定すると、ダイアログがポップアップする形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”pop”>ダイアログをpopで表示</a>


 

■flip

data-transition属性に、値「flip」を指定すると、現在のページとダイアログが真横にくるりと回転するような形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”flip”>ダイアログをflipで表示</a>


 

 

■turn
data-transition属性に、値「turn」を指定すると、現在のページとダイアログが大きく跳ねて横方向に回転するような形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”turn”>ダイアログをturnで表示</a>


 

■flow
data-transition属性に、値「flow」を指定すると、現在のページが背後に沈み込んで横にずれ、ダイアログが浮き上がってくるような形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”flow”>ダイアログをflowで表示</a>


 

■slidefade
data-transition属性に、値「slidefade」を指定すると、現在のページが横にスライドし、ダイアログがフェイドインする形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”slidefade”>ダイアログをslidefadeで表示</a>


 

■slide
data-transition属性に、値「slide」を指定すると、ダイアログが現在のページをスライドして押しのけるような形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”slide”>ダイアログをslideで表示</a>


 

■slideup
data-transition属性に、値「slideup」を指定すると、ダイアログが画面下部から上方向へスライドする形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”slideup”>ダイアログをslideupで表示</a>


 

■slidedown
data-transition属性に、値「slidedown」を指定すると、ダイアログが画面上部から下方向へスライドする形で表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”slidedown”>ダイアログをslidedownで表示</a>


 

■none
data-transition属性に、値「none」を指定すると、何の効果も表示することなく、すぐにダイアログが表示されます。


<a href=”dialog.html” data-role=”button” data-rel=”dialog” data-transition=”none”>ダイアログを効果なしで表示</a>


 

なお、これらの表示効果は、ダイアログではなく

「独立したページ」へリンクする際でも有効です。

 

その際は、以下のように「data-rel=”dialog”」属性を付加せずにa要素を記述し、

「data-transition=”効果名”」属性だけを付加します。

 


<a href=”page.html” data-role=”button” data-rel=”dialog” data-transition=”flow”>ページへflowして移動</a>


 

このように、10種類の切替効果を好みで選んで使うことができます。

スマートフォン向けサイトで、ぜひご活用ください。

 

 

【ご注意ください】

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

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2012.11.20
jQuery Mobileを使って別ページをダイアログとして表示させる

▲ページトップへ戻る

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

▲ページトップへ戻る