背表紙UserCSS
良すぎる!!🙀🙀


初代版 (装丁倉庫)
カイゼン履歴
面白い。文字と背景のコントラストをもうちょっと上げたい

opacityを上げて、文字に白背景追加

影を落とした方が1つ1つが本っぽい

タイトルに白背景は見やすいが、タイトルだけが浮いちゃうのでもっと溶け込んで欲しい
opacityを上げ過ぎると画面がうるさい
縁取りとか試してみよう
本棚として使うときと、その他でデザイン変えてしまったほうがいいかな?

そんな気がしてきました

立体感つけるのはいい感じ

+1

文字をどうするか…
文字を白抜き、もしくは、白で縁取り

白で縁取りの方がiconなしの場合も、黒文字になるのでよさそう
ただし、画面全体がこの状態になるとあんまり文字が読めないかも
許容範囲?
書誌情報のみ「
背表紙」形式にして、それ以外は「カード」形式を踏襲する

書籍情報だけのプロジェクトであればすべてのページが「背表紙」形式でよいが、その書籍を読んで自分が作ったページは書き出し(Description)部分が表示されて欲しい
自分が作ったページと、書誌の情報が見た目で分離される
情報カードはフォーマットが揃っているからこそ効果を発揮するという考えからは逸脱するかもしれない
これって
[data-page-title*="『』"]
で実装してるんですか?

そうですそうです!書籍タイトルは必ず『』で括っているので、
[data-page-title$="』"]
にヒットするものは書籍と判断して当てるCSSを変えています

全く気づきも思いつきもしなかった… 流石です

新たなScrapbox
魔改造の技を手に入れてしまった…
文字が切れることを割り切って、幅は揃えた方が画面上にみっちり詰まって壮観

ラベル風?にしてみた

よさそう

試行してみたところ、本棚として「見る」分にはいいのだが、通常ページと混ざると難しい

本棚ビューモードみたいな感じにして、気になったものを再度手に取るような形も試してみたい
やはり自由に使ってもよい背表紙の画像が欲しい…