settings (copy)
settings
テスト
-
/syunichisuge より借用して微調整
code:style.css
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');
.navbar-default {
background-color: #fcfcfc;
}
/* 13254C F05A5A 29A972 FC9306 2A76E6 02A789 FFD323 EB3338 4ABB0C */
html, body,
#editor,
.grid li {
font-family: arial, "Kosugi Maru", sans-serif ;
}
.quick-launch .project-home .title {
font-size: 30px;
color: #555;
font-weight: bold;
font-family: arial, "Kosugi Maru", sans-serif ;
}
@media (max-width: 767px)
{
.quick-launch .project-home .title {
font-size: 18px;
}
}
code:style.css
.navbar .navbar-menu>li>a {
color: #000;
}
.list li.page-list-item a .title-with-description {
font-weight: bold;
}
.line .quote {
font-style: normal;
background: #ffffff;
}
.line .indent-mark .dot {
display: block;
position: absolute;
right: 10px;
top: 12px;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #555;
}
body {
background-color: #ffffff;
}
.page {
/*box-shadow: 0px 0.5px 1px 1px rgba(0,0,0,0.2);*/
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
background-color: #ffffff;
color: #000;
}
.editor {
color: #000;
}
.line strong.level-2 {
line-height: 2.1;
}
.line strong.level-3 {
line-height: 2.1;
}
/* 各ページのタイトル */
.line.line-title {
font-weight : bold;
font-size: 28px;
}
@media (max-width: 767px) {
.line.line-title {
font-size: 20px;
line-height: 1.5;
}
}
.line .quote {
font-style: normal;
}
.line .meta {
border-color: #ffffff;
}
.navbar-default .navbar-nav>li>a {
color: #637282;
}
ul.grid li.page-list-item a {
/*box-shadow: 0px 0.2px 1px 1px rgba(0,0,0,0.2);*/
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
}
ul.grid li.page-list-item a .header{
border-top: solid 0px #000;
}
ul.grid-md.grid li.page-list-item a .header{
border-top: solid 0px #000;
}
ul.grid-lg.grid li.page-list-item a .header{
border-top: solid 0px #000;
}
ul.grid li.page-list-item a .icon{
padding: 0 0px;
}
/* トップのページリストのピン止めされている場合だけボールドにする */
ul.grid.grid li.page-list-item a .title {
color: #000;
font-weight: bold;
font-size: 14px;
}
ul.grid.grid li.page-list-item.pin a .title {
color: #1B739B;
font-weight: bold;
font-size: 16px;
}
ul.grid li.page-list-item a .description {
color: #222;
}
.col-page {
max-width: 1184px;
width: 88%;
}
/* スマホの時に、ページの枠を無くす */
@media (max-width: 767px) {
.col-page {
padding: 0 0;
width: 100%;
}
}
.col-page-side {
width: 0px;
}
.page-list-item .description img.inline-icon {
height: 100%;
width: 100%
}
.search-form .form-group input {
background-color: rgba(255, 255, 255, 1.0);
border: 1px solid #dfe1e5;
border-color: rgba(223,225,229,0);
border-radius: 24px;
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
color: #555;
padding: 0 15px;
}
.search-form .form-group button .kamon{
fill: #222;
color: #555;
margin-right: 8px;
}
.search-form .form-group input:focus {
border: 1px solid #dfe1e5;
}
/customize/Dark Theme CSS より借用＆調整
トップページを見やすくする
code:style.css
/* サムネ画像をフィットさせる */
.grid li.page-list-item a .icon {
position: relative;
}
.grid li.page-list-item a .header {
padding: 10px 12px 5px;
}
/* 最小表示 */
.grid li.page-list-item a .title {
height: 58px;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
margin-bottom: 5px;
max-height: 85px;
max-width: 88%;
vertical-align: middle;
border-radius: 5px;
position: absolute;
top: calc(50% + 45px);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* 中間表示 */
.grid-md li.page-list-item a .title {
height: 60px;
}
.grid-md li.page-list-item a .icon img {
display: table-cell;
width: auto;
margin-bottom: 5px;
max-height: 130px;
max-width: 95%;
vertical-align: middle;
border-radius: 5px;
position: absolute;
top: calc(50% + 50px);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* 最大表示 */
.grid-lg li.page-list-item a .title {
height: 70px;
}
.grid-lg li.page-list-item a .icon img {
display: table-cell;
width: auto;
margin-bottom: 5px;
max-height: 200px;
max-width: 95%;
vertical-align: middle;
border-radius: 5px;
position: absolute;
top: calc(50% + 77px);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.grid.grid-lg li.page-list-item a .description.fix {
height: 0px;
}
/*
.grid li.page-list-item a .hover {
background-color: rgba(255, 153, 200, 0.2);
}
*/
/scrasobox/スリムなテロメアを参考に色調整
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fcfcfc }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #f8f8f8; width: 0px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #f8f8f8; width: 0px }
via /scrasobox/ヘッダーメニューを固定する
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.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 } }
via /scrasobox/ヘッダーメニューをカスタマイズ　追加アイコンは視覚的バランスを見て左のままに
code:style.css
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
via /scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
via /scrasobox/settings　ピンの形状と色をカスタマイズ
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item.grid-style-item.pin {
box-shadow: 4px 4px 6px 1px rgba(0,0,0,0.1);
border: solid 1px rgba(40,40,40,0.1);
}
画像を並べて表示する
via /scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.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: .2em }
code:style.css
.deco-\! { color: #F21905; /* 赤文字 */}
.deco-\# { color: #0455BF; /* 青文字 */}
.deco-\% { color: #5BA2FF; /* 青文字 */}
画像を拡大表示
code:style.css
.line .image { max-height: 420px; border-radius: 5px;}
.level-1 img { width: 75%; max-height: none !important; }
.level-2 img { width: 100%; max-height: none !important; }
.deco-\# img { border: solid 1px #bbb; border-radius: 0px !important; }
.deco-\& img { width: 200px; max-height: none !important; }