settings
code:style.css
/*{
.navbar-default {
background-color: rgb(24 199 255 / 30%);
}
--body-bg: rgb(224 224 224);
}
*/
関連ページをサイドに表示する
細部まではやりきれてない
code:style.css
.col-page {
max-width: 1200px;
}
@media (min-width: 1000px) { /*元768*/
.related-page-list {
flex-basis: 220px !important;/*カードサイズ*/
}
}
/* 無効化
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 285px !important;
}
.related-page-list .relation-label {
width: 285px !important;
}
}
*/
@media (min-width: 1000px) {/*元768*/
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 10px;/*メインとサイドバーのマージン*/
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);
}
.related-page-list ul.grid{
gap: clamp(8px, 0.5svw, 8px);
}
.related-page-list .links-container {
gap: 24px;
}
.related-page-sort-menu {
/*display: none;*/
}
.related-page-list .grid li {
margin-bottom: 0px !important;
margin-right: 0px !important;
width: 220px;/*カードサイズ*/
}
.related-page-list .grid .splitter {
height: 10px !important; /*カード同士の間*/
}
.related-page-list .relation-label links{
height: 124px;
}
.related-page-list .relation-label {
height: 124px;
}
.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;
}
.grid li.relation-label a {
height: 124px;
}
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 124px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 0px !important; /* カードのヘッダーの帯を取る 元の値:5*/
padding-top: 3px !important;
padding-bottom: 0px !important;/*元は3*/
padding-left: 5px !important; /*追加 元は12*/
padding-right: 5px !important; /*追加 元は12*/
z-index: 1;
/*background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 15px !important; /*追加 カードのタイトル文字サイズ*/
color: #888 !important;/*追加 カードのタイトル文字カラー*/ line-height: inherit;/*追加 行間調整*/
/*追加 タイトルの縁取り*/
text-shadow:
}
.related-page-list .page-list-item .description {
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
padding-left: 5px !important; /*追加 元は12*/
padding-right: 5px !important; /*追加 元は12*/
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: relative; /*元はabsolute*/
width: 50%; /*カードに表示される画像の大きさ 元は100%*/
height: 50%; /*カードに表示される画像の大きさ 元は100%*/
z-index: 0;
/*opacity: 1;*/
/*padding: 5px !important;*/
padding-left: 3px !important;/*追加*/
padding-right: 3px !important;/*追加*/
}
.grid li.page-list-item a .icon {
overflow: visible;
}
.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
.related-page-list .toolbar {
margin-bottom: 16px;
flex-direction: column;/* ツールバーがサイドに表示した際の崩れを修正*/
}
ode:style.css
/* テキストのリストの大きさを調節*/
.related-page-list .grid li {
height: 120px;
}
参考
トップページのタイリングを調整
code:style.css
/* pinの調節 */
.grid li.page-list-item a .pin {
height: 16px;/*元 20px*/
width: 18px;/*元 22px*/
}
/* タイトルの調節*/
.grid li.page-list-item a .header {
padding: 4px 8px;/*元 8px 12px*/
}
/* 文章の調節*/
.grid li.page-list-item a .description {
padding: 4px 8px;/*元 8px 12px*/
line-height: 1.5;/*追加*/
}
/*関連ページのカードを長方形化*/
.grid li.page-list-item a {
height: 120% !important;
}
検索結果
検索結果ページをグリッドにする
style.css
.search-result-list .list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 180px));
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.search-result-list .list li.page-list-item a .icon {
width: 100%;
max-height: 100%;
margin: 0;
position: static;
}
.search-result-list .list li.page-list-item a {
padding: 0;
margin: 3px;
min-height: auto;
max-height: auto;
overflow: hidden;
}
.search-result-list .list li.page-list-item a .content {
margin: .5rem 0 0 0;
}
.search-result-list .list li.page-list-item a .title-with-description {
font-size: 14px;
line-height: 1.0;
font-weight: bold;
}
検索結果ページの画像サイズを大きくする
style.css
/*検索結果ページの画像サイズを大きくする*/
.list li.page-list-item a .icon {
width: 200px !important;
max-height: 200px !important;
}
.list li.page-list-item a .content {
margin-left: 220px !important;
}
.list li.page-list-item a {
min-height: 220px !important;
}
本文
箇条書きを控えめにする
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
testあいうえお
引用の装飾を控えめにする
code:style.css
/* 引用を控えめにする */
.app .line .quote {
font-style: initial; /* font-style: italic; */
background-color: initial; /* background-color: rgba(128,128,128,0.1); */
display: block;
padding-left: 4px;
}
2021/02/18 14:51 上記のcssが効かなくなったので追加
code:style.css
.line.quote-line {
background-color: initial; /* background-color: rgba(128,128,128,0.5); */
display: block;
margin-left: -4px;
}
testあいうえお
ふきだし
code:style.css
.deco-\{, .deco-\} {
font-weight: bold;
padding: 1.2rem;
border-radius: .7rem;
margin: auto 1rem;
display: inline-block;
max-width: calc(100% - 100px); /* 長いセリフの折り返しをいい感じにする */
vertical-align: top;
}
/* 吹き出し内のリンク色 */
.deco-\{ a,
.deco-\} a {
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.deco-\{, .deco-\} {
padding: 1rem;
}
}
code:style.css
/* 右フキダシのツノ */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-200%) translateY(calc(1em - 0%));
width: 0;
content: "";
border-width: 0 0 .6em .6em;
border-style: solid;
}
code:style.css
/* 左フキダシのツノ */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(100%) translateY(calc(2rem - 0%));
width: 0;
content: "";
border-width: 0 .6em .6em 0;
border-style: solid;
}
testあいうえお
testあいうえお
強調
code:style.css
.deco-\! {
font-weight: bold;
border-radius: .4em;
padding: .3em;
border-bottom: none;
}
.deco-\% {
font-weight: bold;
background: linear-gradient( transparent 70%, #e8a2a2 0% ) }
てすと
testあいうえお
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient( transparent 70%, #e8a2a2 0% ) }
testあいうえお
画像の外周に影をつける
デフォルト
code:style.css
img{
/*border: 1px solid rgba(0,0,0,0.1);*/
border-radius: 5px;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
}
デコレーション付き
code:style.css
.deco-\| img{
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
}
https://gyazo.com/676ac4b5af2e7ec8a69a64c38770fe4e
画像を半分のサイズで表示する
2019/4/9現在、scrapboxがretina非対な為、画像がぼける。
使い方:画像を選択してポップアップメニューのstrongを用いる。ただし非retinaディスプレイでは画像の縮小が汚い…。
code:style.css
span.deco strong.level-1 span.modal-image a img.image{
height: 5em;
/*display:none;*/
}
元(retina非対応)
https://gyazo.com/7237ee67df72022d6bfd6c4530b694eb
適応後(retina対応)
https://gyazo.com/7237ee67df72022d6bfd6c4530b694eb
検索ボックスのサジェストからスクロールバーを取り除く
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
*見出しに下線を加える
code:style.css
.line strong.level-1 {
padding: 1em 0;/*上下の余白*/
border-bottom: 1px solid#666;
padding-bottom: .2rem;
}
見本
てすと
** 見出しに破線の下線を加える
code:style.css
.line strong.level-2 {
padding: 1em 0;/*上下の余白*/
border-bottom: dashed 2px #666; line-height: 2;
padding-bottom: .2rem;
}
見本
てすと
参考
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
cssの特定
Scrapboxアイコンを消す
code:style.css
.brand-icon { display: none !important }
参考
無効化
各ページの下に表示される関連ページの大きさを変える
2022/07/31 無効化
div.related-page-list li.grid-style-item, div.related-page-list li.relation-label{
width:190px !important; /* 横幅を190pxにする */
height:220px !important; /* 縦の長さを220pxにする */
}
各ページの下に表示される関連ページの大きさを変える