【WordPress】行の折りたたみで、長い行があっても見やすくなる

WordPress

人に何かを説明していくときには、「抽象的なことから具体的なことへ」という流れで説明するほうが伝わりやすいと思います。言い換えると、漠然としたことから詳細なことの流れ。もっというと、抽象的が「見出し、もしくは小見出し」であり、具体的が「詳細説明」にあたります。読み手からすると、見出しを見て自分に関係がありそうであれば、詳細説明を読みます。これを効率的にするために有効な「行の折りたたみ方法」です。

折りたたみ作成方法

下のコード内を使うだけで、行を折りたたむことができます。

<!-- 折りたたみ展開ポインタ -->
<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ (クリックで展開)</a>
</div>
<!--// 折りたたみ展開ポインタ -->

<!-- 折りたたまれ部分 -->
<div id="open" style="display:none;clear:both;">

<!--ここの部分が折りたたまれる&部分になります。-->

</div>
<!--// 折りたたまれ部分 -->

参考にさせていただいたサイト様です↓
クリックすると展開する表示する”折りたたみメニュー”を簡単に作る方法

本サイトでの使用例

本サイトではこちらの記事で使用しております。

【在宅勤務】あると便利・仕事がはかどるモノ

やり方どうでしょうか?

現時点では、コードの構成を全く理解できておりません。特に不具合も見当たらないのでこのまま使うつもりです。こんな方法もあるよ~などコメントいただけるとありがたいです。
よかったら、他のページも見ていってください。

コメント

タイトルとURLをコピーしました