ネタバレ表示ボタン

このページの記事目次 (タグ: ネタバレ表示ボタン の検索結果)

映画ブログ、ネタバレを表示ボタン作成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回ずつが限界」的な予感がしてきます。未練たらしい人間なので、きっちりメモして、しっかりお別れをする。(←ちょっと違う…)

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

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

まだはまってんの?
と、自分で自分に突っ込みを入れながら、記事を書かずに「ネタバレ表示」ボタンを設置してみました。


「追記」機能の問題点


Bloggerの場合は、どこでも好きなところに「追記」区切りを入れられて便利です。でも「追記」だと、個別記事の画面で追記部分を非表示にできないのです。これは、ネタバレ嫌いには大打撃なんじゃないかと。
※私はそれほど嫌じゃないですけれど。

FC2でも同様に、検索などで個別記事へ直接入ると、追記が表示された状態で開いちゃいます。

そこで、積極的に非表示にする方法を探してみました。

参考資料(外部記事);

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




displayプロパティとやらを使う


※参考資料Page 3

サンプルページ;

映画、「クレイマー、クレイマー」感想+ネタバレ追記


記事の本文の後に「ネタバレを表示する」ボタンをくっつけました。ぽちっとすると、ネタバレが表示されます。
ネタバレ表示ボタン1


ネタバレの最後尾に「ネタバレを非表示にする」ボタンをくっつけました。ぽちっとすると、元に戻ります。でもこれ、正直いらないです。うん。洒落。
ネタバレ非表示ボタン1


コードのメモ

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

~ネタバレの内容を書く~

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


メモ


- Bloggerの場合、ネタバレを書くときは、上記をコピペして、HTMLモードに張り付ける。
- FC2の場合、スタイルはテンプレートかCSSに張り付ける。
- 空白マークも大事
- "netabare"がdiv名(ID)
- 当該箇所をデフォルトで表示しておきたい場合は、style部分が不要
- style部分はその内CSSへ書き換える。(当面この状態でいいんじゃ?)

FC2での実験結果↓
日本人感覚が薄れてきてしまった日本人…
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。