ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1902-01-00草稿「リンクの見栄えを変えてみよう」

リンクの見栄えを変えてみよう

ここでいうリンクは、文章中のリンク文のことです。

はてなダイアリーガイド」や「http://d.hatena.ne.jp/」、「id:hatenadiary」といった文字列の見栄えを変えてみましょう。

リンクはテーマを使ってる日記では「テーマで指定された」見栄えになっています。テーマ“なし”の日記では「読む人のブラウザが設定した」見栄えになっているでしょう。

リンクのセレクタ

リンクはブラウザでの使い方に合わせた、「定義済みクラス」という特別なクラスが使えます。普通のクラスと違って「.」のかわりに「:」を使うのが注意点です。

  • a
    • リンク全部(リンクの終点である、いわゆるアンカーも含む)
  • a:link
    • リンクの始点となる通常のリンク
  • a:visited
    • もう閲覧したページへのリンク
  • a:hover
    • ポインタで触れた時のリンク
  • a:active
    • クリックした瞬間のリンク

必ずしもすべて指定する必要はありませんが、a:link(通常)とa:visited(訪問済み)はわかりやすく違う方がよいでしょう。

  • 【注意】記述する順番は、上の順番通りでないと、「訪問済み」より「通常」が優先されて、結局全部「通常(未訪問)」のように見えてしまったりします。

下線を消してみる

多くのブラウザでは、リンクの下に下線が出る設定になっています。これを消してみましょう(消さなくてもいいけど)。設定画面のスタイルシート欄に

a {
 text-decoration: none;
}

で下線が消えます。

訪問済みのリンクだけ消したいというようなときは、セレクタをa:visitedに変えて

a:visited {
 text-decoration: none;
}

とするだけです。

Hatenaテーマのキーワードリンクのように、テーマで下線がborder(border-bottom)を使っている場合は

a {
 border: none;
}

とします。

文字や文字背景の色を変える

色指定の説明自体はごく簡単なHTMLの説明 - 色の値、色選びはZSPC Super Color Chartなどをご覧ください。(ともに外部サイト)

色は「color」というプロパティです。設定画面のスタイルシート欄に

a:link {
 color: #ff3462;
}

のように書くと、リンクが「はてなダイアリーガイド」のように色が変わります。

a:visited(訪問済みリンク)は、少し鈍い色や目立たない色にするのが一般的でしょう。

ポインタでリンクにふれたとき(a:hover)の背景の色を変えてみましょう。プロパティは「background-color」を使います。

a:hover {
  background-color: #ffff00;
}

のように書くと、「はてなダイアリーガイド」のように文字の背景に色がつきます(本当はポインタでふれたときだけ)。

追記

他にもa要素(リンク)に適用できるプロパティ指定はなんでもできるわけですが、一般的にはこんなところでしょうか。もっと凝りたい場合はとほほのスタイルシート入門などで探してみてください。未対応ブラウザの多いプロパティにはご注意を。


| →キーワードの見栄えだけ変えてみように進む

sugiosugio2004/06/16 08:24このガイドを読んで疑問の残った方やご指摘のある方、こちらにコメントをお願いいたします。

moonygirlmoonygirl2005/05/26 14:34リンクの下線を表示させるにはどうすればよいのですか。

sugiosugio2005/05/26 20:18ひとつは
text-decoration: underline;
という指定があります(どこに対する指定かという、セレクタは省略して説明しています)。文字色と同じ下線がつくと思います。
線の色や太さ、点線か実線かなどを指定出来るのは「border」で、例えば太さ1ピクセルのグレーの実線の下線では、
border-bottom: 1px solid gray;
のように指定します。
ボーダーについては色々な値が指定できるので
http://www.tohoho-web.com/css/reference.htm#border-bottom
をご覧ください。
これをaやa:linkといったセレクタに指定していくわけですが、日記の中の一部のリンクにだけ指定をしたい場合は、はてなダイアリーガイド「CSSセレクタ - 日記1日分」でセレクタを調べられると参考になる思います。↓
http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%a2%a5%ea%a1%bc%a5%ac%a5%a4%a5%c9%a1%d6CSS%a5%bb%a5%ec%a5%af%a5%bf%20%2d%20%c6%fc%b5%ad%a3%b1%c6%fc%ca%ac%a1%d7?kid=67372#b

moonygirlmoonygirl2005/05/27 15:32ありがとうございました。

nishiotonishioto2005/06/08 11:04リンク色指定例の
a:link {
color: #fg3462;
}
だと、色コードが認識されません。"g"はないですよね?

sugiosugio2005/06/14 17:05ご指摘ありがとうございます!#ff3462に修正しました。

kitahaaoikitahaaoi2008/06/16 01:44日記の記事中の外部リンクだけ変えたいときは…どうしたらいいのでしょうか?
本当に初歩的な質問でごめんなさい。
どうしてもわからなくてよろしければご回答よろしくお願いいたします。

sugiosugio2008/06/16 02:27「外部リンク」を表すクラスのようなものは無いんです。記事の文中のリンクということで「div.section p a」ぐらいまでは絞り込めると思いますが、キーワードリンクなども一緒に影響を受けると思いますので、それはまた「div.section p a.keyword」等を指定しなおす手間が必要になるかもしれません。

kitahaaoikitahaaoi2010/06/16 01:13お礼、ずいぶんおそくなってしまいました。どうもありがとうございます。いまだに「div.section p a」などどう指定していいか全然わからないので、できる範囲でゆっくり試してみようと思います。

 | 

ホームページ制作