最近読んだ漫画 (と CSS で感想の表示・非表示を切り替えてみるテスト)

あまり人に漫画を勧める時に感想って言いたくない。 けど自分はしょっちゅうブログのデザインを変えるので、単純に背景色と同じにするだけだとテーマを変えた場合に隠したはずの文章が見えてしまう。 それはあまりにもあんまりなので、CSS で感想の表示・非表示を切り替えられるようにしてみた。

案1:シンプルにチェックボックスで切替え

チェックボックスをオンにしてみてください。

はてなブログの場合、設定画面の「デザイン」→「デザイン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>

ちょっと書くのが面倒だけどそう使わないだろうし、コピペするなり辞書登録するなりしてしまえばいい。

案2:<details> + <summary>

…でさらにちょっとリッチなボタン形式で表示させてみるかーといろいろ HTML5 のタグを調べてたら、 こういう場合(?)に便利な <details> タグ + <summary> タグというものを発見。こう使う。

<details>
<summary>(感想は省略されました。読むにはここをクリックしてください)</summary>
主人公がかっこよかった(小並)
</details>

で、こうなる。

(感想は省略されました。読むにはここをクリックしてください) 主人公がかっこよかった(小並)

HTML5 のタグなので CSS は一切使ってない。 感想部分の文章にインデントを加えたい場合とかは CSS でごにょごにょすればいいだろうけど、自分はもうこれでいいや。

案3:リッチなボタン風

…と思ってたんだけど、自分が考えてた「リッチなボタン形式」のデザイン案もそれなりに実現してみたかったのでちょっとやってみた (完全にやりたいだけ)。 正直デザインより機能性を求めてしまう自分はもう <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行で紹介するようにしてみようかなーと思ったけど、 ジャンルというくくりも微妙にしっくり来ない… ジャンルで興ざめされたり敬遠されてしまうのは悲しいし、 個人的に作品に感じるジャンルやテーマは人それぞれだと思うので、いっそジャンルも隠すようにしてみた。

あとジャンルも各成分の % で表記するようにしたので、「それは違う」ってジャンルが含まれてるのもあるかも。 あと % って言っても適当なのであまり気にしないでください。

なのは洋菓子店のいい仕事

ジャンル ファンタジー(10%) 青春(20%) ラブ(25%) コメ(25%) 菓子(20%)

ねじの人々

ジャンル 青春(10%) ラブ(10%) コメ(30%) 哲学(50%)

いかづち遠く海が鳴る

いかづち遠く海が鳴る(1) (ビッグコミックス)

いかづち遠く海が鳴る(1) (ビッグコミックス)

ジャンル ファンタジー(70%) 恋愛(30%)

ノラガミ

Kindle 版が今0円だった。

ジャンル ファンタジー(40%) 恋愛(30%) 友情(20%)

キレる私をやめたい

ジャンル ノンフィクション(50%) メンタルヘルス(50%) ※ノンフィクション 50% は嘘という訳ではない

さびしすぎてレズ風俗に行きましたレポ

ジャンル ノンフィクション(40%) メンタルヘルス(30%) 性(30%) ※ノンフィクション 40% は嘘という訳では(ry

僕が私になるために

僕が私になるために (モーニングコミックス)

僕が私になるために (モーニングコミックス)

ジャンル ノンフィクション(50%) 性(50%)

MAJOR 2nd

ジャンル 青春(50%) 野球(50%)

週刊少年ガール

週刊少年ガール(1) (週刊少年マガジンコミックス)

週刊少年ガール(1) (週刊少年マガジンコミックス)

ジャンル ファンタジー(34%) 青春(33%) 恋愛(33%)

スペシャ

ジャンル ギャグ(50%) 青春(50%)

彼とカレット。

彼とカレット。<彼とカレット。> (―)

彼とカレット。<彼とカレット。> (―)

ジャンル ギャグ(40%) エロ(ネタ)(30%) かわいい(30%)

ぱら☆いぞ

ジャンル エロ(100%) 頭おかしい(100%) 天才(100%)

AIの遺電子

ジャンル SF(50%) 未来(25%) 友情とか恋愛とか(25%)

木根さんの1人でキネマ

ジャンル ギャグ(40%) 映画(40%) 友情(10%) シェアルーム(10%)

服を着るならこんな風に

ジャンル ファッション(70%) 妹かわいい(20%) こんな妹いるか(10%)

*1:まぁ冒頭で辞書登録すれば良いとは自分でも言ってるけど

*2:たぶんと多分をかけています

*3:この表現が適切だったかどうかはまた読んでみないと分からない