settings
https://2.bp.blogspot.com/-R-XVqRsWq_o/WXcRC6-fNTI/AAAAAAABFps/t4i2Su5UXwINaYzX8khQrApA3ZjOrv2uACLcBGAs/s800/animal_mogura_kouji2.png
↑いらすとやさんより
==========================================
※ホームページ全体CSSの設定用ページ cf. UserCSS
code:style.css
/*Noto Sans Japanese(和文フォント)の導入*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
/*Ubuntu Mono(英文フォント)の導入*/
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
/*Sacramento(ページタイトル用フォント)の導入*/
@import url('https://fonts.googleapis.com/css2?family=Sacramento');
/* ページの白い背景の透明度(0が最大、1が最小)を指定：➂ */
.page{opacity:0.9;}
/* ページ一覧のカードの背景の透明度 */
.grid{opacity:0.9;}
body{
color: #14171a; /*フォントカラーの指定*/
/* 英文フォント→和文フォント→sans-serif(導入できなかった場合)の優先順でフォント指定：➁ */
font-family: 'Ubuntu Mono', 'Noto Sans JP', sans-serif;
/* 背景画像指定 */
background-image:
URL('https://gyazo.com/a06b6fb7427cb9772e64b15762c795f4.png');
/* 背景画像拡大表示方法指定 */
background-size:cover;
}
/* body以外でもフォント指定する必要があって、その辺をやってくれてるっぽい？：➁ */
.editor, .stream, li.page-list-item{color:unset !important; font-family:unset !important;}
/* * ** に蛍光のラインを追加：➀ */
.level-1{background: linear-gradient(transparent 60%, #ffeb36 60%);}
.level-2{background: linear-gradient(transparent 60%, #ffeb36 60%);}
.level-3{background: linear-gradient(transparent 60%, #ffeb36 60%);}
/* ＃をラベル風に変更：➀ */
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);
}
/* ナビゲーションバー(上部)のロゴを任意の画像に変更（上書き）：➃ */
a.navbar-brand.dropdown-toggle{
position: relative;
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 2px;
left: 0px;
background-image: url(https://gyazo.com/b059db2bb9c68182fe59068fcbeb01b9.png);
background-size: contain;
background-repeat: no-repeat;
}
/* , で文字サイズ縮小 */
.deco-\, {font-size: 80%;}
/* ピン留めページを別段に表示する：➄ */
.page-list-item.pin + .page-list-item:not(.pin) { clear: both; }
/* 画像に影をつける：➅ */
.line .image, .line .strong-image {
box-shadow: 0 0 10px rgba(0,0,0,.6);
margin-top: 10px;
margin-bottom: 10px;
}
/* 外部リンクにアイコンをつける：➅　無効化中 */
/*
.line a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
*/
/* カードの画像を見切れないようにする＆上下中央揃え：➅ */
.content .icon {
overflow: hidden;
}
.content .icon img {
height: auto !important;
width: auto !important;
max-height: 100%;
max-width: 100%;
}
.content .icon {
margin: auto 0 auto 0;
}
/* Streamにアクセスするボタン(右上)：➆ */
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
/* ページ一覧でタイトル省略なし：➇ */
body .grid li.page-list-item a .title {
max-height: inherit !important;
-webkit-line-clamp: 1000 !important;
}
/* 行番号を表示 -- ウィンドウ幅768px以上で適用：➈ */
@media screen and (min-width: 768px) {
.lines { counter-reset: line }
.line:not(.line-title) { counter-increment: line }
.app:not(.presentation) .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号の色指定 */
color: white }
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before { opacity: .5 }
.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder }
}
/* ページ一覧を幅いっぱいに表示：➉ */
.container {
max-width: initial;
}
/* ピン留めしたページを目立たせる：➉ */
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, #4dc3fa, #4dc3fa 50%, #252a30 50%, #252a30);
}
/* 検索ボックスのドロップダウンを広くする：⑾ */
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto
}
/* プロジェクト名を装飾してナビゲーションバーに表示する：⑿ */
/* プロジェクト名変更＆フォント指定＆サイズ指定 */
a.project-home > span.title {
font-size: 0;
height: 38px;
}
a.project-home > span.title:after {
font-size: 24px;
font-family: 'Sacramento', sans-serif;
content: "MapleLemon";
}
/* プロジェクト名がナビゲーションバーに来るように諸々を調整 */
.quick-launch .left-box {
position: fixed;
top: 0;
color: white;
z-index: 1000;
width: 100%;
pointer-events: none;
}
span.kamon.kamon-caret-down {
display: none;
}
.quick-launch .project-home {
left: 60px;
color: white;
position: relative;
pointer-events: auto;
}
.quick-launch {
margin-bottom: 1rem;
}
.quick-launch .project-home:hover {
background-color: rgba(0,0,0,0.08)!important;
color: snow!important;
}
/* ページ内タイトルと本文の間に線を引く＆カラー指定：⑿ */
.line.line-title {
padding-bottom: 20px;
}
.line.line-title .text {
padding-bottom: 8px;
border-bottom: dotted 1px #4dc3fa;
}
/* インデント（コード外は・）部分に色付けして、わかりやすく：⒀ */
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(4n+1) .pad {
background: #4dc3fa !important;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+2) .pad {
background: #f7c4e3;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+3) .pad {
background: #6bc9ce;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+4) .pad {
background: #fcf79b;
opacity: 0.5;
}
/* UserScript生成物用プロジェクト全体反映CSS */
@import "/api/code/maplelemon/UserScript/style.css";
メモ：⑬を変更して、もう少し幅を狭めたい気がしたけど、やり方が分からない... widthの項目追加してあれこれするだけではダメそう...? あと見栄えと見やすさ的に悪くなる可能性もあるので...という感じ（そのうち時間ができたら取り掛かる）
背景画像
https://gyazo.com/a06b6fb7427cb9772e64b15762c795f4
ナビゲーションバー左上のロゴ画像
https://gyazo.com/b059db2bb9c68182fe59068fcbeb01b9
Scrapbox上でのコードの書き方
code:style.css
ここにコード
===========================================
UserCSSの参考にさせていただいたリンク
文字装飾記法：/help-jp/文字装飾記法
UserCSSの書き方例：/help-jp/UserCSS
①おしゃれな感じのやつ：/memooooo/settings
②フォント指定のCSSを書くに参照：/shiology/05161-180613_初期設定がゴシック体なScrapboxでフォントを明朝体に変更する設定
③背景透過の参照：/customize/背景画像を設定するUserScript
➃ナビゲーションバーのロゴ：/yamanoku/settings
➄ピン留めページの別段表示：/aioilight/settings
⑥画像に影＋外部リンクアイコン(無効化)＋カード画像の位置調整：/MISONLN41/settings
➆Streamにアクセスするボタン：/customize/Streamにアクセスするボタン
➇ページ一覧でタイトル省略なし：/rinsuki/settings
➈行番号表示：/scrasobox/行番号を表示する
➉ページ一覧を幅いっぱいに表示＋ピン留めページを目立たせる：/calvino/settings
⑪検索ボックスのドロップダウンを広くする：/scrasobox/のびのびドロップダウン
⑫プロジェクト名を装飾してナビゲーションバーに表示する＋ページタイトルアンダーバー：/ci7lus/settings
⑬インデント部分に色付け：/yuiseki/settings
===========================================
旧ホームページのリンク先
https://ricapitolare.vercel.app/svg?url=https://sites.google.com/site/maplelemons3/#.svg https://sites.google.com/site/maplelemons3/
https://ricapitolare.vercel.app/svg?url=https://sites.google.com/view/maplelemon#.svg https://sites.google.com/view/maplelemon
===========================================
Scrapbox 問い合わせ先
お問い合わせ ご要望は/forum-jpでも受け付けています。