見た目を極限までEvernoteに寄せる
もともとはEvernoteを使ってたけど、前に一度同期に失敗して1万字の書き途中小説が全部消えて以降Scrapboxにしたくなった次第 【課題】
１ Evernoteは関連ページが左に表示される
２ 「無題のノート」という同タイトルのページを大量に作れる
３ ノートブック機能
４ 行頭字下げ
５ 背景と文字を書く部分の色が同じ
【解決策】
２ ランダムでタイトルをつければ統一感がでる
３ タグをつける
５ CSSをいじれば良い
【解決しなかった問題】
インデントと行頭字下げを共存させることができない
ニゴロブナの人.icon設定資料は書きにくいけど、まあそこまで不便ではないので……
【解説】
１
自分は左にノートブックのノートが表示されている形が気に入っていたので、タグ付けされているページを左に表示することで解決。
https://scrapbox.io/files/634c1dcadbe81c0023c17614.png
２
「無題のノート」の作成は可能だが、最初の文章がURLに入ってしまうのが気になる。
「Untitled」もあんまり好ましくない（個人的意見）
数字を付けるという方法もあるが、確認するのも大変。
ニゴロブナの人.iconある程度統一感があって雑多な感じのタイトルにすれば問題ないのでは？
そう思ったニゴロ。
ということで、ランダムで平仮名3文字を出してくれるスクリプト
３
もともとタグ機能があるからそれを使えばおｋ
４
このページにあるCSSをコピペすれば行頭字下げができる。 ただし、インデントができなくなるのでそことの違いは検討。
５
ストライプの部分が背景部分で、この白い部分が文字を編集する部分。
「page」と「.editor, .stream, li.page-list-item」の両方を変えないと綺麗に全体が同じ色になることがないので注意
・ダークテーマの場合は「＃202228」文字を編集する部分をにすることで背景と統一可能
・ホワイトテーマの場合は背景を白くすれば文字を編集する部分と統一可能。
背景部分
code:style.css
.body{
background-color: #fff; /* 背景をかえる。変更可能 */ }
文字を編集する部分
code:style.css
.page {
background-color: #202228; /* 文字を書く部分の背景 */ }
.editor, .stream, li.page-list-item {
background-color: #202228; /* 文字を書く部分の背景 */ }
【！以上】
/icons/水平線.icon
１の解決方法
code:style.css
.col-page {
max-width: 1200px;
}
@media (min-width: 768px) {
.related-page-list {
flex-basis: 140px !important;
}
}
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 140px !important;
}
.related-page-list .relation-label {
width: 140px !important;
}
}
@media (min-width: 768px) {
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 13px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 0;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.related-page-sort-menu {
display: none;
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 5px !important;
width: 140px;}
.related-page-list .grid .splitter {
height: 15px !important;
}
.related-page-list .relation-label {
height: auto !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
/* border-bottom: 2px solid var(--relation-label-bg); */
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.grid li.relation-label a .title {
height: 22px;
padding-top: 5px; /*loine-hight=150%×font-size=12px→22-8=4px*/
line-height: 150%; /* ラベルタイトルの位置調整 */
}
.grid li.relation-label a {
border-radius: 3px; /*カバーの角を丸くする*/
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
.grid li.page-list-item a .title {
}
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 70px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
/* background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 13px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff)) }
.grid li.page-list-item a .header {
padding: 10px 6px;
padding-right: 0px;/*画像位置調整*/
}
.related-page-list .page-list-item .description {
padding-top: 6px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
}
スマホ用リンクサイズ
code:style.css
@media (max-width: 768px)
page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 20px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 0;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.related-page-sort-menu {
/* display: none; */
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 5px !important;
width: 140px;}
.related-page-list .grid .splitter {
height: 15px !important;
}
.related-page-list .relation-label {
height: auto !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
/* border-bottom: 2px solid var(--relation-label-bg); */
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.grid li.relation-label a .title {
height: 22px;
padding-top: 5px; /*loine-hight=150%×font-size=12px→22-8=4px*/
line-height: 150%; /* ラベルタイトルの位置調整 */
}
.grid li.relation-label a {
border-radius: 3px; /*カバーの角を丸くする*/
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
.grid li.page-list-item a .title {
}
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 70px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
/* background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 13px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff)) }
.grid li.page-list-item a .header {
padding: 10px 6px;
padding-right: 0px;/*画像位置調整*/
}
.related-page-list .page-list-item .description {
padding-top: 6px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
.page-sort-menu .tool-btn {
cursor: pointer;
padding: 6px 10px 3px;
border-radius: 3px;
}
}