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

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
2011/12/27

 

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

 

今回は、スマートフォン用ウェブページのために「押しやすいリンク」を作る方法をご紹介いたします。

 


◆ 1行まるまる占有する「大きなボタン」に装飾する方法


 

スマートフォンは指を使って画面に触れることで操作しますから、リンクは大きい方が押しやすくなります。

 

そこで、リンクを大きな「ボタン」に見えるよう装飾する方法をご紹介いたしましょう。

 

あくまでも「ボタンに見えるように装飾」するだけなので、リンクそのもののHTMLソースは、以下のようなa要素を使った普通の書き方で問題ありません。

 

ただ、スタイルシートを使って装飾を適用するために、class属性を付加しています。

 


<a href="(リンク先)">リンク文字</a>

 

上記のようなHTMLソースをそのままブラウザで表示させると、普通のリンクとして表示されるだけです。

しかし、以下のようなスタイルシートを追記すると、上記のリンクが「ボタン」のように装飾されて表示されます。

 


<style type=”text/css”>
a.largebutton {
/* (1)表示形態 */
display: block;
/* (2)横幅サイズ */
width: 100%;
/* (3)枠線 */
border-style: solid;
border-width: 1px;
border-color: #ccc #999 #999 #ccc;
/* (4)角を丸く */
-webkit-border-radius: 7px; /* Chrome,Safari */
border-radius: 7px;         /* CSS3 */
/* (5)余白の調整 */
padding: 6px 0px;
margin: 0.5em auto;
/* (6)文字の装飾 */
text-decoration: none;
/* (7)文字の位置 */
text-align: center;
/* (8)背景グラデーション */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* Chrome,Safari */
background: linear-gradient(top, #fff, #ccc); /* CSS3 */
}
</style>


 

上記の26行をそのままHTMLソース内にコピー&ペーストするだけで使えます。

 

パソコン上で表示を確認したい場合は、ブラウザにChromeかSafariを使ってください。

 

上記のソースでは、リンクは1行全体に広がって表示されます。

 

広がり具合は「(2)横幅サイズ」で指定しています。値を100%よりも小さくすることで、幅を狭められますから、望みの大きさに調整してみてください。

 

「(4)角を丸く」と「(8)背景グラデーション」では、Chrome・Safari専用の記述方法とCSS3標準の記述方法を併記しています。片方の値を修正した場合は、もう片方も同様に修正してください。

 

ボタンの大きさは「(5)余白の調整」にあるpaddingプロパティの値を変えることで調整できます。

 

marginプロパティの値を変えると、周囲との距離を変えられます。レイアウトとの兼ね合いや好みに応じて修正してみてください。

 


 

 

次回は、文中のリンクを(文中に配置したまま)ボタン型にして押しやすくする装飾方法をご紹介いたします。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2011.12.28
スマホ対応サイト『リンクを指で押しやすく装飾する方法』(第2回)

▲ページトップへ戻る

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

▲ページトップへ戻る