最近読んだ漫画 (と CSS で感想の表示・非表示を切り替えてみるテスト)
あまり人に漫画を勧める時に感想って言いたくない。 けど自分はしょっちゅうブログのデザインを変えるので、単純に背景色と同じにするだけだとテーマを変えた場合に隠したはずの文章が見えてしまう。 それはあまりにもあんまりなので、CSS で感想の表示・非表示を切り替えられるようにしてみた。
案１：シンプルにチェックボックスで切替え
※チェックボックスをオンにしてみてください。
はてなブログの場合、設定画面の「デザイン」→「デザインCSS」から追加の CSS を定義できるのでそこに以下の記述を追加。 あと Markdown じゃないと HTML は書けないかも (たぶん)。
label.toggle-opacity > span { opacity: 0; } label.toggle-opacity > input[type=checkbox]:checked + span { opacity: 1; }
でブログ本文に書くときはこう。
<label class='toggle-opacity'><input type='checkbox'><span>テスト</span></label>
ちょっと書くのが面倒だけどそう使わないだろうし、コピペするなり辞書登録するなりしてしまえばいい。
案２：<details> + <summary>
…でさらにちょっとリッチなボタン形式で表示させてみるかーといろいろ HTML5 のタグを調べてたら、
こういう場合(?)に便利な <details> タグ + <summary> タグというものを発見。こう使う。
<details> <summary>(感想は省略されました。読むにはここをクリックしてください)</summary> 主人公がかっこよかった(小並) </details>
で、こうなる。
(感想は省略されました。読むにはここをクリックしてください)
主人公がかっこよかった(小並)
HTML5 のタグなので CSS は一切使ってない。 感想部分の文章にインデントを加えたい場合とかは CSS でごにょごにょすればいいだろうけど、自分はもうこれでいいや。
案３：リッチなボタン風
…と思ってたんだけど、自分が考えてた「リッチなボタン形式」のデザイン案もそれなりに実現してみたかったのでちょっとやってみた (完全にやりたいだけ)。
正直デザインより機能性を求めてしまう自分はもう <summary> タグでいいやって気分になってたけど、
せっかく作ったのでこの記事で使ってみたら結構いい感じだったので良かった。
案としてはこんな感じ。
- チェックボックスじゃなく代わりに自由なテキストを表示させる
- テキストは表示時／非表示時で切り替えられる
- ちょっとリッチなボタン形式で表示
そのデモがこちら。
HTML はこう (長い)。
<label class='toggle-opacity-text'> <input type='checkbox'> <span class='tot-enable'>感想を読むにはクリック</span> <span class='tot-disable'>感想を非表示にする</span> <span class='tot-body'>ねーねー本の感想は？</span> </label>
CSS はこう (長い)。 クラス名はさっきのと変えてます。
label.toggle-opacity-text > .tot-disable, label.toggle-opacity-text > .tot-body, label.toggle-opacity-text > input[type=checkbox] { display: none; } label.toggle-opacity-text > input[type=checkbox]:checked ~ .tot-enable { display: none; } label.toggle-opacity-text > input[type=checkbox]:checked ~ .tot-disable { display: inline; } label.toggle-opacity-text > input[type=checkbox]:checked ~ .tot-body { display: block; } /* ちょっとリッチなボタン風 */ label.toggle-opacity-text > .tot-enable, label.toggle-opacity-text > .tot-disable { color: #fff; font-weight: bold; background-color: aqua; padding: 5px 10px; border-radius: 1em; } /* ついでに枠もつけてみた */ label.toggle-opacity-text { padding: 10px; display: inline-block; border: 1px solid white; }
- (2016/07/18 23:42 追記) 「ボタンのテキストの選択を無効」を追加。
- (2016/07/19 23:15 追記) スマホで感想が丸見えになっていたのでブログをレスポンシブ化した。
- (2016/07/19 23:23 追記) Android Chrome でテキスト部分のタップが認識されなくなっていたので、やはり「ボタンのテキストの選択を無効」を削除。削除したコードは以下の通り。
/* ボタンのテキストの選択を無効 */ label.toggle-opacity-text > .tot-disable, label.toggle-opacity-text > .tot-enable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
結局 HTML が <span> タグの嵐になってしまった。
さすがにブログの記事で気軽に使えない *1 ので、
それを避けるために適切な HTML タグを探していて偶然 <summary> タグに行き当たった訳だけど、
目的は叶えられたのでとりあえずこれはこれでよしとする。
漫画の感想
という訳でおまけみたいな感じになりつつある漫画の紹介。横道ばかりの人生。
感想だけだと非表示にしてしまったらジャンルも分からなくなるので、 せめてジャンルだけ1行で紹介するようにしてみようかなーと思ったけど、 ジャンルというくくりも微妙にしっくり来ない… ジャンルで興ざめされたり敬遠されてしまうのは悲しいし、 個人的に作品に感じるジャンルやテーマは人それぞれだと思うので、いっそジャンルも隠すようにしてみた。
あとジャンルも各成分の % で表記するようにしたので、「それは違う」ってジャンルが含まれてるのもあるかも。 あと % って言っても適当なのであまり気にしないでください。
なのは洋菓子店のいい仕事
- 作者: 若木民喜
- 出版社/メーカー: 小学館
- 発売日: 2015/08/14
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ファンタジー(10%) 青春(20%) ラブ(25%) コメ(25%) 菓子(20%)
ねじの人々
- 作者: 若木民喜
- 出版社/メーカー: 小学館
- 発売日: 2015/10/16
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
青春(10%) ラブ(10%) コメ(30%) 哲学(50%)
いかづち遠く海が鳴る
- 作者: 野田彩子
- 出版社/メーカー: 小学館
- 発売日: 2015/09/11
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ファンタジー(70%) 恋愛(30%)
ノラガミ
Kindle 版が今0円だった。
- 作者: あだちとか
- 出版社/メーカー: 講談社
- 発売日: 2014/01/17
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ファンタジー(40%) 恋愛(30%) 友情(20%)
キレる私をやめたい
キレる私をやめたい ?夫をグーで殴る妻をやめるまで? (バンブーコミックス エッセイセレクション)
- 作者: 田房永子
- 出版社/メーカー: 竹書房
- 発売日: 2016/06/30
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ノンフィクション(50%) メンタルヘルス(50%)
※ノンフィクション 50% は嘘という訳ではない
さびしすぎてレズ風俗に行きましたレポ
- 作者: 永田カビ
- 出版社/メーカー: イースト・プレス
- 発売日: 2016/06/30
- メディア: Kindle版
- この商品を含むブログ (2件) を見る
ジャンル
ノンフィクション(40%) メンタルヘルス(30%) 性(30%)
※ノンフィクション 40% は嘘という訳では(ry
僕が私になるために
- 作者: 平沢ゆうな
- 出版社/メーカー: 講談社
- 発売日: 2016/06/23
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ノンフィクション(50%) 性(50%)
MAJOR 2nd
MAJOR 2nd（メジャーセカンド）（１） (少年サンデーコミックス)
- 作者: 満田拓也
- 出版社/メーカー: 小学館
- 発売日: 2015/07/10
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
青春(50%) 野球(50%)
週刊少年ガール
- 作者: 中村ゆうひ
- 出版社/メーカー: 講談社
- 発売日: 2014/05/16
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ファンタジー(34%) 青春(33%) 恋愛(33%)
スペシャル
- 作者: 平方イコルスン
- 出版社/メーカー: リイド社
- 発売日: 2016/04/11
- メディア: Kindle版
- この商品を含むブログ (1件) を見る
ジャンル
ギャグ(50%) 青春(50%)
彼とカレット。
- 作者: ｔｕｇｅｎｅｋｏ
- 出版社/メーカー: KADOKAWA / アスキー・メディアワークス
- 発売日: 2013/09/21
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ギャグ(40%) エロ(ネタ)(30%) かわいい(30%)
ぱら☆いぞ
- 作者: 道満晴明
- 出版社/メーカー: ワニマガジン社
- 発売日: 2013/09/12
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
エロ(100%) 頭おかしい(100%) 天才(100%)
AIの遺電子
- 作者: 山田胡瓜
- 出版社/メーカー: 秋田書店
- 発売日: 2016/04/08
- メディア: Kindle版
- この商品を含むブログ (1件) を見る
ジャンル
SF(50%) 未来(25%) 友情とか恋愛とか(25%)
木根さんの1人でキネマ
- 作者: アサイ
- 出版社/メーカー: 白泉社
- 発売日: 2015/12/25
- メディア: Kindle版
- この商品を含むブログ (8件) を見る
ジャンル
ギャグ(40%) 映画(40%) 友情(10%) シェアルーム(10%)
服を着るならこんな風に
服を着るならこんなふうに(1)<服を着るならこんなふうに> (カドカワデジタルコミックス)
- 作者: 縞野やえ,MB
- 出版社/メーカー: KADOKAWA / 角川書店
- 発売日: 2015/12/10
- メディア: Kindle版
- この商品を含むブログを見る
ジャンル
ファッション(70%) 妹かわいい(20%) こんな妹いるか(10%)
