たとえば一応追記しておきたいけど全員が全員読む必要のないような補足事項は「クリックすると展開」するようにして折りたたむことで、ページが長くなってしまうのを防ぎます。
ブログやウェブサイトを作る時にちょっと工夫することで見栄えを保ったまま見る人の利便性を高めておくと親切です。
たとえば一応追記しておきたいけど全員が全員読む必要のないような補足事項は「クリックすると展開」するようにして折りたたむことで、ページが長くなってしまうのを防ぎます。
そこで折りたたみを実現するコードをご紹介します。HTMLエディタにコピペするだけで使えるので、WordPressじゃなくても大丈夫です。
<div >
コード内の <!-- ここにコンテンツを記述する --> の部分を消して、中に入れたいものを記載します。
ボタンに使用する<a>タグにCSSを適用することで見た目もカスタマイズできます。
<div >class="sample01"><span style="color:#fff;">▼ 折りたたみボタンの名前</span></a>
</div>
<div id="open" style="display:none;clear:both;">
<!-- ここにコンテンツを記述する -->
</div>
CSS部分
a.sample01 {
color: #fff;
background: #333;
box-shadow: 1px 1px 1px #555;
}
文の途中に一部分だけCSSを噛ませたい時は<span>タグが役立ちます。
悪い例:
このように、ただ設置しただけではどのボタンを押しても最初(1番目)の折りたたみエリアが展開されてしまうことになります。
良い例:
折りたたみボタンを複数設置したい時は、コードの識別子をユニークなものにする必要があります。
<div >open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 折りたたみエリア①のボタン名</a>
</div>
<div id="open" style="display:none;clear:both;">
<!-- ここにコンテンツを記述する -->
</div>
赤い部分を設置する折りたたみボタンそれぞれで異なるものにする必要があります。open2とかopen3とかでokです。
注意点としては、 obj=document.getElementById に指定した識別子と、その下の div id に指定する識別子は同じものにする必要があります。
「このボタンの識別子はこのエリアを展開するものだ」という区別をするためです。
最終変更時間: 2024年4月5日 11:51 AM
コメントを見る
>初心者一郎 さん
返事が遅くなってごめんなさい。
こちらでは展開できましたので、おそらく閲覧環境の影響だと思います。
Javascriptを実行できるブラウザで、Javascriptを実行していますか?ご確認ください。
スマホでは展開できませんでした。
スマホでも使える方法ありますか?