はてなダイアリーで、背景色と同化させてネタバレを隠すとき、キーワードもちゃんと隠すには
よくネタバレを隠す方法で文字を反転させる方法がよく使われる。たとえばこんな感じ。
↑ここをマウスでドラッグすると反転表示し、読めると言うわけだ。実は携帯ではてなを見ると、
- 隠したい部分が全部丸見え
- まったくその部分を読めない
- 読むには非常に手間がかる
などというどれかになっちゃったりするのだが、そのあたりはその他の方法、Javascriptを使う方法などとそう変わらないし、CGIを使う方法、たとえばはてなだと「続きを読む記法」を使うとその日、その記事固有のリンクでやってくるとやっぱり丸見え、などということを考えるに、この方法はかなり手軽でなかなか有効な方法としてかなり使われている。
が、ここはてなダイアリー、はてなグループだと、キーワードが自働リンクされる。これがはてなダイアリーの最大の特徴と言ってもいいのだが、そうすると、ネタバレの部分にキーワードが点在して浮き上がる、なんてことになってしまう。
たとえて例示するなら、以下の感じだろうか。
今日はマリア様がみてるというところで妹オーディションが開かれ、そこにロサ・カニーナが出てきて言いました「どうぞご利用ください。」
（マリみてのキーワードたどってきた方すんません。あと言葉に特に意味なし）
自分のところはすでに対策していあるので対策が聞かない方法でやっている。また、不適切なタグを使って、さらにまたここでは背景に微妙に色がついているので、白で消して微妙に浮き出るようにします。
キーワードと言うのはやっぱり鍵になる言葉がつけられているわけで、ネタバレを隠していても、このキーワードが浮かび上がると、それまでの展開を読んできて・見てきている人が見るとなんとなく想像がついてしまったりする。あとちょっと見かけ的にあれだなぁ、と言うこともあったりする。
じゃ、どうするか、というと、前よくあったtips、「はてなでキーワードを目立たなくする方法」と基本的にはいっしょであるが、やり方はスタイルシートを使ってやる。一度瀬ってしてしまえば大して手間はかからず、簡単にできる。
設定のスタイルシート欄に
/*ネタバレを隠す。バックとフォントを白に*/
.netabare
{
color: white;
background-color: white;
margin-top: 3px;
margin-right: 10px;
margin-bottom: 3px;
}
/*ネタバレ内部のリンク、キーワードを白く*/
.netabare a:link
{
color: white;
}
.netabare a:visited
{
color: white;
}
.netabare a:hover
{
color: white;
}
とかかいて、（a:hoverはいらんかも）
<div class="netabare"> ネタバレの内容 </div>
とかやるのである。すると、先ほどの例では以下のように表示されます。
下線などを消したければそのように記述（text-decoration: none;とか）すれば消すことが可能。だけれど、反転させるとどれがキーワードかわからんくなるので、自分はした線だけ残るようにしている。
また、<span class="netabare">ネタバレの内容<span>とかすることで段落の途中でもが可能である。
さらに、このようにスタイルシートで一括して設定することを使えば、このように背景を同化してネタバレを隠すことを実現するほかの方法としてよく使われる
- フォントタグ(<font color="white">)を使う方法
- はてなのjavascriptを使った入力支援で入る<span style="color:#FFFFFF;"></span>
と比較して、リンクの部分まで制御可能というほかに、デザインを変えたときにスタイルシート欄をちょっちょっといじるだけで（自分が上に書いたスタイルシートだと背景色まで白に変えてしまっているので、実はこのまんまでも）背景色を変えたりするときにうまく対応できないのでこういう方法を使うほうがいいと思う。
さらに言うとfontタグをつかって背景と同化させると、携帯で見ると反転する方法がないので（あっても簡単には使えないので、たとえばコピーモードにするなど。）見れなかったりするから、無視されるぶんスタイルシートを使っていただいたほうが、見ているほうとしてはありがたい。
もっというと、このネタバレ隠しに限らずだが、携帯から見られることがあるブログツールの場合で、fontタグを使って文字の装飾をすると、携帯電話から見るとまったく見えないことがある。なので、個人的には文字装飾にfontタグは使って欲しくない。これはどういうことかというと……。
たとえばブログツールの標準テーマ（スキン）などは、今はほとんどスタイルシートによって実現されている。が、携帯電話だと、うまくすれば背景色を認識するものがたまにあるようだが、Operaやjigブラウザなどある程度高性能の携帯用ブラウザならある程度だが、普通に見れるブラウザだと大抵スタイルシートに対応していない。だけれど、大抵の場合はfontタグは一部で利用できる。
そんな場合に、テーマで背景が暗い色、黒とかの背景があるとして、そのとき、文字を目立たせるために黄色なんかで文字の色をつける。すると黒地に黄色だから、非常に目立つのだが、そんなところを携帯電話で見るとどうなるかというと、携帯電話では
- スタイルシートは解さないから背景は白になる
- フォントタグは解するので文字は黄色。
そうなると、もはや読めない。そして、重要な部分を強調しようとしてこれを用いるわけで、そうなると重要な部分が読めなくて非常にもどかしい思いをすることになる。もーこのやろおう、という気分になるのである。悔しい。
こういう場合はstrongタグを使い、スタイルシートであらかじめstrongタグに対して黄色を指定しておけば、携帯電話はスタイルシートを解さないものは無視するので通常に読むことができ、ちゃんと解するものは背景色までちゃんとしてくれるので問題ない。
ここら辺、はてなアンテナやはてなRSS、はてなブックマークを携帯から見ると携帯向けにしてくれる仕組みがあるが、fontタグまでは取り除いてくれないのである。通勤ブラウザにはこのようなタグを取り除く機能があったりするけれど……。
などと書いてみるよっぱらいな夜更け。つうかこれを書くために実質初めてfontタグを使った……。
＜追記・翌日 ちょっと文章が長ったらしくて読みにくいので箇条書き化などちょっとリライトしました＞
