-->
スポンサーリンク

2016年8月27日土曜日

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

更新日:2016年09月16日(金)
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>
赤太字の数字が被らないように指定すれば、記事内で何ヶ所も設定できます。
「隠したい文章や画像をここに入れる。」の部分に折りたたみたい内容を置き換えればOK。
OPEN、CLOSEを任意の文字に変更すれば状況に応じて使い分けられます。

・サンプル






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

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

トップページに【続きを読む】を自動で挿入している場合は、冒頭文が短いと折りたたみたい部分が全て展開されてしまうので注意して下さいね。
スポンサーリンク
こんな記事も書いてます。
 

0 件のコメント :

コメントを投稿