TOP > Expression Web & FrontPage Users Forum
[リストへもどる]
一括表示
タイトルナビゲーションのリンクの色設定方法
記事No4
投稿日: 2008/01/15(Tue) 17:59
投稿者坪本 毅美
 はじめて投稿いたします。「Express Web 標準ガイドブック」を読ませてい
ただきました。少ないページ数で全般的な内容を要領よくまとめられていて、大変
勉強しやすくなっていると思いました。ただやはり初心者にとってはもう少しぺーじ
を割いていただきたい項目がかなりありました。
 そのなかの1つでナビゲーションリンクの色の設定でa:visitedの書式が略されて
いました。どのように書けば機能しますか、お教えいただければ、幸いです。

タイトルRe: ナビゲーションのリンクの色設定方法
記事No5
投稿日: 2008/01/15(Tue) 18:17
投稿者wanichan
本を購入いただき、ありがとうございます!

a:visitedが略されている部分というのは、具体的に何ページのことでしょうか?

本書130ページには、
#navigation a というCSSセレクタの作成方法が書かれていますが
その部分でしょうか?

#navigation a にすると、とにかくリンクのスタイルを一括して設定するということになります。
未訪問リンク(a:link)と、訪問済みリンク(a:visited)と分けたい場合は、それぞれ分けてCSSセレクタを作成する必要があります。

もし、未訪問と、訪問済みのリンクスタイルを分けて作りたい場合は、

未訪問リンクのCSSセレクタ名
#navigation a:link
訪問済みリンクのCSSセレクタ名
#navigation a:visited

[新しいスタイル]ダイアログボックスにて、それぞれセレクタのボックスに入力して、スタイルを設定してください。

ただし、リンクに触れたときのスタイルの設定部分となる
#navigation a:hover というCSSセレクタは、最後に記述しないとダメです。

どうぞよろしくお願いします。

タイトルRe^2: ナビゲーションのリンクの色設定方法
記事No6
投稿日: 2008/01/16(Wed) 11:35
投稿者坪本 毅美
お忙しいところコメントいただき有難うございました。そこで実際に以下のように
cssセレクタを設定しましたが、結果はナビゲータのすべてのリストがa:visited<br>のbackground-colorの色で塗られてしまいます。
#top_nav a{
color: #000000;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #660066;
background-color: #CCFF33;
}
#top_nav a:link{
text-decoration: none;
background-color: #CCFF99;
}
#top_nav a:visited{
color: #000000;background-color:aqua;
}
#top_nav a:hover{
color:#fff;
text-decoration:none;
background-color:orange;
border:1px solid #f93;
}
お手数をおかけしてすみません。

タイトルRe^3: ナビゲーションのリンクの色設定方法
記事No7
投稿日: 2008/01/16(Wed) 12:58
投稿者wanichan
個人的に、トップのナビゲーションバーでの横並びのリンクの部分で、
未訪問と訪問済みのリンクのスタイルを分ける必要性はないと思っていますが。。。

そのために ここでいう #topnav a というCSSセレクタというわけです。

冗長している記述になってるような気がします。

実際、#topnav a のCSSセレクタに記述されている
background-color: #CCFF33;
という部分が、#topnav a:link や #topnav a:visited セレクタによって
相殺されるため、無意味になってしまっています。
CSSの順序として最後に記述したのが強くなってしまいますし。

この記述は、Expression Webによるものではなく、
ご自身で直接入力されたものもありますよね。
CSSの記述を整理する必要があります。

トップの横並びのナビゲーションバーにおいて、あえて
未訪問リンクと訪問済みリンクのスタイルを分ける理由を教えてください。
まあ、メインコンテンツ部分においてのそれらのリンクスタイルを
分ける必要はありますが…。

どうぞよろしくお願いします。

タイトルRe^4: ナビゲーションのリンクの色設定方法
記事No8
投稿日: 2008/01/16(Wed) 13:37
投稿者wanichan
a:visitedのbackground-colorの色で塗られてしまう件について
書き忘れました。すみません。

