はてなブログでの記事中の折り畳みを実装しました。
こんな感じでできました。
折り畳まれた内容1
折り畳まれた内容2
折り畳まれた内容3
折り畳まれた内容4
折り畳まれた内容5
記事の折り畳みなんて誰でもやっているだろうし、検索してやり方をコピーしたらすぐだと思っていましたが甘かったです。
有益な情報になかなかたどり着きませんでした。
■htmlタグだけで実装しようと奮闘するのに5時間
■htmlタグ以外の方法でどのように実装するか調査するのに1時間
■拝借できそうなCSSを見つけ、自分のブログ用に改修するのに2時間
合わせて約8時間、1日の労働時間分くらい奮闘してしまいました。
会社が夏休みでなければ投げ出していたことでしょう。
早々にhtmlタグだけで実装するのは諦めれば良かったです・・・
でも、Googleで「html 折り畳み」や「ブログ 折り畳み」で検索するとhtmlタグだけで行う方法が真っ先に出てくるんですもの。
CSSを編集しなくて済むなら簡単ですし、調べた先の情報を見る限り難なく実装できそうに見えたので、自分が悪いんじゃないかとずっと疑いながら試行錯誤していました。
結局、<div onclick>タグがどう頑張っても上手く機能してくれませんでした。
WordPressでも<div onclick>タグを利用することができないみたいですね。
ブログでの折り畳み機能の実装はハードルが高いのでしょうか？？
色々と考えた調べた結果、CSSを編集したうえで独自のhtmlタグを使用し記事の折り畳みを実装することにしました。
CSSってなんだろう？というかたは以下をざっくり目を通してもらえれば・・・
結局、こちらのCSSを参考に私は折り畳み機能を実装しました。
大筋はこちらの機能を使っていますが、数ヶ所マイナーチェンジを施しました。
主な変更点としては次の2点でしょうか。
■フォントや背景色を無効化して質素に
■折り畳み部を展開した内容の長さに応じて展開内容表示エリアの長さを可変に
簡単にマイナーチェンジと言いましたが、実は私はCSSを触るのは今回が初めてで結構苦戦しました。
そもそもはてなブログのCSSをどこで修正すればいいのかがわからずちょっと探してしまいました。
こんなところに・・・
編集者メニューのデザインの中でCSSを編集できるのですね。
最初からデフォルトでいくつかのCSSが書かれていたので、それらには触らないようにしました。
CSSを修正し、実装した折り畳みを色々と試してみました。
普通の文章が表示されます。
| 1 | 2 | 3 | 4 |
| A | B | C | D |
| あ | い | う | え |
汎用的に折り畳みができることを確認できました。
今回作成したCSSはもう少し改良できる点がないかを今一度見直してみて、今後も私の記事で折り畳みが必要な場面で使っていこうと思います。
もし私のように折り畳み機能を作ってみたいという人が居るようでしたら、見直し後にコピペで作れるような記事を公開しようと思います。
※2017/8/17 16:55追記
Internet ExplorerとGoogle Chromeで見栄えが異なることが分かってしまいました・・・
こちらがInternet Explorer
そしてこちらがGoogle Chrome
Google Chromeの方では折り畳みボタン化した文字列の後ろに謎の□が浮かび上がってしまいますね。
上手く改修できるかやってみます・・・
