settings
https://gyazo.com/ace9699f80ba4edb5559635763f01de6
全体向け設定
import系
code:style.css
@import "/api/code/scrasobox/チェックボックスになるタグ_2/style.css";
@import "https://scrapbox.io/api/code/blu3mo-public/関連ページ一覧を横に移動させる/style.css";
フォント
code:style.css
/* M PLUS 1p */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700;800");
html, body, #editor, .grid li {
font-family: "M PLUS 1p", helvetica, arial, sans-serif ;
}
.line strong.level, htmldata-os*='mac' .line strong.level, .line strong.leveldata-os*='mac' {
font-weight: 700;
}
div.line-title.section-title {
font-weight: 700;
}
ページの幅を広げる
code:style.css
.col-page {
max-width: 1200px;
}
v
o
フォントのテスト
フォントのテスト
フォントのテスト
フォントのテスト
code:style.css
/* /customize/画像の表示サイズを**　で設定できるようにする */
.level-1 img.image { width: 16.7%; height: auto; max-height: none; }
.level-2 img.image { width: 33.3%; height: auto; max-height: none; }
.level-3 img.image { width: 50%; height: auto; max-height: none; }
.level-4 img.image { width: 66.7%; height: auto; max-height: none; }
.level-5 img.image { width: 83.3%; height: auto; max-height: none; }
.level-6 img.image { width: 100%; height: auto; max-height: none; }
/* /pocala-kyopro/strongのレベルによってデザインを変える */
.line strong.level-2{
color: #8597ff;
}
.line strong.level-3{
color: #7decbf;
}
.line strong.level-4{
padding: 0.2em 0.8em; /*文字周りの余白*/
border-left: solid 10px #ffaf58; /*左線（実線 太さ 色）*/
line-height: 2;
}
.line strong.level-5{
border-left: solid 10px #d14;
line-height: 2em;
padding: 10px 20px;
}
/* ＃で始まるタグをラベル風にする */
atype="hashTag", a.page-linktype="hashTag"{
display: inline-block;
padding: 0px 8px;
margin: 0 6px 8px 0;
color: #00c286;
font-size: 0.8em;
border: 1px solid #00c286;
border-radius: 15px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* orange word with ~ */
.deco-\~ {
color: #FFa000;
}
/* ナビゲーションロゴ画像上書き /yamanoku/settings */
a.navbar-brand.dropdown-toggle {
position: relative;
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 40px;
height: 40px;
display: block;
position: absolute;
top: 0px;
left: -2px;
background-image: url(https://i.gyazo.com/43fb16747addf376c7c6c9d4cc8757a2.png);
background-size: contain;
background-repeat: no-repeat;
}