settings
settings - KOJI@ロイロノートCEO の大部分をcopyしたものです。
code:style.css
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');
/* フォント設定 */
html, body,
#editor,
.grid li {
font-family: Arial, "Kosugi Maru", sans-serif;
}
/* Quick-launch 画面のタイトル */
.quick-launch .project-home .title {
font-size: 28px;
color: #acacac;
font-weight: bold;
font-family: Arial, "Kosugi Maru", sans-serif;
}
@media (max-width: 867px) {
.quick-launch .project-home .title {
font-size: 18px;
}
}
/* 引用の見た目を若干変更 */
.line .quote {
font-style: normal;
background: #ffffff;
}
/* 全体の背景色 */
body {
background-color: #f6f6f6;
}
.line .meta {
border-color: #ffffff;
}
.navbar-default {
background-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 {
/* ここで余白を調整 (誤記: 2ppagex → 2px) */
/* padding: 10px 12px 2ppagex; */
padding: 6px 8px 4px; /* 変更 */
}
/* 中・大サイズ時の header も同様に変更 */
ul.grid-md.grid li.page-list-item a .header {
border-top: solid 0px #000;
padding: 6px 8px 4px; /* 変更 */
}
ul.grid-lg.grid li.page-list-item a .header {
border-top: solid 0px #000;
padding: 6px 8px 4px; /* 変更 */
}
/* アイコンのパディングを少し狭める */
ul.grid li.page-list-item a .icon {
padding: 0 0px;
}
/* タイトル文字の色・サイズ調整（ピン留め以外）*/
ul.grid.grid li.page-list-item a .title {
color: #000;
font-weight: strong;
font-size: 14px;
/* height: 58px; <- 固定高さは外す */
/* 変更: height や min-height を auto に */
height: auto !important; /* 変更 */
min-height: 0 !important; /* 変更 */
margin-bottom: 4px; /* 変更 */
line-height: 1.3; /* 変更 */
}
/* ピン留めページのタイトル */
ul.grid.grid li.page-list-item.pin a .title {
color: #111111;
font-weight: bold;
font-size: 16px;
/* 変更: こちらも固定高さを外す */
height: auto !important; /* 変更 */
min-height: 0 !important; /* 変更 */
margin-bottom: 4px; /* 変更 */
line-height: 1.3; /* 変更 */
}
/* 中サイズタイルのタイトル */
.grid-md li.page-list-item a .title {
/* height: 60px; <- 固定高さは外す */
height: auto !important; /* 変更 */
min-height: 0 !important; /* 変更 */
margin-bottom: 4px; /* 変更 */
line-height: 1.3; /* 変更 */
}
/* 大サイズタイルのタイトル */
.grid-lg li.page-list-item a .title {
/* height: 70px; <- 固定高さは外す */
height: auto !important; /* 変更 */
min-height: 0 !important; /* 変更 */
margin-bottom: 4px; /* 変更 */
line-height: 1.3; /* 変更 */
}
/* 冒頭文(description)の余白調整 */
ul.grid li.page-list-item a .description {
color: #333;
margin-top: 0; /* 変更 */
padding: 0 8px 8px; /* 変更 */
line-height: 1.4; /* 変更 */
}
/* ページ本文 */
.page {
/* box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2); */
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
background-color: #ffffff;
color: #000;
}
.col-page {
max-width: 1184px;
width: 90%;
}
/* スマホのときに、ページの左右余白をなくす */
@media (max-width: 767px) {
.col-page {
padding: 0 0;
width: 100%;
}
}
.col-page-side {
width: 0px;
}
.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: 24px;
}
}
/* description 内の img.icon を調整 */
.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 #ccc solid;
border-radius: 4px;
}
.search-form .form-group button .kamon {
fill: #333;
}
.search-form .form-group input:focus {
border: 1px #ccc solid;
}
.kamon {
color: #000;
fill: #000;
}
/* サムネ画像の配置を見直す（必要なら絶対配置を解除） */
.grid li.page-list-item a .icon img {
/* もしも位置固定が不要なら absolute をやめる */
position: static !important; /* 変更 */
display: block;
width: auto;
margin-bottom: 4px;
max-height: 85px;
max-width: 88%;
vertical-align: middle;
border-radius: 5px;
transform: none !important;
top: auto !important;
left: auto !important;
}
/* 同様に中サイズ・大サイズタイルの icon も調整 */
.grid-md li.page-list-item a .icon img {
position: static !important;
display: block;
width: auto;
margin-bottom: 4px;
max-height: 130px;
max-width: 95%;
vertical-align: middle;
border-radius: 5px;
transform: none !important;
top: auto !important;
left: auto !important;
}
.grid-lg li.page-list-item a .icon img {
position: static !important;
display: block;
width: auto;
margin-bottom: 4px;
max-height: 200px;
max-width: 95%;
vertical-align: middle;
border-radius: 5px;
transform: none !important;
top: auto !important;
left: auto !important;
}
画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS - スタイルシートTipsふぁくとりー
画像のサイズを変えるUserCSS - Scrapbox研究会
code:style.css
.level-1 img { width: 10%; height: auto;}
.level-2 img { width: 20%; height: auto;}
.level-3 img { width: 50%; height: auto;}
.level-4 img { width: 100%; height: auto;}
.level-5 img { width: 83.3%; height: auto;}
.level-6 img { width: 100%; height: auto;}
画像を並べて表示 - Scrapboxとあそぶより
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 }
settings - memoooooより
code: style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}