リンク先はどうしていますか?
javascript:;
にしていたら、必然的に「訪問済み」になります。

普通に他のWebページにリンクしていたら、閲覧履歴がない限りは
未訪問リンクスタイルになります。
未訪問リンクスタイルを反映させたい場合は、ブラウザの履歴のクリアを
する必要があります。

どうぞよろしくお願いします。

タイトルRe^5: ナビゲーションのリンクの色設定方法
記事No10
投稿日: 2008/01/16(Wed) 17:04
投稿者坪本 毅美
 有難うございました。履歴を削除の上、ブラウザに表示しましたら、確かに
1度はリンクカラーからVisitedカラーになりましたが、2度目以降はVisitedカラー
のままで元に戻りません。リンク先はすべてHTMLファイルです。
 なにかお気づきの点がありましたら、アドバイスいただければ、幸いです。

タイトルRe^6: ナビゲーションのリンクの色設定方法
記事No11
投稿日: 2008/01/16(Wed) 17:17
投稿者wanichan
リンク先がどうなっているかというのが問題です。
これだけでは情報が不十分です。

2度目以降がVisitedのままで変わらないというのはどういったことでしょう。
2度目って、何を2度行ったのでしょうか。
結局どうしたいのでしょうか?
ちょっとご質問の意図がつかみきれてません。すみません。

結果だけお知らせいただいても、目的がわからないので
こちらとしては雲をつかむ状態になっています。

まず、何をしたいか、ターゲットを整理させてください。

どうぞよろしくお願いします。

タイトルRe^6: ナビゲーションのリンクの色設定方法
記事No12
投稿日: 2008/01/16(Wed) 18:17
投稿者Elfaria
横から失礼します。
>履歴を削除の上、ブラウザに表示しましたら、確かに1度はリンクカラーからVisitedカラーになりましたが、2度目以降はVisitedカラーのままで元に戻りません。

これはVisitedの仕様ですね。Visitedカラー=訪問済みカラーなので。
もう一度履歴を削除すれば、リンクカラーになると思います。

たとえばメールでいう未読か既読かを判別するのと同じだとおもいます。
リンクカラー=未読 Visitedカラー=既読 みたいな感じで。
履歴クリアをすると訪れた履歴がクリアされるので、リンクカラーになります。

タイトルRe^7: ナビゲーションのリンクの色設定方法
記事No13
投稿日: 2008/01/17(Thu) 10:51
投稿者坪本 毅美
 大御所様、Elfaria様、貴重なコメントを有難うございます。なにぶんにも
自分のしていることが全体のどのあたりなのかもつかめない有様で、満足な
説明ができないのですが、ナビゲーションからリンクを張って普通のHTMLファイル
を表示するHPの作成に挑戦している、という作業過程に生じた問題です。
リンクボタンをクリックしたときにそこに既視色を設定してやり、現在の表示ページ
とリンクボタンとの対応を視覚的に確保したいだけです。
 コメントをいただいて、履歴を削除したうえ、ブラウザ表示してみました。出発点
では正しくlinkで定義した色が表示されますが、それをクリックすると既視色に
変わります。次に別のボタンをクリックすると、それも既視色にかわりますが、前
のボタンの色が既視色のままで、もとにもどりません。
 Elfaria様が言われるようにボタンクリックのたびに履歴をクリアしてやれば良い
のでしょうが、そのコードをどう書くのかわかりません。
 駄々っ子のようで申し訳ありません。

タイトルRe^8: ナビゲーションのリンクの色設定方法
記事No14
投稿日: 2008/01/17(Thu) 11:06
投稿者wanichan
えーっと、私は「大御所」様ではございません。
これは投稿数に応じて表示されるレベルです。投稿が少なければ「一般人」になります。

さて、本題に入ります。

おそらく、ご自身のやりたいことをどう表現していいのかわからない状態、ということですよね。
私なりに洞察させていただきますと、つまり、クリックした部分が「Visited」にするとかではなく、「今見ているページ」のリンクをハイライトしたい、ということではないでしょうか?
もしそうでしたら話が変わってきます。

