settings
やまなみ.iconScrapboxのスタイル設定
参考：ColorCode　Encode変換
▼入力記法まとめ
見出し
タイトル
太字マーカー
太字
太字赤背景　太字紫背景
▼拝借先　/ichikens-lecture-pb/settings
code:style.css
.deco-\< {
color: #000000; /* 黒文字 */
background-color: #e6e6fa; /* 紫背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:style.css
/* [ ]<ーこれに蛍光のラインを引く */
.line strong:not(class){
color:#000000;
background:linear-gradient(#ffffff 30%,#00ff01 80%)
}
code:style.css
.line strong {
color: #000000;
}
▼拝借先　/help-jp/文字装飾記法
吹き出し
やまなみ.icon 吹き出しが書ける
右からもできるし、赤くもできる やまなみ.icon
code:style.css
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #a2acaa;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #a2acaa transparent;
}
/* 右吹き出しの角 */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #a2acaa transparent;
}
/* 強調吹き出しの角 */
.deco-\!:before, .deco-\!:after { border-color: #e67373 transparent; }
/* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #66F; }
赤背景
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #e67373; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
▼拝借先　/help-jp/文字装飾記法
code:style.css
body{
background-color: #f7ffe6;
}
背景色の他の候補　fff4f4　ebf6f7　c1e4e9　c1d8e8　cfcfe6　e6e6ff　cfe6e2
▼拝借先　/rashitamemo/Scrapboxのホーム画面でタイトルでページの色を制御する
ページカードの色の設定
code:style.css
.grid li.page-list-item > ahref^="/ArchiTestYmnm-20201101/%E3%80%90%E8%A3%BD%E5%9B%B3%E3%80%91" > .content {
background-color: #e6fbff !important;
}
.grid li.page-list-item > ahref^="/ArchiTestYmnm-20201101/%E5%AD%A6%E7%A7%91%E8%A9%A6%E9%A8%93" > .content {
background-color: #fff7e6 !important;
}
.grid li.page-list-item > ahref^="/ArchiTestYmnm-20201101/%F0%9F%9A%80" > .content {
background-color: #fff7e6 !important;
}
.grid li.page-list-item > ahref^="/ArchiTestYmnm-20201101/settings" > .content {
background-color: #f7ffe6 !important;
}
.grid li.page-list-item > ahref^="/ArchiTestYmnm-20201101/%E2%9C%8F%EF%B8%8E" > .content {
background-color: #f5f5f5 !important;
}
.grid li.page-list-item > ahref*="%E2%9C%85" > .content {
opacity:0.5 !important;
}
▼拝借先　/memooooo/settings
［**　］<-これを見出し風にする
code:style.css
/* ** <ーこれを見出し風にする */
.line strong.level-2{
display: block;
position: relative;
font-size: 150%;
line-height: 160%;
text-align: light;
margin: 12px auto 18px;
font-weight: 100;
}
.line strong.level-2:after{
position: absolute;
content: '';
border-bottom: 3px solid #ffd5cc;
width: 450px;
top: 0;
bottom: -0.5em;
left: 0;
right: 1;
margin: 0 auto;
}
行間を調整する
code:style.css
/* 行間調整 */
.line .section-0{
line-height: 1.2em !important;
}
＃で始まるタグをラベル風にする
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #a3aacc;
font-size: 0.8em;
border: 1px solid #a3aacc;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
▼拝借先　/madobes/settings
code:style.css
.navbar .row .col-menu { width: unset }
@media screen and (min-width: 768px) and (max-width: 1200px) {
.quick-launch { left: 80px } }
/* 拡張装飾記法 見出しっぽい太字テキスト */
.level .deco-\# { border-left: .6em solid #ffcfc6; padding-left: .7rem }
▼拝借先　/help-jp/文字装飾記法
バレットを少し薄めに
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
background-color: #a3aacc;
}
▼拝借先　
ブログタイトルを上部に固定
code:style.css
.quick-launch .project-home {
position: fixed;
top: -2px;
left: 40px;
z-index: 1000;
}
@media screen and (max-width: 767px) {
.quick-launch .project-home {
/* left: calc((100% - 1080px)/2); */
left: 50px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home {
left: 50px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home {
left: 65px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .project-home {
left: calc((100% - 1280px)/2 + 75px)
}
}
Scrapboxアイコンをハンバーガーアイコンに置き換え
code:style.css
.brand-icon, .navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
margin-left: 6px;
content: '\f0c9'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 22px; color: #808080;
}
▼拝借先：/programming-notes/settings
ピン留めされたページを独立した段に表示するUserCSS
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
▼拝借先：/scrasobox/スリムなテロメア
スリムなテロメア→極太テロメアに変わったので削除😢
▼拝借先：/forum-jp/文字色
赤: +　赤
橙: %　橙
緑: "　緑
青: ~　青
紫:&　紫
code:style.css
.deco-\+ {
color: #e60026;
font-weight: bold
}
.deco-\% {
color: #ff8000;
font-weight: bold
}
.deco-\" {
color: #009944;
font-weight: bold
}
.deco-\~ {
color: #1a1aff;
font-weight: bold
}
.deco-\& {
color: #8c1aff;
font-weight: bold
}