【コピペでOK】ブログ記事の折り畳みメニューを設置。
文章を読みやすく整理するために、本文を折りたためる機能を追加しました。
機能と言ってもHTMLをコピペで貼り付けるだけなので誰でも簡単にできます。
完成したのが↓コレ
[temp id=5]
こんな風に、指定した範囲を隠すことができます。
具体例は下の記事。読んでみてください。
このブログの場合、メリット・デメリットを対比しやすくしたり
長い文章を整理するために使用しています。
https://life-is.club/plank-30days/
[temp id=6]
折り畳みのためのHTMLコード
<div onclick="obj=document.getElementById('open1').style; obj.display=(obj.display=='none')?'block':'none';"> <a style="cursor:pointer;">▼ クリックで展開します</a> </div> <div id="open1" style="display:none;clear:both;">この文章の間に書かれた文字が［▼ クリックで展開します］で隠れます。</div>
テキストとして打ち込むと、下のように表示されます。
[temp id=7]
この文章の間に書かれた文字が［▼ クリックで展開します］で隠れます。
[temp id=8]
同じ記事に複数表示する方法
同じ記事に複数表示したいときは、少しだけ改変が必要です。
具体的には、赤文字の部分2か所(open1)を変更してください。 例）open1→open2
<div onclick="obj=document.getElementById('open1).style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開します</a>
</div>
<div id="open1" style="display:none;clear:both;">
↓
<div onclick="obj=document.getElementById('open2).style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開します</a>
</div>
<div id="open2" style="display:none;clear:both;">
使える文字は半角英数字。
赤字二か所を同様に変更することで、何度でも使用できます。
ワードプレスを使っているのであれば、ショートコードとして登録することでHTMLを打ち込む手間を省くことも出来ます。
上手く作動しない場合
上手く作動しない場合は、テキスト画面に余計な</div>が混ざっていないか確認してみて下さい。 例えば、下の例では作動しません。手打ちの場合混ざることはないと思いますが、ワードプレスの機能を多用していると混ざって気づかないことがあります。 テキストモードで確認してみてください。<div onclick="obj=document.getElementById('open1').style; obj.display=(obj.display=='none')?'block':'none';"> <a style="cursor:pointer;">▼ クリックで展開します</a> </div> <div id="open1" style="display:none;clear:both;">こんな風に、指定した範囲を隠すことができます。 具体例は下の記事。読んでみてください。 このブログの場合、メリット・デメリットを対比しやすくしたり</div> https://life-is.club/xiser/ 長い文章を整理するために使用しています。 https://life-is.club/plank-30days/</div>
