CSSだけで特別な人に特別なページを見せる方法。

某G社のミスのせい*1でアクセスが増えてる間、リンクたどられてアイタタタな感じだったので、僕以外の人にはサイドバー見れないように一時的にちょっと隠してた。落ち着いたので、ちょっと整理してみる。

自分以外の人
- サイドバーがなるべく見えないように。(見られてもいいけど、なるべく多くの人が見ないように)
- サイドバー以外はちゃんと見えるように。
- FirefoxとIE以外は知らん。(確認できないし)
自分
- サイドバーが見れるように。
- ログインなしでも。(ここ重要。常時ログインしてる使い方してないので。)
- Firefoxだけで使えればいい。
はてなダイアリー内ではjavascriptやcookie使えないので、CSSだけで。

自分だけが訪問済みになってるリンクを使ってCSSでいろいろやればいんじゃね？

<a class="ownerlink" href="http://d.hatena.ne.jp/kou21058/designdetail"></a>
<!-- ↑自分だけなリンク -->
<div class="owneronly">
	<!-- この中が他の人は非表示になる -->

.owneronly {
	display: none;
}
a.ownerlink:visited + .owneronly {
	display: block;
}

自分だけのリンクを踏むだけで、自分だけの世界へ。
ログインしてなくても、アドレスバーに直接URL入力すればOK!
踏んでみる? → http://d.hatena.ne.jp/kou21058/designdetail

逆バージョン。注意書きいらね。

<a class="ownerlink" href="http://d.hatena.ne.jp/kou21058/designdetail"></a>
<div class="headercomment ownerhidden">
	<h2>注意書きのようなもの。</h2>

a.ownerlink:visited + .ownerhidden {
	display: none;
}

履歴を消すと他の人扱い。
http://d.hatena.ne.jp/…/editの方がいいかな。どっちでも同じか。
CSS解釈しないブラウザとかだと普通に見えると思う。
IE7だとどーなんだろ。隣接セレクタ解釈する*2って話だけど。[そのうち試す]
はてぶが嫌いな人は、

<a class="viplink" href="http://b.hatena.ne.jp/hotentry"></a>
<img class="viponly" src="グロ画像">

ってやってみるといいかもしれない。

この方法でGoogleの広告消しても大丈夫かなぁ。どうせ僕が見ても、クリックできないんだし。
ってか、そもそも、

品質に関するガイドライン - 具体的なガイドライン

隠しテキストや隠しリンクを使用しない。

これに引っかかりそうな気がしないでもない。

5.7 隣接セレクタ（Adjacent sibling selectors）

class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

*1:なんだこの書き方。