このページはに更新されました
誰でも簡単!したらば掲示板カスタマイズ
トップページ
>>
誰でも簡単!したらば掲示板カスタマイズ
>>
C-4.リンクのカスタマイズ
C-4.リンクのカスタマイズ
通常、何も設定しなければ、リンクには
青色で、このように下線
が付き、一度クリックすると
このように紫色
に変わります。
右のリンクは、スタイルシートが使われています。色は同じですが、下線を非表示にして、マウスカーソルを乗せたときに、文字の背景が水色になるようにしてあります。
スタイルシートを使うと、このようにリンクの下線や色をカスタマイズすることができるのです。
リンク
管理者メニューでのリンク色変更
リンクの色は、管理者メニューから変更することもできますが、下線を消したり、文字の背景色を付けることはできません。
リンクのカスタムは、必要かどうかを考えよう
背景画像の設定や、背景色を変えて通常のリンク色が見えにくくなってしまった場合には、リンク色を変える必要がありますが、
Yahoo
や
Google
のように、通常はあくまで青色の下線付きが基本で、ページを見る側もそれに慣れています。
下線の消去は掲示板デザインをスタイリッシュにするための一つの手法ですが、リンクの場所がわかりにくくなってしまう場合もあります。リンクをカスタムするスタイルシートは多少ややこしいこともあるので、必要かどうかを良く考え、管理者メニューでの色変更で十分な場合には無理にスタイルシートを使う必要はないでしょう。
スタイルシートの設定方法
A:link { color: #0000ff;【クリック前のリンクの色】 text-decoration: none 【下線を消す】 } A:visited { color: #ff00ff;【クリック済みのリンクの色】 text-decoration: none 【下線を消す】 } A:active { color: #00ff00;【クリック時のリンクの色】 } A:hover { color: #ff0000;【マウスカーソルを乗せているときのリンクの色】 text-decoration: none【下線を消す】 background-color : #ffffff;【リンクの背景の色】 } ※【 】と、この文章は必ず消してください。 以上がリンクをカスタムするスタイルシートです。 メモ帳などにコピーして、カラーコードなどを好きな色に変更して使ってください。 スタイルシートでのリンクのカスタマイズは 1.クリックしていない状態(A:link) 2.クリックした後の状態(A:visited) 3.クリックした瞬間の状態(A:active) 4.マウスカーソルを乗せている状態(A:hover) この四種類を設定します。 (A:active)は省略しても構いません。 下線残す場合には text-decoration: none を全て消してください。
参考リンクとフリーソフト
参考リンク
・
リンクの文字色やリンクスタイルを指定する - スタイルシート
・
スタイルシート[CSS]/リンク - TAG index
・
一時間で作るホームページ-HTML・CSS用カラーコード-
・
カラーチャート/Web Safeカラー 216色 - TAG index
フリーソフト
・
RGB Get
(カラーコードの作成や、モニター画面上の色からカラーコードを取得することもできます)
・
Color Master
(好きな色のカラーコードを簡単に作成できます)
トップページに戻る