リンクの表示色を指定する方法
ここでは、リンクの文字色を指定する方法をご紹介いたします。
リンク文字の表示色は、「未訪問」(=まだアクセスしたことがないページ)か「既訪問」(=既にアクセスしたことがあるページ)かで色を分けることができます。
これらの表示色は、PCサイトと同じようにスタイルシートで装飾できます。 しかし、様々な携帯端末に対応させるには、以下の記述方法で記述する必要があります。
XHTMLのhead要素内に、
style要素を使って記述する。
必ずこの方法を使って記述します。 PCサイトでは、他に「外部のCSSファイルに記述する」という方法もありますが、docomoの携帯端末では(2009年5月に発売された最新機種を除いて)すべての端末で上記の記述方法でしか装飾できません。
具体的には、以下のように記述します。
<style type="text/css"> a:link { color: blue; } a:visited { color: #0080cc; } </style>
「 a:link 」が未訪問リンク、「 a:visited 」が既訪問リンクです。
サイト内のすべてのページで同じ装飾を使いたい場合は、上記の記述をすべてのページ(XHTML)に記述する必要があります。
※auやSoftbankの端末、docomoの最新機種では、外部のCSSファイルに記述する方法も使えます。
なお、上記のstyle要素内に「リンク文字色以外の装飾」を記述しても、docomoの(最新機種を除く)端末では有効になりませんので注意して下さい。 (詳しくは、第1回の記事「携帯サイトの作り方 第1回 作成方法の基礎」の4ページ目にある「使える装飾方法と使えない装飾方法」をご参照下さい。)
※特定の範囲内(div要素の内側など)に限定したリンク文字色の装飾も無効です。
例えば、「 div.linklist a:link { color: red; } 」のような記述は「div.linklist」の部分が無効になるため、使えません。
おわりに
今回は、リンクをキーでクリックできる「アクセスキー」の設定方法と、リンク文字色の装飾方法をご紹介いたしました。 携帯サイトはスクロールに手間がかかるので、アクセスキーを活用してスムーズに移動できるように工夫してみて下さい。