7wrinerを自分好みの見た目にしてみる
経緯
倉下忠憲さんが開発した7wrinerというアプリを使い始めた
これがとても良い感じのツールでたいへん気に入りました
機能の感想やどう使うことにしたのか等は別途書くと思います
常用するつもりなのでデザインを自分に馴染むように整えたいと思った
元々シンプルなデザインで不満はない
より「私のツール」という気持ちが強まるように自分の定番のテーマに着せ替える
7wrinerそのものにCSSをいじる機能はついていない
ブラウザの拡張機能で上書きする
（ググるなりストアで探すなりすれば色々出てきます）
ツールはデザインも含めて作品であって、CSS変更の機能が実装されていないのに勝手にCSSを弄って「どうだ！」とやるのはお行儀が悪い感じがする（一般的にどうなのかはわからないけど個人的には気が咎める）
今回は開発者の倉下さんにいいよと言っていただけたので様子を載せることにする
倉下さんありがとうございます！
まずNormal ModeのBefore
After
変更点の概要
全体のテーマ変更（背景、フォント、文字色、余白）
カードのデザイン変更
カード間に余白
マウスオーバーで移動用のカーソルに変化
デフォルトだとドラッグできる感がなかったので
borderは消してbox-shadowを設定
Normal Mode / Edit Mode
各列にスクロールバー設置
メインの列はカード部分だけスクロール
インプットボックスとCall/Sendは常に表示
スクロールバーは目立たないようにデザイン設定
インプットボックスにpadding設定、入力中のoutlineをクリア
Full-screen Mode
サイズをウインドウに収まるようにして配置を中央に
Preview Mode
フォントサイズと見出しをちょっと整える
Overview Mode
各列にスクロールバー設置
幅・余白・表示位置を調整
Command window
表示位置を端に移動
ヘッダーにマウスオーバーでツールの操作方法のメモ表示
フォント
style.css#body, #preview .previewColumn, #modal-command, #modal-overview {
font-family: "UD デジタル 教科書体 NK-R", "MotoyaLMaru W3 mono","Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}Windows10なら入っているUDデジタル教科書体を必ず適用することにしている
青海波文様設定（恒例）
style.css#body, #modal-overview {
--color-A: #f8f8f4;
--color-B: #f4f4f0;
}
#topheader, #preview .previewColumn h1, .lineHead {
--color-A: #646E78;
--color-B: #505564;
color: #fff; /* 背景が暗くなるので字を白に */
}
#body, #modal-overview, #topheader, #preview .previewColumn h1, .lineHead {
background-image:
radial-gradient(circle at 100% 150%, var(--color-B) 24%, var(--color-A) 24%, var(--color-A) 28%, var(--color-B) 28%, var(--color-B) 36%, var(--color-A) 36%, var(--color-A) 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, var(--color-B) 24%, var(--color-A) 24%, var(--color-A) 28%, var(--color-B) 28%, var(--color-B) 36%, var(--color-A) 36%, var(--color-A) 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, var(--color-A) 10%, var(--color-B) 10%, var(--color-B) 23%, var(--color-A) 23%, var(--color-A) 30%, var(--color-B) 30%, var(--color-B) 43%, var(--color-A) 43%, var(--color-A) 50%, var(--color-B) 50%, var(--color-B) 63%, var(--color-A) 63%, var(--color-A) 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, var(--color-A) 5%, var(--color-B) 5%, var(--color-B) 15%, var(--color-A) 15%, var(--color-A) 20%, var(--color-B) 20%, var(--color-B) 29%, var(--color-A) 29%, var(--color-A) 34%, var(--color-B) 34%, var(--color-B) 44%, var(--color-A) 44%, var(--color-A) 49%, transparent 49%, transparent),
radial-gradient(circle at 0 50%,var(--color-A) 5%, var(--color-B) 5%, var(--color-B) 15%, var(--color-A) 15%, var(--color-A) 20%, var(--color-B) 20%, var(--color-B) 29%, var(--color-A) 29%, var(--color-A) 34%, var(--color-B) 34%, var(--color-B) 44%, var(--color-A) 44%, var(--color-A) 49%, transparent 49%, transparent);
background-size: 128px 64px;
}
#memo, .memobox {
background-color: #fff; /* カードが透明なので背景色を白に */
}ヘッダー、HeadLine属性のカード、Preview Modeのh1に暗色設定
その他テーマに関する設定
style.css#body {
color: #553; /* 字が真っ黒だと強いので和らげる */
padding-top: 10px;
}
#logo {
color: #fff;
}カードの見た目とカーソル
style.css.memobox {
margin-bottom: 8px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
border: none;
}
/* カードを動かせる場合のみマウスオーバー時のカーソルを移動用に変更 */
.sortable:not(.ui-sortable-disabled) .memobox, #overview .memobox.ui-sortable-handle {
cursor: move;
}Normal Mode インプットボックス（テキスト入力領域）
style.css#memo {
min-height: 100px;
padding: 10pt;
margin-top: 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
border-radius: 4px;
border: none;
}
#memo:focus{
outline: none;
}Normal Mode / Edit Mode 各ラインにスクロールバーを設置する
style.css#leftBox, #mainBox .sortable, #rightBox {
min-height: unset;
max-height: 93vh;
padding-bottom: 20px;
overflow-y: auto;
}
/* メインの列のみ別途高さ調整 */
#mainBox .sortable {
max-height: 58vh;
}
/* スクロールバーの分の幅を調整 */
#memo, .memobox, #centerBtnbox {
width: 97%;
}
@media screen and (min-width: 1180px) {
#mainBox {
width: 550px;
}
}
/* Call/Sendボタン上部に余白設定 */
#bottomBtnBox {
margin-top: 10px;
}各数値設定は場当たり的な指定（自分用なので自分が良ければいいやという）
スクロールバーのデザイン設定
style.css::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: rgba(255, 255, 255,0.4);
border: none;
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.05);
border-radius: 10px;
box-shadow: none;
}かなり薄くして目立たないようにしている
Marge Mode
style.css.plusbtn {
cursor: pointer;
}マージボタンのカーソルを変更
Full-screen Mode
style.css.full-mode {
/* 中央配置 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/* サイズが画面に収まるように設定 */
width: 96vw;
min-height: unset;
height: 96vh;
overflow-y: auto;
}Preview Mode
style.css#preview .previewColumn {
font-size: 80%;
}
#preview .previewColumn p {
margin-bottom: 0.5rem;
}
#preview .previewColumn h1 {
padding: 6px;
}
#preview .previewColumn h2 {
border-left: solid rgb(190,190,190) 3px;
padding-left: 6px;
}h1の背景は冒頭の青海波文様の項で一緒に設定してある
今のところh2までしか使っていないのでh3の設定は必要が生じたら追加する
Overview Mode
（左4列が空いているのは実際に使っているカードを一時的にSendしたため）
style.css#modal-overview {
/* 中央配置 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/* サイズ設定 */
width: 90vw;
max-height: 95vh;
padding: 0 10px;
}
#modal-overview .overColumn {
width: calc(calc(90vw - 50px) / 7 - 10px);
max-height: 90vh;
overflow-y: auto;
font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono","Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
font-size: 11px;
line-height: 0.7rem;
}
#modal-overview .overColumn.ui-sortable {
margin-right: 10px;
}各列にスクロールバー設定
フォント変更はUDデジタル教科書体のNK-RとNK-Bの視認性の差によるもの
Command window
style.css#modal-command {
left: initial !important;
right: 10px !important;
top: initial !important;
bottom: 10px !important;
}
#inspectorBoard {
font-size: 1.5em;
padding: 6px;
}表示位置を右下端に移動
inspector window（Overview Modeでの各カード詳細）の見た目調整
ヘッダーにマウスオーバーで操作方法のメモが出るようにする
↓GIF動画
style.css#topheader:hover::after {
display: block;
content: "Normal時Alt+Enter Keep ／ Edit時Alt+Enter フォーカスカードの下に新規カード追加\A
t--本文 先頭にチェックボックス付与 ／ Edit時Alt+T チェックボックス付与\A
Normal時カードダブルクリック カードをHeadline化（複数設定可能/先頭にある場合はKeep時その下に追加）\A
Alt+←/→ フォーカスラインを移動\A
Alt+↓ 全ラインの俯瞰（Overview）\A
Alt+↑ フォーカスラインのプレビュー（Preview）\A
Shift+Alt+→ コマンドウインドウ呼び出し\A
Edit時Alt+K カーソル位置でカード分割\A
Edit時カードダブルクリック Full-screenMode\A
Send/Call Temporary placementにラインごと保存/呼び出し\A";
white-space: pre-wrap;
text-align: center;
color: #fff;
padding-bottom: 10px;
}機能が多くて操作方法がすぐに覚えられないのでパッと見れる方法を考えていて思いついた
メモが見れればいいので見た目はあまりこだわっていない
操作が身体化したら覚えたものから消していくかも
今のところこのような感じ。