私のサイトでは、うぇぶわーるどのコンテンツサイトにおいて
タブの「web」が強調されています。
そういうことですか?

それだったら a:visited は使わないほうがいいです。
別の方法で実装します。

別にJavaScriptとかを記述しなければいけないというものではないです。
CSSでできますから。

どうぞよろしくお願いします。

タイトルRe^9: ナビゲーションのリンクの色設定方法
記事No15
投稿日: 2008/01/17(Thu) 13:49
投稿者坪本 毅美
 失礼しました。おっしゃるような機能があればそれで目的は達成ですが、ご著書の中では触れられているのでしょうか?
 お手数ながらお教えいただければ有難いです。

タイトルRe^10: ナビゲーションのリンクの色設定方法
記事No16
投稿日: 2008/01/17(Thu) 14:11
投稿者Masa
> 坪本毅美さん
 ざっとやりとりを拝見させていただきましたが、そもそも 坪本毅美さんがやられたいことは何なのでしょうか?
 ご自身が
> 自分のしていることが全体のどのあたりなのかもつかめない有様で、
> 満足な説明ができないのですが
と書かれておりますが、全体がどうとかいう以前に、まずはご自身が何をされたいか、を書いていただけませんと、適切なコメントが行われないように思われます。
 そして、そのことをwanichanさんが再三書かれているにも関わらず、ご自身はそれに対する回答を行わず、ご自身の質問のみを繰り返されていますよね? しかも、挙句の果てには、著書の中に書かれているかどうかを求められる始末。そういった状況でvisitedがどうこうとかいうことを話していても、坪本毅美さんの求める結果にはたどり着かないのではないでしょうか。

 まずは、ご自身がされたいことについて、一度整理されましたうえで、きちんと背景を(説明できる範囲内で)説明されてみてはいかがでしょうか?

タイトルRe^11: ナビゲーションのリンクの色設定方法
記事No17
投稿日: 2008/01/18(Fri) 11:41
投稿者wanichan
ここで一旦、まとめます。

まず、坪本さんが実際になさりたいことと、これからやろうとしていることが異なっています。

物事にはすべて、必ず「目的」があって、その「目的」に基づいて「実装」します。
しかし実際、「実装」ばかり先走って、「目的」からどんどんかけ離れてしまっている、ということです。
順序を逆にしたらおかしくなりますので注意してください。

坪本さんが頭の中で思い描いていらっしゃることは、以下の通りですよね。

・閲覧者が「今、どのページを見ているのか?」というのを明確にするために、ナビゲーションを工夫したい
・そのために、今見ているページのコンテンツナビを強調したい

ということですよね。

しかし、「今見ているページ」と、「a:visited」はまったく別物です。
a:visitedというのは、閲覧者が過去に見たページを判別するものであり、「今見ているページ」を判別するためのものではありません。
その部分をごっちゃにして考えているのではないでしょうか?

したがって、この件において、「a:visited」のことは忘れてください。
つまり、CSSファイルで記述されている、#top_nav a:visited や #top_nav a:link のCSSセレクタ部分は「削除」してください。

その代わり、「今見ているページ」を強調するためのスタイルは別に作成します。
IDスタイル(CSSセレクタの先頭に#がつくもの)でいいのではないでしょうか?

私のサイトの場合、そのCSSセレクタを「#thispage」にしています。
そして、強調したいリスト項目(つまり、liタグ)にIDスタイルとして「#thispage」を適用しています。

ちなみに、この方法は、著書には言及されていません。
(あくまで機能解説書としての位置づけであり、チュートリアルではないので…)

どうぞよろしくお願いします。

タイトルRe^4: ナビゲーションのリンクの色設定方法
記事No9
投稿日: 2008/01/16(Wed) 13:42
投稿者坪本 毅美
有難うございました。私の勉強不足で、cssについてもろくにわかっていません。
初心の初心というところです。基本からやり直さねばならないことは分かっている
つもりですが、安易に既視のリンク色を設定することができるように思っておりま
した。
 大変失礼いたしました。