7wrinerを自分好みの見た目にしてみる
経緯
これがとても良い感じのツールでたいへん気に入りました
機能の感想やどう使うことにしたのか等は別途書くと思います
常用するつもりなのでデザインを自分に馴染むように整えたいと思った
元々シンプルなデザインで不満はない
より「私のツール」という気持ちが強まるように自分の定番のテーマに着せ替える
7wrinerそのものにCSSをいじる機能はついていない
ブラウザの拡張機能で上書きする
（ググるなりストアで探すなりすれば色々出てきます）
ツールはデザインも含めて作品であって、CSS変更の機能が実装されていないのに勝手にCSSを弄って「どうだ！」とやるのはお行儀が悪い感じがする（一般的にどうなのかはわからないけど個人的には気が咎める）
今回は開発者の倉下さんにいいよと言っていただけたので様子を載せることにする
倉下さんありがとうございます！
/icons/水平線.icon
まずNormal ModeのBefore
https://gyazo.com/4ce123fb5b3235b5fe8c83c9bf099335
After
https://gyazo.com/5894a374600d8297196d4d4be1fc89f2
変更点の概要
全体のテーマ変更（背景、フォント、文字色、余白）
カードのデザイン変更
カード間に余白
マウスオーバーで移動用のカーソルに変化
デフォルトだとドラッグできる感がなかったので
borderは消してbox-shadowを設定
Normal Mode / Edit Mode
各列にスクロールバー設置
メインの列はカード部分だけスクロール
インプットボックスとCall/Sendは常に表示
スクロールバーは目立たないようにデザイン設定
インプットボックスにpadding設定、入力中のoutlineをクリア
Full-screen Mode
サイズをウインドウに収まるようにして配置を中央に
Preview Mode
フォントサイズと見出しをちょっと整える
Overview Mode
各列にスクロールバー設置
幅・余白・表示位置を調整
Command window
表示位置を端に移動
ヘッダーにマウスオーバーでツールの操作方法のメモ表示
/icons/水平線.icon
フォント
code:style.css
font-family: "UD デジタル 教科書体 NK-R", "MotoyaLMaru W3 mono","Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
Windows10なら入っているUDデジタル教科書体を必ず適用することにしている
青海波文様設定（恒例）
code:style.css
}
color: #fff; /* 背景が暗くなるので字を白に */ }
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;
}
background-color: #fff; /* カードが透明なので背景色を白に */ }
ヘッダー、HeadLine属性のカード、Preview Modeのh1に暗色設定
その他テーマに関する設定
code:style.css
color: #553; /* 字が真っ黒だと強いので和らげる */ padding-top: 10px;
}
}
カードの見た目とカーソル
code: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 インプットボックス（テキスト入力領域）
code:style.css
min-height: 100px;
padding: 10pt;
margin-top: 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
border-radius: 4px;
border: none;
}
outline: none;
}
Normal Mode / Edit Mode 各ラインにスクロールバーを設置する
code:style.css
min-height: unset;
max-height: 93vh;
padding-bottom: 20px;
overflow-y: auto;
}
/* メインの列のみ別途高さ調整 */
max-height: 58vh;
}
/* スクロールバーの分の幅を調整 */
width: 97%;
}
@media screen and (min-width: 1180px) {
width: 550px;
}
}
/* Call/Sendボタン上部に余白設定 */
margin-top: 10px;
}
各数値設定は場当たり的な指定（自分用なので自分が良ければいいやという）
スクロールバーのデザイン設定
code: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
code:style.css
.plusbtn {
cursor: pointer;
}
マージボタンのカーソルを変更
Full-screen Mode
code: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
https://gyazo.com/a0c1c73b4272b9063186134364f5930e
code:style.css
font-size: 80%;
}
margin-bottom: 0.5rem;
}
padding: 6px;
}
border-left: solid rgb(190,190,190) 3px;
padding-left: 6px;
}
h1の背景は冒頭の青海波文様の項で一緒に設定してある
今のところh2までしか使っていないのでh3の設定は必要が生じたら追加する
Overview Mode
https://gyazo.com/9dc2193aa0e151e4925ead91e6462bc3
（左4列が空いているのは実際に使っているカードを一時的にSendしたため）
code:style.css
/* 中央配置 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/* サイズ設定 */
width: 90vw;
max-height: 95vh;
padding: 0 10px;
}
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;
}
margin-right: 10px;
}
各列にスクロールバー設定
フォント変更はUDデジタル教科書体のNK-RとNK-Bの視認性の差によるもの
Command window
https://gyazo.com/ef5485d2135057a32139d4ee6eef91c1
code:style.css
left: initial !important;
right: 10px !important;
top: initial !important;
bottom: 10px !important;
}
font-size: 1.5em;
padding: 6px;
}
表示位置を右下端に移動
inspector window（Overview Modeでの各カード詳細）の見た目調整
ヘッダーにマウスオーバーで操作方法のメモが出るようにする
↓GIF動画
https://gyazo.com/68343dc81dfe0b41e9ce1d7d8d74ba3b
code:style.css
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;
padding-bottom: 10px;
}
機能が多くて操作方法がすぐに覚えられないのでパッと見れる方法を考えていて思いついた
メモが見れればいいので見た目はあまりこだわっていない
操作が身体化したら覚えたものから消していくかも
今のところこのような感じ。