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

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

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

 

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、ページの最上部に表示される「ヘッダ」の作り方をご紹介いたしました。

 

今回は、ページの最下部に表示される「フッタ」の作り方をご紹介いたします。前回に掲載したソースと合わせてご参照ください。

 

サンプルページコチラ


■フッタにボタンを加える


 

ヘッダの場合は、前回にご紹介した通り、ヘッダを作るdiv要素の中にa要素を入れるだけで、

自動的に左右両端に配置される仕様になっていました。

 

しかし、フッタにはそのような機能はなく、

より自由にボタンを配置できるようになっています。

例えば、フッタ部分のソースを以下のように修正すると、フッタ内に4つの「リンク機能を持ったボタン」を配置できます。

 


  

      HOME
      オプション
      前項
      次項
  


 

ヘッダとは異なり、すべてのボタンは左寄せで表示されます。

必要に応じてフッタの表示領域が拡張されるため、表示する量が多ければ複数行になります。

 


■フッタのボタンをグループにまとめる


 

フッタ部分のソースを以下のようにすると、複数のボタンをひとまとめのグループにして表示できます。

ボタンの機能によっては、このようにまとめた方が分かりやすくなるでしょう。

 


  

     

         HOME
         オプション
         前項
         次項
     

  


 

 


■フッタに、タイトルや、文字、その他のフォーム要素などを含める


 

フッタには、様々な要素を自由に配置できます。例えば以下のように記述すると、

「タイトル」・「検索窓」・「自由な文字列」をフッタに掲載できます。

 


  

     

SAMPLE PAGE FOOTER

     

        
     

     

Copyright © SAMPLE PAGE, 2012.

  


 

上記のように、h3要素を使えば、タイトル文字がセンタリングして表示されます。

ここではh3要素を使っていますが、h2要素でもh4要素でも構いません。

ページの構造に合わせて選んでください。

 

また、form要素とinput要素を使って「検索窓」を作っています。

そのままだと入力欄が1行全体に広がって表示されるため、form要素にstyle属性を加えてCSSを記述し、右寄せにしています。

 

さらに、p要素を使えば、上下に適度な余白を設けた上で自由な文章を表示できます。

上記では、著作権表示を記述しています。

 

さて、前回から今回にかけてご紹介したように、「jQuery Mobile」には、スマートフォンらしいヘッダやフッタを簡単に作れる機能が用意されています。

ぜひ、ご活用ください。

 

 

【ご注意ください】

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

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2012.12.13
スマートフォン向けツールバー(ヘッダ)を作る(1)

▲ページトップへ戻る

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

▲ページトップへ戻る