20070108
ネタバレボタン
アチコチのサイト様で最近チラホラ見かける『ネタバレボタン』
ほらほらこんな感じ
ネタバレ解除 ←クリックしてみて下さい
なんかこーいう無駄に凝った面白ギミックって、私大好きなんですよねぇ～。
「背景色とテキストの色を同じにして見えなくし、読んでもらう際には反転してもらう」、なーんて今までの常套手段と比べると断然スマートなやり方だと思いませんこと？
そんな訳で紹介しがてら、ウチのサイトにも実装してみました。
この機能はですね、JavaScriptとCSSとDOMを使用しておりまして、いわゆるアレだ、一昔前ならDHTMLなんて呼ばれてた技術を利用しているわけですよ。ですんで動作するには閲覧者のブラウザがJavaScriptの動作を許可している事が前提となり、さらにはDOMがキチンと動作する比較的新しめのブラウザが必要なわけですが…ま、細かい事は気にするまい！最近はホラ、AjaxとかでJavaScriptの動作を前提としたサイトなんかも増えてきてるしね。（ちょっと前まではJSって言うと諸悪の根源みたいなイメージで捕らえられて嫌われてたからなぁ…）
ちなみにそんなあたしはJSが大好きなのさ！ああ大好きだってばさ！！
サンプルソース
まずはメインスクリプトのソース。以下のソースを<head>～</head>間にそのまんまコピー&ペーストで。（勿論外部ファイルにしても桶）
<script type="text/javascript">
<!--
function netabare(id){
if( document.getElementById(id).style.display != "block" ){
document.getElementById(id).style.display="block";
}else{
document.getElementById(id).style.display="none";
}
}
//-->
</script>
<style type="text/css">
<!--
.netabare{display:none;}
-->
</style>
んでお次はhtml文書内に記述する表示部分。
<input type="button" value="ネタバレ" onclick="netabare('netabare01');return false;" />
<p id="netabare01" class="netabare">
ボタンを押すと表示する内容
</p>
青い文字の個所がネタバレテキスト部分となります。心ゆくまでヒミツの文章を書き殴ってくださいませませ。
あ～、ちなみにこの例文では動作のスイッチに<input type="button" />オブジェクトを使用しておりますが、別にコレじゃなきゃ駄目！って訳ではありません。この汎用ボタンは単に"onclick"イベントを起こす為のみの用途で使用しておりますので、画像を使ってもOKですし、適当なタグで括ったテキストで代用しても全然問題ありません。
それとIDに関して！一つのhtmlファイル上で、複数箇所ネタバレボタンを設置する際には、赤文字で記したID部分を設置個所ごとに変更してください。じゃないと一個のボタンで全てのネタバレ個所が表示されてしまう羽目になりますので、特にblogユーザーなどは注意してくださいね。
ちょっと技術的な事
ソースを見てもらえばご理解頂けると思うのですが、つまりコイツはDOMの “getElementById()” を用いて#netabare01セレクタ（＝.netabareセレクタ）のスタイルシートプロパティの値を切り替えている訳ですよ。
細かく説明すると
.netabare { display:none; } ＝ 通常時
↓
ボタンをクリック
↓
function netabare(netabare01)の実行
もしもID"netabare01"に適用されている"style"の"display"の値が"block"ではないならば
真→"display"の値を"block"に上書き
偽→"display"の値を"none"に上書き
↓
.netabare { display:block; } ＝ ネタバレ解除状態
こんな感じですね。
こいつをそのまんま応用してやれば、なんか面白い表現ができると思うんですよね～
例えばですね？絵師様なんかのサイトでエロイＣＧなんかをね？そのまま表示させたらマズイと思う訳ですよ、いろいろと、倫理的に。
そこでコイツの出番。まずはエロイCGの上にCSSで重ねてエロくないCGを表示させておくのですよ（あらかじめそのマスクするCGには"visibility:visible;"というスタイルを設定をしておく）ほんでこのボタンの機能を上に乗せたCGの"visibility"の値を"hidden"に替えるようにしておく訳さ！するとどうだい！ボタンをクリックすりゃマスクしていたCGが消えてエロエロなCGが白日の元に！もう！もうっ！！お子様禁止のこのボタン、これぞ名付けて『大人ボタン』！！！
ま、クリックすりゃ見られるわけだから、抑止力としては屁の突っ張りにもなりゃしませんが、ネタとして面白くないですか？ロールオーバーやなんかは見飽きたし、こんなの面白いと思うんだけどなぁ。
と、発想が貧困な私じゃこんな程度の事くらいしか思いつきませんでした…( ´Д⊂ でも真面目に他にも色々な使い道の可能性があると思うんですよね。誰かなんか考えちおくりよ。そしてこっそりあたしに教えておくれ。パクルからwww
トラックバック
このエントリーのトラックバックURL:
http://magokorokikaku.com/mt/mt-tb.cgi/36