The other way round

新テンプレ製作中です ご迷惑おかけします

ネタバレを防ぐ「コピー反転で読むテキスト」はスマホでは読めない

昔よく見かけましたよね。
映画のレビューサイトやなんかで、あらすじのネタバレを防ぐために

「ここから先はネタバレです。自己責任でどうぞ。ドラッグ選択すると読めますよ。」

みたいなの (´・ω・`)
これはこれで機転のきいた良い手法ではあるのですが。
いかせんスマートフォン・タブレットで反転はできません(笑)
さぁ困った。どうしよう。

というわけで代替案。
「折りたたみ」です。


個人的に映画レビューとか大好きなんです。
映画・ドラマを問わず、「レビュー」が好きです。
通販商品なんかは勢いで買ってしまうこともありますが(大抵失敗する)、ゲームと書籍は絶対レビュー読んでから購入します。
なのでスマホアプリでブーストするメーカーとかタヒねって思ってる ←
ネタバレどんと来い ╭( ・ㅂ・)و なワタクシですので、反転しないと内容が読めないなんてつらーい o(`ω´*)o
というわけでこんなのどうでしょう。

ここをクリック!


これならスマホでも読める。

① Vanilla JSやJqueryのフックアップコード不要
② スタイルシートへの記述不要
③ その代わりイージングアニメーションは付きません(スルスルーっと滑らかに開くアレ)

記事を書く際に一定の記述をすればOKです。
JSフックアップやスタイルシート記述があると、テンプレート変更時にそれらを毎回移植する必要が出てきます。
私のように「この記事でしかそれをやらない」つまり一回こっきり使うだけ、という場合などもこれで十分。


ソースコード雛形

<div onclick="exp=document.getElementById('open-object').style; exp.display=(exp.display=='none')?'block':'none';">
<div style="background-color: rgb(217,229,255); color: rgb(51,51,51); cursor: pointer; padding: 10px 5px; text-align: center;">
ここをクリック!
</div>
</div>
<div id="open-object" style="display: none; margin: 20px auto;">
ここに隠したいテキスト<br>
隠したいテキスト2行目

</div>


編集しやすいようにコードはインデントしていません。
んでこれ「タグ」という呼び方はしませんのでね (´・ω・`)
余談ですけど。

新投稿画面をご利用の方は上記をコピーし、 HTML表示モードに変更してから貼り付け。
そのモードのまま緑色のテキスト部分を変更し、済んだら後はモードを戻し、通常通り記事を作成。
つまりコード内のテキストを編集する際だけはHTML表示モードで。
改行したい文章の末尾には
<br>
と記します。
空白行が必要な場合にも行の数だけ
<br>
が要ります。
旧投稿画面改行の扱いをHTMLタグのみ にされている場合もこちらの方法で。

旧投稿画面改行の扱いを自動改行 にされている場合には以下のコードを。

<div onclick="exp=document.getElementById('open-object').style; exp.display=(exp.display=='none')?'block':'none';"><div style="background-color: rgb(217,229,255); color: rgb(51,51,51); cursor: pointer; padding: 10px 5px; text-align: center;">ここをクリック!</div></div><div id="open-object" style="display: none; margin: 20px auto;">ここに隠したいテキスト
隠したいテキスト2行目
</div>


自動改行の場合はコード内に改行があるとそれも見た目に反映しますので、見辛いですがコード内改行は無しで。
その代わり文章を改行する際に末尾の
<br>
は不要です。

両コード共「2行しか書けない」という意味ではないですよ。
改行の仕方を示すために2行書いただけです ^^;
最初は
編集がめんどくせ
かもしれませんが、テンプレートを変更しても無効化されることがない ので後々の面倒が避けられます。
その点でこの方法がおすすめ。


変更できる箇所

● クリックの背景色及び文字色

background-color: 背景色カラーコード; color: 文字色カラーコード;

例)
背景色 rgb(128,0,128)
文字色 rgb(255,255,221)

ここをクリック!


● 隠される内容の上下空白
デフォルトは20pxです。

margin: 上下空白px auto;

ここで設定しておくと内容の書き始めと書き終わりに空白行を作成しなくて済みます。

あとは各々知識の範疇で色々やってみてください。


まとめ

せっかく良い記事を書いてもスマホやタブレットから読めなければもったいないことこの上ないので、「コピー反転ネタバレ防ぎ」はそろそろお辞めになって。
こういった手法に切り替えて頂けると誰もがちょっと幸せになれます。
時折お邪魔している映画レビューブログさん、是非ご検討ください!!!

「ネタバレは『追記』に書きゃいんでね? (´・ω・`)」
とかは無しで ←←←
関連記事
Tips

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い