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

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
2013/01/22

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

 

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、「ナビゲーションバー」を作る方法をご紹介いたしました。

 

 

今回は、その「ナビゲーションバー」の各項目にアイコンを付加する方法と、ヘッダやフッタの表示を固定する方法をご紹介いたします。

 

前回に掲載したソースと合わせてご参照ください。

 


■ナビゲーションバーの各項目にアイコンを加える


 

メニュー項目には適切なアイコンがあると分かりやすくなります。

「jQuery Mobile」では、以下のように、a要素の中に「data-icon」属性を加えることで、簡単にアイコンを表示できます。

 


<li><a href=”リンク先” data-icon=”アイコン種類”>項目名</a></li>


 

アイコンの表示位置は、標準では(ボタン内の)上部になります。

もし、左右や下部に表示したい場合は、ナビゲーションバーを作るdiv要素に、以下のように「data-iconpos」属性を加えます。

 


<div data-role=”navbar” data-iconpos=”bottom”> ~ </div>


 

上記の場合だと、アイコンは(ボタン内の)下部に表示されるようになります。

値を「left」にすれば左側に、「right」にすれば右側に表示されます。

 


■アイコン付きナビゲーションバーの例


 

例えば以下のようにHTMLを記述すると、下記のようになります。

 

・4つのボタンが均等配置されるナビゲーションバーが表示される

・1つ目のボタンがアクティブ状態になる

・家(home)・星(star)・格子(grid)・歯車(gear)の4種類のアイコンが、各ボタンの下部に表示される

 

 


<div data-role=”navbar” data-iconpos=”bottom”>
   <ul>
      <li><a href=”B1.html” data-icon=”home”>BTN1</a></li>
      <li><a href=”B2.html” data-icon=”star”>BTN2</a></li>
      <li><a href=”B3.html” data-icon=”grid”>BTN3</a></li>
      <li><a href=”B4.html” data-icon=”gear”>BTN4</a></li>
   </ul>
</div>


 

「jQuery Mobile」で使える様々なアイコンについては、

2012年7月発行のメルマガに掲載した

 

『スマホ用に様々なスタイルのボタン型リンクを作る』(2)

で紹介していますので、ご参照ください。

 


■ヘッダやフッタの表示を固定する


 

頻繁にページを移動するようなサイト構造の場合は、ページをスクロールしてもヘッダやフッタが常に画面上に固定されていると便利です。

 

ヘッダやフッタを画面上に固定するには、ヘッダやフッタを作るdiv要素に、属性「data-position=”fixed”」を加えます。

 

例えば、以下のように記述すると、どれだけページをスクロールしても、常にヘッダが画面上部に表示され続けるようになります。

 


<div data-role=”header” data-position=”fixed”>
   <h1>ヘッダ</h1>
</div>


 

また、フッタを以下のように記述すれば、
常にフッタが画面下部に表示され続けるようになります。

 


<div data-role=”footer”  data-position=”fixed”>
   <h3>フッタ</h3>
</div>


 

なお、ヘッダやフッタを固定した場合でも、画面上のどこか(ボタン以外の箇所)をタップすると、一時的に固定が解除されます。

 

この機能があるため、ヘッダやフッタを固定することによって
画面の表示領域が狭くなってしまう点を心配する必要はありません。

 


■サンプルページ


 

今回ご紹介したソースを使ったサンプルページを用意しています。
スマートフォンのブラウザを使って閲覧してみてください。
パソコンから閲覧する場合は、Google Chrome や Firefox の最新版などをお使いください。

 

サンプルページはコチラ

 

さて、今回は、スマートフォン向けウェブサイトに「ナビゲーションバー」を加える方法と、

ヘッダやフッタを固定する方法をご紹介いたしました。

 

どちらも、スマートフォン向けウェブサイトで使うと、とても便利です。
ぜひ、ご活用ください。

 


 

【ご注意ください】

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

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

 

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.01.17
スマートフォン向けナビゲーションバーを作る(第1回)

▲ページトップへ戻る

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

▲ページトップへ戻る