settings
settings
プロジェクト全体のスタイル変更用
参考リンク
https://gyazo.com/d0064f7b9b2bcc575fa442085fe555ce
ーーーー
code:style.css
/* イタリックによる強調をマーカーっぽくする */
.line .deco-\/{ background: linear-gradient(#ffe0c1 80%, transparent 90%)}
code:style.css
/* 中点を薄く、少し横長にする */
.line .indent-mark .dot {
width: 5px;
height: 4px;
}
code:style.css
.line .image{border:solid 1px #ddd} /* 1pxの直線で、色を#dddにする場合 */ 図関連
code:style.css
.line img.image {
max-height: none !important;
max-width: 85% !important;
}
図を大きく表示する。けっこう便利
code:style.css
.level-1 img { width: 30.0%; max-height: none !important; }
[* [画像url]]]の表記で画像を小さくできる
ーーーー
デイリーページの日付テンプレ
1. このCSSをsettingsページかユーザーページにコピペ
code:style.css
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }
a#Templates.tool-btn img { opacity: 0 }
参考
＃で始まるタグをラベル風にする
code:style.css
display: inline-block;
padding: 3px 3px 3px 3px;
margin: 0 5px 5px 0;
font-size: 0.8em;
border-radius: 3px;
/* transition: .3s; */
-webkit-transform: scale(1);
transform: scale(1);
}
}
リンク書式、少し太目に
220623_行間の調整のため通常の太さに戻す
code:style.css
a,
.page-list-item .description .link {
/* font-weight: 550; */
}
a:hover, a:active {
}
.line a.empty-page-link {
/* font-weight: 550; */
}
.line a.empty-page-link:hover {
}
張り付くメニューバー関連
200510_
検索アイコンは以下の設定で消える
code:style.css
.navbar.kamon {
display: none;
}
新規作成ボタンを消す
code:style.css
.new-button { /* 新規ボタンを消す */
visibility: hidden;
}
code:style.css
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え 2021/03/25停止
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; } */
.brand-icon { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; } /* 3-a. ヘッダー内のプロジェクトのページへのリンク ※要UserScript */
.col-brand .project-home {
margin: 16px 0 0 28px; font-size: 18px;
display: inline-block; max-width: calc(100% - 80px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.col-brand .project-home:hover, .col-brand .project-home:focus,
.col-brand .project-home:active { text-decoration: none; opacity: .6 }
.col-brand .project-home .icon { margin-right: 10px; font-size:.9em }
191009_追加、210207_無効化（標準の機能になった） 210325_projectタイトルをメニューバーに追加
code:style.css
/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
/* ※次のnavbar固定と同時に使う必要がある */
@media screen and (min-width: 800px) {
.quick-launch .project-home {
position: fixed; top: 0px; left: calc((100% - 1080px)/2); z-index: 990 }
/*.page { padding-top: 0 }*/
.quick-launch .title { color: #ffffff; font-size: 22px; }} @media screen and (min-width: 800px) {
.quick-launch .project-home { left: 100px } /*初期 { left: 25px } */
.quick-launch .title { color: #FFF; font-size: 20px; }} code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 0px; padding-right: 0 !important }/*初期 { padding-top: 60px; padding-right: 0 !important } */
body:not(.presentation)
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
Scrapboxアイコン削除、サイズバー削除、ブログタイトル文字拡大
code:style.css
.brand-icon { display: none !important; }
.grid-size-range { display: none !important; }
.project-home { font-size: 1.5em !important; color: #595959 !important; } .navbar-brand img, .navbar-brand span { display: none !important }
.navbar-form .kamon { display: none !important; }
.dropdown-toggle { color: #BBBBBB !important; } .random-jump-button { color: #BBBBBB !important; } .new-button { background-color: rgba(255, 111, 175, 0) !important; }
.horizontal-line { background-color: rgba(255, 111, 175, 0.3) !important; }
.vertical-line { background-color: rgba(255, 111, 175, 0.3) !important; }
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 50%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
code:style.css
.page-list .grid li {
/* margin: 0 80px 80px 0; */
}
関連ページリスト
2021/11/04
code:style.css
.related-page-list:not(:hover)
{
opacity: 0.1;
transition: opacity 1s;
}
.related-page-list:hover
{
/* opacity: 0.4; /* */
opacity: 0.6; /* */
transition: opacity 1s;
}
hover時は半透明、それ以外は不透明（ここだけ逆）
code:style.css
.page-list:not(:hover)
{
opacity: 0.4;
transition: opacity 0.6s;
}
.page-list:hover
{
opacity: 0.8;
transition: opacity 0.7s;
}
https://gyazo.com/e4df95cd28bbf29d878e6dfe9729bd20
2022/09/15
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
2022/03/18
https://gyazo.com/5de1d6daea4a7ca9edd427d8ea4c0ae9
脳が拡張される感じが減った気がする．本文の一部が見えないからか？
code:style.css
.col-page {
max-width: 1500px !important;
}
@media (min-width: 768px) {
.related-page-list {
flex-basis: 140px !important;
}
.related-page-list-search input {
width: 120px !important;
}
}
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 295px !important;
}
.toolbar {
width: 288px !important;
}
}
@media (min-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: 2;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.links-container {
gap: 10px !important;
}
.related-page-list .grid {
gap: 0px !important;
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 0px !important;
width: 140px;
height: 50px !important;
}
.related-page-list .grid .splitter {
height: 15px !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;
}
.related-page-list .relation-label .icon-lg{
display: none !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: 12px !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)) }
.related-page-list .page-list-item .description {
padding-top: 0px !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;
}
2022/05/19
https://gyazo.com/3b739d3985530beb513b5162c91af8b0
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .1em } 2022/06/23
行間を狭くする
code:style.css
.line {
line-height: 22px;
}
2022/07/01
文字を小さくする
code:style.css
.line {
font-size:14px;
}
コードブロックの行間を狭める
2022/07/01
code:style.css
.line span.code-block {
line-height: 1.2;
}
インデント関連
code:style.css
/* 中点を薄く、少し横長にする */
.line .indent-mark .dot {
top: 8px; /*220623_行間の変更に合わせて調整 12→8 */
width: 5px;
height: 4px;
}
code:style.css
.line .indent-mark .dot{
/*margin-top: 2px;*/
}
.line .indent-mark .c-1 + .dot {
}
.line .indent-mark .c-2 + .dot {
}
.line .indent-mark .c-3 + .dot {
}
code:style.css
.line strong {
margin: 0.2em 0;
}
/* 見出しのリンクの下線を非表示にする */
.line strong a:link {
text-decoration: none;
}
.line strong:not(.level-1) .deco-\* {
padding: 0.3em 0;
line-height: 170%;
}
/* Level3以降は左にボーダー */
.line strong:not(.level-1):not(.level-2) .deco-\* {
padding-left: 0.5em;
padding-right: 0.5em;
}
/* Leve13以降は下にもボーダー */
.line strong:not(.level-1):not(.level-2) .deco-\*::after {
display: block;
position: absolute;
content: "";
width: 100%;
height: 1px;
}
.line strong.level-4 .deco-\* {
border-width: 7px !important;
}
.line strong.level-5 .deco-\* {
border-width: 9px !important;
}
参考
2021/11/26
code:style.css
}
}
ーーーー