HTML＋CCSで記事の一部を出したり隠したりする方法

2017年10月8日小説家のためのブログ運営

先日から始めた「読んでレビュー（書評）」。

 

1記事公開し、既に数記事書きかけています。書き始めて気がついたのが「ネタバレ」はちょっと嫌だよなぁ」ということ。

 

まんまのネタバレ（最後のオチまで全て表記）まではいかなくても、物語の核心部分にかすってしまうような話も、書いていいいのかどうか分からなくなります。

 

そこで「ある程度のネタバレも含む部分」と「ネタバレをほとんど含まない部分」を分けられないものか考えてみたんです。

 

昔からよくあるのが「記事の一部のテキストを背景色と同色にして、選択すると浮かび上がってくるようにする」というもの。

 

でもこれだと、スマホからのアクセスなんかだと、操作が難しいです。

 

ボタンを押すと、ネタバレがパカっと開くようなものがないのだろうか？

 

色々調べてみていたら、良さそうなのがありました。

 

 

CCSでスタイルを設定して、記事内のHTMLにコードを挿入。その中にネタバレ（でなくても良いのですが、格納したい部分）を記述することで、ボタンにより内容を出したり隠したりできる……。

 

素晴らしい！

 

試してみましょう。

 

 

「ネタバレ含むレビュー」の部分もHTMLコード内を書き換えることで可能。

 

ボタンを押すと「〜を表示」ボタンになり内容が表示され、もう一度ボタンを押すと「〜を非表示」に変わり内容が隠されます。

 

しかも動作が軽く、表示・非表示もスムーズ。

 

素晴らしい……。

 

強いて言えば、HTMLコードを書く際に、毎回コピペしないといけないことと、内容を表記する場所を間違えないようにすることくらいかな？　まぁ、それはなんとでもなります。

 

気をつける点としては、HTMLソースの中で改行などが入ってしまうと、キチンと動作しないことがあることです。

 

例えば

 

 

このように記述されていればいいのですが、

 

 

こんな感じだと、内容が表示されなかったり、ボタンの名称が変わらなかったりします。

 

……というか、こんなところで改行した覚えはないんだか……？

 

と思って、また調べてみたら、どうやらコードを貼る際にテキストモードにして、その後ビジュアルモードに戻したりをしていたせいのようでした。

 

 

こちらで詳しく解説されています。

 

 

これにならって「TinyMCE Advanced」を導入して、設定を変えておきました。

 

そういや会社のブログの方は、このプラグイン使ってました。ビジュアルモードで文字装飾をするには必須のプラグインです。

 

というわけで、ネタバレを出したり入れたりできるようになりましたので、今後はこれで行こうと思います。