スポンサー広告

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ネットで小説、ブログで小説

ネタバレ防止カスタマイズ(検討途上保存)

「ネタバレ防止カスタマイズ(続きを読むをたたむ~スクリプト無効ユーザー対応つき)」検討経緯保存
《Yahoo!》知恵袋「パーマリンクからアクセスしても、「続きを読む」をクリックしない限り、全文表示しない方法はありますか? 」
10/11時点
「FC2: アカマイ広告上等(何 」
10/12時点
10/13時点
10/14時点
《Yahoo!》知恵袋「PC限定で。javascriptで、【<!--】【// -->】は本当に必要ですか?」adankadan名義

[10/14]

 《Yahoo!》知恵袋:pitt0601サマ。
 下記の回答を書いたのですが、問題があるとの指摘が入りました。
 今、《FC2》の公式企画に参加するために、友人たちとの共作のテンプレートを作っていまして、11月頭までに審査に通るように提出しなければならない、という〆切を抱えています。詳細な検討をする時間がどうしても取れません。
 指摘があったページに解決法もありますので、ご参照ください。


■■■■■■■■以下の回答案は不完全なものです■■■■■■■■■

■重要・アカマイ広告表示のブログでは使用しないでください■

《Yahoo!》知恵袋で、ネタバレ防止カスタマイズの需要をみかけた。

パーマリンクからアクセスしても、「続きを読む」をクリックしない限り、全文表示しない方法はありますか?
映画の感想等を記事にしているので、未見の方のネタバレ防止の為に、全文表示を避けたいのです。


 真っ先に考えるのは、「続きを読む」をJavascriptの「折り畳み」にすればいいのでは?ということ。ただし、これでは<noscript>の人には全文が見えてしまう。そうしたら、<noscript>の人だけ、「続きは下へスクロール」にすれば、「クリックしない限り全文表示しない」という当初の条件は満たさないが「ネタバレ防止の為に、全文表示を避ける」という「目的」はかなうはず。


10/12改定

 「10/11時点の記事(最初に書いた案)」がなんだかダメらしいので。10plateさんのスクリプトをお借りしようと思います。(いたおさん、ご了解ありがとうございました) 
■スクリプトの挿入
以下を</head>のすぐ上に挿入します。

<script type="text/javascript">
<!--
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
//-->
</script>


■「more」部分をカスタマイズ

<!--more_link-->
<p class="entry_more"><a href="<%topentry_link>#more" title="<%template_extend>"><%template_extend></a></p>
<!--/more_link-->
<!--more--><div id="more"><%topentry_more></div><!--/more-->

 例として、公式「business-u1」上記部分を下記に置き換えました。
[試作品]トップページ個別ページ
 テンプレートによって「more」関連のHTMLソースが微妙に違うことがありますので、テンプレートに合わせたカスタマイズが必要になります。
(テンプレート名を出して質問していただければ、対応します)

<!-- ▼★ネタバレ防止★▼ -->
<!--more_link-->

<div id="PlagOpen<%topentry_no>">
<p class="entry_more"><a href="#" title="続きを開く" onclick="showPlagin(<%topentry_no>);return false;">
<noscript>
</a><a href="<%topentry_link>#PlagOpen<%topentry_no>" title="Javascript無効では個別記事頁へ">
</noscript>
Open▽
</a></p>
</div>

<div id="PlagClose<%topentry_no>" style="display: none">
<%topentry_more>
<p class="entry_more">
<a href="#PlagOpen<%topentry_no>" title="続きを閉じる" onclick="showPlagin(<%topentry_no>);">Close△</a>
</p>
</div>

<!--/more_link-->


<!--more-->

<noscript>
<p style="padding:40px 0 400px 0;text-align:center;">↓↓↓続きを読む場合は、下へスクロール↓↓↓</p>
</noscript>

<div id="PlagOpen<%topentry_no>">
<p class="entry_more"><a href="#" title="Javascirpt無効では動作しません" onclick="showPlagin(<%topentry_no>);return false;">Open▽</a></p>
</div>

<script type="text/javascript">
document.write('<div id="PlagClose<%topentry_no>" style="display: none">')
</script>

<%topentry_more>

<div class="entry_more">
<a href="#PlagOpen<%topentry_no>" title="Javascirpt無効では動作しません" onclick="showPlagin(<%topentry_no>);">Close△</a>
</div>
<script type="text/javascript">
document.write('</div>')
</script>
<!--/more-->
<!-- ▲★/ネタバレ防止★▲ -->


※aタグがカラだって言われるんだろーなぁw。

10/13追記

 10/11案がなぜダメかという件、ある方に私信で教えていただきました(ありがとうございます^^……あ、いたおさんではないですので、念のため)。<noscript>は分割していれてはダメなのだそうです。
(「<noscript><div></noscript>なんとか<noscript></div></noscript>」ではだめ)
 実際に、FirefoxでJavascript無効にするとレイアウトが崩れる、とのこと。なのでこの下の10/11案はNGです。(阿狐のバカっぷりを晒すために残しておきますw)
 上記の10/12の分は、スクリプトオフの場合に、「<a ~></a>」という空タグが1つできます。これはW3Cのスタンダードに反しますが、現状のところ、「このブラウザで動かない」「崩れる」という報告は受けていません。(IE,Fx,Operaでテスト)「ネタバレを防止したい」という課題は、とりあえずクリアできるので、もっといい案が出てくるまでは残しておきます。
(なおスクリプトを用いない別の方法が、「観葉会」さまにあります。お好みでどうぞ。)

10/11時点の記事(最初に書いた案)


試作品↓
トップページ個別ページ


<div class="entry_body">
<%topentry_body>
<!--more_link-->
<p class="entry_more"><a href="<%topentry_link>#more" title="<%template_extend>"><%template_extend></a></p>
<!--/more_link-->
<!--more--><div id="more"><%topentry_more></div><!--/more-->


 テンプレートHTMLの上記部分を下記に入れ替えた。なおスクリプトは、「ぽちぽちぼちぼち」さまの「簡単設置ネタバレボタン」を《FC2》の独自変数仕様にはめこんだだけです。

<div class="entry_body">

<%topentry_body>

<!--▼▼▼ネタバレ防止カスタマイズ▼▼▼-->
<noscript>
<!--more_link-->
<p class="entry_more"><a href="<%topentry_link>#more" title="<%template_extend>"><%template_extend></a></p>
<div style="display:none">
<!--/more_link-->
<!--more-->
<p style="padding:40px 0 400px 0;text-align:center;">↓↓↓続きを読む場合は、下へスクロール↓↓↓</p>
<div id="more">
<%topentry_more>
</div>
<div style="display:none">
<!--/more-->
</noscript>


<!--more_link-->
<p style="text-align:right;"><a href="javaScript:void(0)" onClick="document.getElementById('more<%topentry_no>').style.display = 'block';document.getElementById('open<%topentry_no>').style.display = 'none';" title="開く(Javascript)" id="open<%topentry_no>">ReadMore▽</a>
</p>

<div id="more<%topentry_no>" style ="display:none;">
<p style="text-align:right">ReadMore▽</p>

<%topentry_more>

<p style="text-align:right;">
<a href="#open<%topentry_no>" onClick="document.getElementById('more<%topentry_no>').style.display = 'none';document.getElementById('open<%topentry_no>').style.display = 'inline';" title="閉じる(Javascript)" style="text-align:right;">Close△</a>
</p>

</div>

<noscript>
</div>
</noscript>


<!--/more_link-->

<!--more-->
<p style="text-align:right;"><a href="javaScript:void(0)" onClick="document.getElementById('more<%topentry_no>').style.display = 'block';document.getElementById('open<%topentry_no>').style.display = 'none';" title="開く(Javascript)" id="open<%topentry_no>">ReadMore▽</a>
</p>

<div id="more<%topentry_no>" style ="display:none;">

<p style="text-align:right">ReadMore▽</p>

<%topentry_more>

<p style="text-align:right;">
<a href="#open<%topentry_no>" onClick="document.getElementById('more<%topentry_no>').style.display = 'none';document.getElementById('open<%topentry_no>').style.display = 'inline';" title="閉じる(Javascript)" style="text-align:right;">Close△</a>
</p>

</div>

<noscript>
</div>
</noscript>


<!--/more-->

<!--▲▲▲ネタバレ防止カスタマイズ▲▲▲-->


 ただし、アカマイ広告使用のブログではオカシなことになるので、使用しないでください。よろしくお願いします。

応用可能と思われるが、テスト未済の記事 など


しらぎく折り畳みスクリプト:ZIPファイルが解凍できなかった。
要素の汎用折りたたみ:ブログ更新停止。
FCafe  追記の折り畳み:個別記事の折り畳みが不明。

【Memo】本人備忘・後で読む


「/」
http://external-file.com/ja/document.write.html
「<!---->」とか「<![CDATA[ ]]>」とか
http://d.hatena.ne.jp/aql/20060615/1150300264
「document.write」
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1130798796

10/19
こんなのあった!
http://amenti.usamimi.info/windowopen.html

http://website.linkraft.net/javascript/jsspec.html
を眺めたあとで、
http://d.hatena.ne.jp/brazil/20050829/1125321936
を読んで笑って、敗退してきた。

関連記事
スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

麻生(阿檀) Author:麻生(阿檀)

【このブログについて】
ブログで小説を手軽に連載したい方のための、
ブログ紹介/FC2テンプレート紹介が、メインだったはずなのですが。

ミ^。^彡っ。oO○(いつのまにやら、かなりとんでもなくごった煮ブログになっております。)

MyToyBox

Clock!
doodel ?publish
?style3=10084&index



34601 02 03 04
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
検索フォーム
タグリスト
                                                 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。