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

はてなダイアリーガイド

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

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

 | 

1902-01-01草稿「キーワードの見栄えだけ変えてみよう」

キーワードの見栄えだけ変えてみよう

やり方はリンクの下線を消してみるや、文字や文字背景の色を変えると同じです。

キーワードリンクも「リンク」なので、スタイルシートやテーマで指定された「リンクの見栄え」が反映されていきます。だからキーワードリンクだけの指定がないテーマでは、自分が張った普通のリンクとキーワードが区別がつかなくなってしまうことが起こります。そこで指定を追加してやります。

ちょっと仕組みのお話。はてなダイアリーのキーワードリンクには、自動的にすべて「keyword」というクラス名がついています。日記のソースをのぞいてみると、キーワードの部分は

<a class="keyword" href="/keyword/%a5%b9%a5%bf%a5%a4%a5%eb%a5%b7%a1%bc%a5%c8">スタイルシート</a>

のように、class="keyword"が入っているでしょう。これのおかげで普通のa要素(リンク)と区別して、違う見栄えが指定できます。

リンクはa(リンク全部)、a:link(通常のリンク)、a:visited(訪問済みのリンク)、a:hover(ポインタで触れた時のリンク)、a:active(クリックした瞬間のリンク)といったセレクタで指定していきますが、キーワードリンクはそれに「.keyword」を追加して、

  • a.keyword
    • キーワードリンク全部
  • a.keyword:link
    • リンク中の(通常の)キーワードリンク
  • a.keyword:visited
    • もう閲覧したキーワードへのリンク
  • a.keyword:hover
    • ポインタで触れた時のキーワードリンク
  • a.keyword:active
    • クリックした瞬間のキーワードリンク

といったセレクタを使って、指定していくことができます。

  • 【補足】はてなダイアリーから「はてなグループ」のキーワードにリンクするキーワードリンクは、「okeyword」というクラスになります。「.keyword」を「.okeyword」に変えればOK。

下線を点線にしてみる。

はてなのデフォルトテーマ「Hatena」(http://d.hatena.ne.jp/theme/hatena/hatena.css)ではキーワードに

a.keyword {
 color: black;
 text-decoration: none;
 border-bottom: 1px solid gray;
}

という指定がされています。 「border-bottom: 1px solid gray;」というのは、『下の枠線は、太さが1ピクセルで実線で色がグレー』ということになります。ちょっと点線にしてみましょう。

設定画面のスタイルシート欄に

a.keyword {
 border-bottom: 1px dashed gray;
}

と書くと、「スタイルシート」のように点線(ダッシュ)になります。


リンクの見栄えを変えてみように戻る ← | →キーワードのリンクを目立たなくさせてみように進む

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

 | 

ホームページ制作