すんこのアトリエとうぐいす工房

ゼロから始めるパソコン生活

【はてなブログ】記事内の一部を折りたたんで隠す方法

f:id:sunko-chan:20210630174156p:plain

ブログを見ていたりしていた時、
ボタンをクリックすると詳細がずらっと表示されたりしたことはありませんか?

こんな感じに記事内の一部を折りたたんで隠す方法を紹介したいと思います。

折りたたんで隠すコード

やり方は簡単。
以下のコードを記事内に貼り付けて、文章を変更するだけです。

<div onclick="obj=document.getElementById('oritatamu').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">隠しているときの文章</a>
</div>
<div id="oritatamu" style="display:none;clear:both;">
ここに文章
</div>

コードの説明

折りたたんでいるときと表示しているときの文章の位置を
間違えないようにするくらいです。

あとはほぼそのままでいじるところはありません。
あえて言うなら、getElementById('~')とdiv id="~"の~の部分を同じにすれば
自分の好きに変更できるくらいでしょうか。

また、同一記事内で複数使う場合は、
getElementById('~')とdiv id="~"は別のセットにしてください。

※一個目をgetElementById('oritatamu')とdiv id="oritatamu"にしたら、
別の場所を折りたたんで隠す場合、
getElementById('oritatamu1')とdiv id="oritatamu1"にする。


<div onclick="obj=document.getElementById('oritatamu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">隠しているときの文章</a>
</div>
<div id="oritatamu1" style="display:none;clear:both;">
ここに文章</p>
<div onclick="obj=document.getElementById('oritatamu2').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">隠しているときの文章</a>
</div>
<div id="oritatamu2" style="display:none;clear:both;">
ここに文章</p>
</div>
</div>

このように折りたたんで隠した中にさらに折りたたんで隠すこともできますよ。

まとめ

記事内の一部を折りたたんで隠す。
簡単にできるので特に注意することはないです。

このブログでは私みたいなパソコンに詳しくない人にもわかるように書いているので、
知っている人には不要な項目もあったりします。

そんな時にこの折りたたんで隠す方法を使えば、わかる人はそのままスルー、
わからない人は表示させて読むといった感じで記事もすっきりしそうですね。

あとは、問題の答えを折りたたんで隠すとか?
使い方次第ではいろいろできそうですね。

続きを読むの代わりにも使えるかな?
はてなブログだとトップページの表示を一覧表示に設定すると
続きを読むが使用できなくなるみたいなので…

実際にテストブログで公開してみてもできなかったし…