背表紙UserCSS
https://gyazo.com/1353f27bbf563db3293c96a3c6a0491d
良すぎる!!🙀🙀はるひ.iconblu3mo.icon
初代版 (装丁倉庫)
カイゼン履歴
https://gyazo.com/d02c73c4eb79cd7dd0d904c2d8f298f5
面白い。文字と背景のコントラストをもうちょっと上げたいmeganii.icon
https://gyazo.com/ecebb21e5fa68b591752b5088c864080
opacityを上げて、文字に白背景追加nomadoor.icon
https://gyazo.com/ac1d810716b2851f8202d0386a4ccdebhttps://gyazo.com/45d1ed1bfd495d0b395d8fdfb749100dhttps://gyazo.com/1f5861feec303199ed76340803a6a5c9
影を落とした方が1つ1つが本っぽいmeganii.icon
タイトルに白背景は見やすいが、タイトルだけが浮いちゃうのでもっと溶け込んで欲しい
opacityを上げ過ぎると画面がうるさい
縁取りとか試してみよう
本棚として使うときと、その他でデザイン変えてしまったほうがいいかな?nomadoor.icon
そんな気がしてきましたmeganii.icon
https://gyazo.com/ff2f8c07de51a96b8859d90a21da6378
立体感つけるのはいい感じnomadoor.icon
+1meganii.icon
文字をどうするか…
https://gyazo.com/0ead3763d7c14f9f2d2c6c0a739f21a2https://gyazo.com/0f2df7635452a13aec509c0a3e7aacab
文字を白抜き、もしくは、白で縁取りmeganii.icon
白で縁取りの方がiconなしの場合も、黒文字になるのでよさそう
ただし、画面全体がこの状態になるとあんまり文字が読めないかも
https://gyazo.com/a957f11396b6ea2a8375215be9b3d12d
許容範囲?
https://gyazo.com/71e0a8d55dab3677d0cc1cb558447ee2
書誌情報のみ「背表紙」形式にして、それ以外は「カード」形式を踏襲するmeganii.icon 書籍情報だけのプロジェクトであればすべてのページが「背表紙」形式でよいが、その書籍を読んで自分が作ったページは書き出し(Description)部分が表示されて欲しい
自分が作ったページと、書誌の情報が見た目で分離される
情報カードはフォーマットが揃っているからこそ効果を発揮するという考えからは逸脱するかもしれない :has()が来ればワンちゃん…?nomadoor.icon なるほど:has()ならできるハズ?meganii.icon これって[data-page-title*="『』"]で実装してるんですか?nomadoor.icon
そうですそうです!書籍タイトルは必ず『』で括っているので、[data-page-title$="』"]にヒットするものは書籍と判断して当てるCSSを変えていますmeganii.icon
全く気づきも思いつきもしなかった… 流石ですnomadoor.icon
新たなScrapbox魔改造の技を手に入れてしまった… https://gyazo.com/68fc1e6867cf17378ef57485a2f7de0f
文字が切れることを割り切って、幅は揃えた方が画面上にみっちり詰まって壮観meganii.icon
https://gyazo.com/32810739a95ec5186856b6a1abf320ce
ラベル風?にしてみたnomadoor.icon
よさそうmeganii.icon
試行してみたところ、本棚として「見る」分にはいいのだが、通常ページと混ざると難しいmeganii.icon
本棚ビューモードみたいな感じにして、気になったものを再度手に取るような形も試してみたい
やはり自由に使ってもよい背表紙の画像が欲しい…
UserCSS.icon