映画ブログ、ネタバレを表示ボタン作成2(追記機能じゃないよ)

映画ブログ、ネタバレを表示ボタン作成2(追記機能じゃないよ)

またかよ…
ですよね。多分。


「ネタバレを表示」ボタン2


「ネタバレを表示」ボタン、採択バージョンはこちら↓


参考資料は、こちら↓

「表示/非表示」を切り替える2つの方法(AllAboutデジタル)




visibilityプロパティとやらを使ってみる


サンプルページ;
映画、「バニラ・スカイ」感想+ネタバレ追記



「ネタバレを表示ボタン」の下の部分が空白なのがわかりますか?
これが昨日の記事との違いです。昨日の「ネタバレを表示」ボタンは、display機能とやらで、この空白を詰めてくれるんですね。visibilityの機能では、表示していないだけなので、ネタバレ本文が埋まる予定の部分がひろーく空白となっています。ぽちっとするとネタバレ本文が表示されます。用途によって使い分けするらしいですよ。
ネタバレ表示ボタン2

ネタバレ本文の最後尾に、「非表示にする」ボタンをつけました。昨日と同様、意味ないです。備忘録です。
ネタバレ非表示ボタン2-1

そして、「非表示にする」ボタンをぽちっとすると、空白に戻ります。楽し~い。って私だけか…
ネタバレ非表示ボタン2-2


コード


<br />
<style type="text/css">
   div#netabare { visibility: hidden; }
</style>
<input onclick="document.getElementById('netabare').style.visibility = 'visible';" type="button" value="ネタバレを表示する" />
<br />
<br />
<div id="netabare">

~ネタバレの本文~

<br />
<input onclick="document.getElementById('netabare').style.visibility = 'hidden';" type="button" value="ネタバレを非表示にする" /></div>
<br />

メモ


- これは映画の「ネタバレ」向きではない。
- "netabare"の部分がdiv名(ID)


雑談


え~。この2つを試してみたかったので、ネタバレ記事を書きました。
書いてみて思ったのは、思ったより満足感を得られるということです。

なんというか、この年になってくると、「繰り返し観るのは、あと1回ずつが限界」的な予感がしてきます。未練たらしい人間なので、きっちりメモして、しっかりお別れをする。(←ちょっと違う…)

自分が感じたことをいつでも振り返る、いい備忘録になりますな!っと思ったとこまではいいのですが、作文は今だに苦手で、内容は微妙。基本的に「非表示」で隠しておくに限ります。

Comment

コメントを投稿する
記事: 映画ブログ、ネタバレを表示ボタン作成2(追記機能じゃないよ)

お気軽にコメントをどうぞ~。

  非公開 (管理人のみ閲覧可能)
 

Trackback