settings
ホーム
https://gyazo.com/3e2470995d22229d73349f1e65bda9f8
code:style.css
.grid li.page-list-item a{
box-shadow:none;
border-radius:10px;
}
box-shadow:none;
}
.grid li.page-list-item a .hover{
background-color: var(--card-hover-bg, rgba(0, 0, 0, 0.5));
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
.grid li.page-list-item a .title{
text-align:center;
color:#f0f0f0;
font-family: "YuGothic",'Yu Gothic',"游ゴシック体","游ゴシック";
}
.grid li.page-list-item a .header{
position:absolute;
opacity:0;
border-top:none;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:2;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
.grid li.page-list-item a .icon{
padding:0;
}
.grid li.page-list-item a .content{
height:inherit;
}
.grid li.page-list-item :hover .header{
opacity:1;
}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 200px;
max-width: 100%;
vertical-align: middle;
border-radius: 5px;
}
グリッドで並べる
code:style.css
.page-list ul.grid{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
gap: 3rem;
}
.page-list .grid li {
width: 100%;
height: 100%;
aspect-ratio: 5/4;
margin: 0;
border-radius: 10px;
}
ホバーアニメーション(画像)
code:style.css
.grid li.page-list-item a:hover{
--brightness-img: brightness(0.4) saturate(30%);
outline: 4px solid black !important;
outline-offset: -1px;
}
.grid li.page-list-item a:before,.grid li.page-list-item a:after,.grid li.page-list-item a .content:before,.grid li.page-list-item a .content:after{
content:"";
width:30px;
height:30px;
position:absolute;
transition: var(--transition-all);
}
.grid li.page-list-item a:before{
border-left: var(--border-design);
border-top: var(--border-design);
top: var(--border-gap);
left: var(--border-gap);
}
.grid li.page-list-item a:after {
border-right: var(--border-design);
border-bottom: var(--border-design);
bottom: var(--border-gap);
right: var(--border-gap);
}
.grid li.page-list-item a .content:before{
border-right: var(--border-design);
border-top: var(--border-design);
top: var(--border-gap);
right: var(--border-gap);
}
.grid li.page-list-item a .content:after{
border-left: var(--border-design);
border-bottom: var(--border-design);
bottom: var(--border-gap);
left: var(--border-gap);
}
.grid li.page-list-item a .icon img{
transform: var(--scale-img);
transition: var(--transition-all);
filter: var(--brightness-img);
}
/* クリックしたとき */
.grid li.page-list-item a:active{
outline: 2px solid black !important;
outline-offset: -1px;
}
最初の画像をトップに
code:style.css
.lines{
display: flex;
flex-direction: column;
}
.line:nth-of-type(2){order:1}
.line.line-title{
order:2;
}
.line:not(:first-of-type):not(:nth-of-type(2)){order:3}
code:style.css
/* ノートの色 */
.grid li.page-list-item a .content{
flex-direction: column-reverse;
}
code:style.css
/* 拡張装飾記法 見出しっぽい太字テキスト */
.level .deco-\# { border-left: .6em solid #ffcfc6; padding-left: .7rem } 全体
code:style.css
body {
margin: 0px 30px 0px 30px;
}
ページ・テキスト
code:style.css
/* Disable shadow */
.page {
line-height: 36px;
box-shadow: 0 1px 0 rgba(0,0,0,0.16);
}
.text {
font-size: 100%;
font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",'游ゴシック','Yu Gothic', sans-serif;
}
引用（ 行頭に>を書くと引用になります）
code:style.css
.line .quote {
font-style: normal ;
font-size: 100% ;
padding-left: 50px ;
padding-right: 50px ;
padding-top: 20px ;
padding-bottom: 20px ;
border-width: thin ;
}
.line .quote .c-0 {
visibility: hidden ;
}
.line .quote .c-0 + a:last-child {
float: right ;
margin-right: 1em ;
}
ヘッダー
code:style.css
.brand-icon{display: none;}
.navbar{
background: rgb(255, 255, 255);
backdrop-filter: none;
box-shadow: none;
}
ナビゲーションバー
code:style.css
.navbar-default {
}
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 } }
code:style.css
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 28px; color: #bbbbbb; } code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
グリッド
code:style.css
.grid li.page-list-item {
margin-bottom: 0.7em ;
font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",'游ゴシック','Yu Gothic', sans-serif;
}
.grid li.page-list-item .text{
}
}
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
box-shadow: 7px 7px 15px rgba(0,0,0,0.02);
border-radius: 7px ;
}
.grid li.page-list-item a:hover,
.grid.grid-md li.page-list-item a:hover,
.grid.grid-lg li.page-list-item a:hover {
box-shadow: 7px 7px 15px rgba(0,0,0,0.02);
}
.grid li.page-list-item a::before,
.grid li.page-list-item a::after {
display: block ;
content: '' ;
position: absolute ;
width: 13em ;
}
.grid li.page-list-item a::before {
}
.grid li.page-list-item a::after {
}
.grid li.page-list-item a .header {
border-top: 0 ;
}
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
/* transition: .3s; */
-webkit-transform: scale(1);
transform: scale(1);
}
}
テロメアを消す
code:style.css
/* telomere */
.telomere-border {
}
.telomere-border.unread {
}
行間を広くする
code:style.css
.line {
line-height: 37px;
}
コードブロックを見やすく
code:style.css
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #919191} 行頭のドットを加工
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -8px;
top: -10px;
}
.line .indent-mark .c-0 + .dot {
background-color: transparent;
}
.line .indent-mark .c-0 + .dot::before {
content:"・";
}
.line .indent-mark .c-1 + .dot {
background-color: transparent;
}
.line .indent-mark .c-1 + .dot::before {
content:"-";
display: block;
position: absolute;
right: -2px;
top: -10px;
}
.line .indent-mark .c-2 + .dot {
background-color: transparent;
}
.line .indent-mark .c-2 + .dot::before {
content:"-";
display: block;
position: absolute;
right: -2px;
top: -10px;
}
.line .indent-mark .c-3 + .dot {
background-color: transparent;
}
.line .indent-mark .c-3 + .dot::before {
content:"-";
display: block;
position: absolute;
right: -2px;
top: -10px;
}
.line .indent-mark .c-4 + .dot {
background-color: transparent;
}
.line .indent-mark .c-4 + .dot::before {
content:"-";
display: block;
position: absolute;
right: -2px;
top: -10px;
}
.line .indent-mark .c-5 + .dot {
top: 17px;
width: 4px;
height: 1px;
}
リンク
code:style.css
.page-list-item .description img.inline-icon {
height: 100%;
width: 100%
}
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font-family:"Font Awesome 5 Free"; font-weight: 900;
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
code:style.css
.grid li.relation-label.links a {
border-radius: 7px;
}
.grid li.relation-label a {
border-radius: 7px;
}
code:style.css
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'FontAwesome'; content: '\f10d'; vertical-align: super } リストからsettingsを消す
code:style.css
display: none;
}
リストからヒツジモチを消す
code:style.css
display: none;
}
リストからseacretを消す
code:style.css
display: none;
}
code:style.css
display: none;
}
外部リンクを自動判別・無料webフォントを引っ張り出してくる
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image) > a.link:not(.icon)::before {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 600;
display: inline-block;
padding: 0 0.5em 0 0;
}
画像クリック時のURL非表示
code:style.css
.full-content-modal .modal-dialog .modal-content .modal-body a.link .text {
display: none;
}
選択範囲の色
code:style.css
.selection{
}
右上のソート・表示サイズのやつ
code:style.css
.right-box {
opacity: 0.1;
transition: opacity 0.5s;
}
.right-box:hover {
opacity: 1;
}
右下のページ数非表示
code:style.css
.status-bar {
display: none;
}
タイトルのスタイル変更
code:style.css
a.btn.project-home{
padding: 0;
transition: 0.3s;
}
a.btn.project-home:hover{
background: rgba(0, 0, 0, 0)!important;
transform: scale(1.05);
}
.project-home span.title {
display: inline-block;
padding: 4px 11px;
font-size: 0.95em;
border: 1px solid;
border-radius: 3px;
}
ページメニュー
code:style.css
.page-menu {
opacity: 0.1;
transition: opacity 0.3s;
}
.page-menu:hover {
opacity: 1;}
.page-sort-menu {
opacity: 0.1;
transition: opacity 0.3s;
}
.page-sort-menu:hover {
opacity: 1;
}
pinのドッグイヤー非表示
code:style.css
.grid li.page-list-item a .pin {
display: none;
}
ページリストで内容を非表示
code:style.css
.page-list.clearfix .grid li.page-list-item a .description {
display: none;
}
下部new link 非表示
code:style.css
.empy-links{
display:none;
}
code:style.css
.brand-icon {
display: none;
}
code:style.css
.navbar .kamon {
display: none;
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
pinのページに線を入れ,高さを変える
code:style.css
li.grid-style-item.pin{
height:50px ;
}
新規作成ボタン/検索ウィンドウ
code:style.css
.new-button{
background-color:transparent;
transition: var(--transition-all);
}
.new-button .horizontal-line{
height: 3px;
}
.new-button .vertical-line{
width: 3px;
}
.search-form .form-group input,.search-form .form-group input:focus{
background-color:#e9e9e9;
}
タイトルデザイン
code:style.css
.line.line-title .text{
--border-gap: 0;
font-size: 1em;
text-align: center;
letter-spacing: 0.2em;
font-weight: 400;
padding: 20px 0 50px 0;
}
.line.line-title .text:before,.line.line-title .text:after{
content:"";
width:30px;
height:50px;
position:absolute;
}
.line.line-title .text:before{
border-left: var(--border-design);
border-top: var(--border-design);
top: 0;
left: 0;
}
.line.line-title .text:after {
border-right: var(--border-design);
border-bottom: var(--border-design);
bottom: 30px;
right: 0;
}
画像を中央寄せしてサイズ調整
code:style.css
.line img.image {
width: 80%; max-height: none ;
display : block;
margin : 0 auto 0.7em;
position: relative;
top: 1em;
}
.video-player video{
margin: 0 auto 0.7em;
max-width: 100%;
vertical-align: baseline;
}
code:style.css
.level-1 img.image { width: 50%; max-height: none !important; }
.level-2 img.image { width: 60%; max-height: none !important; }
.level-3 img.image { width: 70%; max-height: none !important; }
.level-4 img.image { width: 80%; max-height: none !important; }
.level-5 img.image { width: 90%; max-height: none !important; }
.level-6 img.image { width: 100%; max-height: none !important; }
リストからsettingsを消す
code:style.css
display: none;
}