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

ガイドトップ　 目次　 索引

■ キーワードのリンクを目立たなくさせてみよう

日記のキーワードを消す方法はいろいろありますので、基本編「文章内のキーワードを消す、編集する」をご覧ください。設定でリンクするスコアを高くする方法もあります。

以下はキーワードリンク自体は残っていて、見た目だけ目立たなくさせる方法です。

• 「キーワードリンクは大歓迎！」
• 「でもキーワードを目立たせる必要は感じない！」

といった日記に向いていると思います。いきなりここを見る方もいると思いますので、内容は前述とちょっと重複します。

■ 文字を黒くする

テーマを使っていると、普通のリンク文と同じ文字色になってしまうことがあるので、例えば黒くしてみます。

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

a.keyword:link {
 color: black;
}

と書くと黒くなります。

必要に応じて「a.keyword:visited（訪問済みキーワード）」なども追加して指定します。

a.keyword:link,a.keyword:visited {
 color: black;
}

他の色にしたい時は文字や文字背景の色を変えるのやり方と同じです。セレクタを「a」から「a.keyword」に変えてください。

■ 枠線や下線や背景色の指定をなくす

これもテーマ等で、リンク部分に枠線や背景色が指定されていて、必要以上に目立ってしまう場合の対処法です。

• 枠線の指定をなくす場合（枠線によって下線が引かれている場合もあります）

a.keyword {
 border: none;
}

• 下線の指定をなくす場合

a.keyword {
text-decoration: none;
}

• 背景色の指定をなくす場合

a.keyword {
 background-color: transparent;
}

必要に応じてa.keyword:link（未訪問キーワード）や、a.keyword:visited（訪問済みキーワード）の指定などを追加してみましょう。

なくさないまでも「少し目立たなくさせる」場合は、文字と同じように枠線（border）や背景色（backgound-color）に色指定をしていくといいでしょう。

• 薄いグレーの下線（1ピクセルの実線）をつける

a.keyword {
  border-bottom: 1px solid #cccccc;
}

合わせ技で、いろいろ工夫してみてください。

■ ポインタで触れたキーワードを目立たせる

完全に目立たなくなったキーワードも、ポインタで触れると表示が変わるようにすれば、見当をつけて探す役に立ちます。またキーワード同士がくっついて、どこで区切れているのかわからないときがありますが、ポインタで触れたキーワードだけ目立たせればわかりやすくなるでしょう。

セレクタは「a.keyword:hover」を使います。例えば

a.keyword:hover {
 color: #2c2400;
 font-style: italic;
 font-weight: bold
}

のようにすると、「はてなダイアリーガイド」のように（本当はポインタでふれたときだけ）目立つようになります。

■ 訪問済みキーワードを目立たせる

キーワードページからあなたの日記にやって来た人は、たいていキーワードを探します。そのときキーワードがあまりにも目立たないと見つかりにくいので、訪問済みキーワードリンク（a.keyword:visited）を目立たせておくと探しやすくなります。←（追記）キーワード画面から訪れた日記ではそのキーワードがハイライト表示されるようになったので、このテクニックは必要なくなりました。一応参考に残しておきます。

a.keword:visited {
 color: black;
 background-color: #ffff00;
 border-bottom: 1px solid gray;
}

のように書くと、「はてなダイアリーガイド」のように目立ちます。そのキーワードを訪問していない（ブラウザの履歴に残ってない）人には、目立たないままです。色選びはZSPC Super Color Chartで文字色と背景色を選ぶなどしてみてください。

（追記。ご参考までに）

span.highlight {
 color: black;
 background-color: #ff66ff;
 border-bottom: 1px solid black;
}

のようにすると、検索結果や、キーワード画面から訪れた時のハイライト表示の見栄えを変えられます。

キーワードの見栄えだけ変えてみように戻る ← |