ホームページ制作

ホームページ制作の方法。WordPressを使用したホームページ制作など。

HTMLについて ホームページ制作 モバイルサイト作成

モバイルサイトでリンクの下線の色を変えるには?


xhtmlでモバイルサイトを制作する場合、PCのサイトと違い気をつけないとうまく表示されない部分が結構ある。
PCサイトでもIEに代表されるようにブラウザ間の表示の違いを意識しなければならないがモバイルサイトになるとさらに独特な注意がいる。
問題の一つにリンクの下線の色が、思ったような色にならないことがある。
とりあえず、まずはリンクの色の指定方法。

たとえば、リンクの色を赤色、訪問済みリンクも赤色にしてみる。
<head>~</head>の間に下記のように記述する。

<style type="text/css">
<![CDATA[
a:link{color:#FF0000;}
a:visited{color:#FF0000;}
]]>
</style>

これで、リンク色が赤色になる。
基本的に、この指定をすればリンクは赤色、リンクの下線も赤色になる。
ただ、デザイン上、部分的にリンクの色を他の色にしたい場合がある。
その場合は、

<a href=""●●●●"><span style="color:#000000;">あああああ</span></a>
これで、リンク色は黒色になる。
しかしこれだと、リンクの下線は赤色のまま。
ここは、黒色リンクにあわせて、下線も黒にしたい。
そこで、先ほどのヘッド部分の記述に少し手を加える。

<style type="text/css">
<![CDATA[
a:link{color:#FF0000;}
a:visited{color:#FF0000;}
a.kuro:link {color:#000000;}
a.kuro:visited {color:#000000;}
]]>
</style>

そして、リンク部分は
<a href="●●●●" class="kuro"><span style="color:#000000;">あああああ</span></a>
とclassを付ける。
これで、下線も黒色になる。
一見、classだけ付ければspan styleでの色指定は要らないように感じますが、多くの機種に対応
させるには必要となってきます。モバイルサイトではキャリアごとに通用する、しないが変わってくるし、機種ごとにも違ったりするので面倒ですがこんな書き方になってしまいます。

とりあえず、この方法で、リンク下線の色が変えれました。
(iモードブラウザ1.0だと下線の色が変わりません・・・。)


-HTMLについて, ホームページ制作, モバイルサイト作成
-, , , ,