Scrapboxの一覧ページをアイコン記法とUserCSSで見やすくする
少し前から、Scrapboxの一覧ページ（プロジェクトページ）のカードの大きさを右上のスライダーで変えられるようになった。最小サイズ以外はページの概要が表示される。
Scrapboxはこんな感じで知らないうちに機能がドンドン増えている。進化し続けている。最高。
以前、一覧ページの視認性がいまいちなのでページの色分けがしたいなあ、というようなことを書いた。
- 関連記事: Scrapboxは情報管理サービスの決定版だ
一覧ページに概要が少しだけ表示できるようになったことで、アイコン記法とUserCSSを組み合わせてそこそこいい感じにページを見分けられるようになった。
やり方を書いておきたい。
ページ先頭にアイコン記法を書き、UserCSSで大きく表示
目立たせたいページの先頭にアイコン記法を書いて、UserCSSを使って一覧ページで大きく表示する。
こんな感じになる。
各ページに同じ代表画像を載せておくのと同じことだけど、アイコン記法だけで書けるのでかなり楽。
サンプルとして公開プロジェクトを作った。こちら。
アイコン記法
例えばtodoという名前のページがあった場合、他のページで[todo.icon]と書くと、todoページの代表画像（ページタイトル画像）がインラインで挿入される。絵文字みたいな感じ。
よく使うアイコンは、アルファベット一文字のページにしてしまうと書くのが楽。
[todo.icon]をよく使うのならtというページを作ってしまうと[t.icon]でアイコンが挿入できる。大人数で運用しているプロジェクトだと難しいかもしれないけど。
いろんなアイコンを集めたプロジェクトもある。
他のプロジェクトのページをアイコンとして使う場合は、[/icons/mail.icon]のようにプロジェクト名を加えて書く。
アイコン記法は一覧ページの概要にもそのままインラインで画像として表示される。
UserCSS
code:style.cssというコードブロック記法の中に適用させたいCSSを書く。自分のページに書くと自分だけ、settingsというページに書くとプロジェクト全体に適用される。
詳しい使い方は公式のヘルプ参照。サンプルもある。
今回の場合は、一覧ページ概要のアイコン画像を以下のCSSで大きく表示する。
.page-list-item .description img.inline-icon { height: 100%; width: 100%; }
settings - outoutput public scrapbox - Scrapbox
課題
ページの種類やジャンルなどを示すような画像をイチイチ貼り付ける必要がなくなったので、以前に比べるとだいぶイイ感じになったが、まだ課題もある。
リンクは別途書く必要あり
例えば、[todo.icon]だけだと#todoや[todo]のようにリンクが書かれていることにはならないので、他のページと繋げたい場合はページ内に別途#todoや[todo]を書かないといけない。ちょっと面倒。
ページの最初に#todoタグを書いておいて、一覧ページではUserScriptでアイコン画像に置き換えるとかもできそうだけど、とりあえず今はアイコンとタグを両方書くようにしている。
代表画像がある場合は使えない
ページに画像がある場合、一覧ページではその画像が優先して表示されるので、今回のワザは使えない。
例えば画像が含まれたラーメン屋のページがたくさんあるとして、お気に入りの店なんかは一覧で目立たせたいが、現状だとピン留めするくらいしかできない。画像に星マークを入れたりすればいいかもしれないけど、それも面倒くさい。
今後も進化し続ける（だろう）Scrapbox
と、まだ完全に問題が解決したわけではないが、今回、一覧にページの概要が表示されたことで工夫の余地が広がったように、ユーザーが色々と試行錯誤できるのがScrapboxのいいところだし、楽しいところだと思う。
日々進化し続けているScrapboxなので、一覧の見せ方や機能もこれから変わっていくだろう。
一覧のページカードのborder-topとかはまだまだ進化していきそうな気配がある。
楽しみ。
