［当ブログは、アフィリエイトプログラムに参加しています。ページに広告が含まれる場合があります］

2016/08/27

「ネタバレ」隠しに。Bloggerで折りたたみ式【続きを読む】を挿入する方法

更新日：2018年03月23日(金)
Blogger　ロゴ
先日、【続きを読む】を自動挿入しました。
今回は「ネタバレ」やクイズの答えなどを隠したい時に、個別の記事内で使える【続きを読む】を挿入する方法をメモ。

参考にしたページはこちらです。
http://10plate.blog44.fc2.com/blog-entry-131.html



<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>





<br />
<div id="PlagOpen1">



<a href="#" onclick="showPlagin(1);return false;" title="OPEN">OPEN</a></div>



<div id="PlagClose1" style="display: none;">



<!-- ▼▼ -->







隠したい文章や画像をここに入れる。







<!-- ▲▲ -->



<br />



<a href="#" onclick="showPlagin(1);return false;" title="CLOSE">CLOSE</a>



</div>
以上のコードをHTMLモードで好きな場所に入れます。

赤太字の数字(「PlagOpen1」の１、「showPlagin(1);」の(1)、「PlagClose1」の1）が被らないように指定すれば、記事内で何カ所も設定できます。

折りたたんで隠したい内容は「隠したい文章や画像をここに入れる。」の部分に上書きしてください。
OPEN、CLOSEを任意の文字に変更すれば状況に応じて使い分けも可能です。

・サンプル






サンプルは使いやすいようにちょっと手を加えています。
環境によってはその他のカスタマイズも必要になるかも知れません。

テストページでは反映されるのに、メモ取り！に持ってくると上手く作動しないので結構時間を取られました。
下書きだと確認できないのが厄介です^^;
※【訂正】プレビュー画面のリンクを有効化したら下書き状態で確認できました。便利！

トップページに【続きを読む】を自動で挿入している場合は、冒頭文が短いと隠したい部分が最初から展開されてしまうので注意して下さいね。

【関連記事】
Bloggerプレビュー画面のリンクを有効にする方法
Bloggerに【続きを読む】を自動で挿入してサムネイルも表示させる方法
Labels: ,