UserCSS:ナビゲーションバー
ナビゲーションバー（navigation bar） - Scrapbox:ナビゲーションバー
UserCSS:navigation bar
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
/* 1 ナビバーのアイコン（グローバルメニュー） */
--navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg"); /* */
--navi-icon-C: url('/api/pages/suto3/clipart/icon'); /* */
--navi-icon-B: url('/api/pages/suto3/haku/icon'); /* */
--logo-url: var(--navi-icon); /* */
}
code:css
.navbar {
}
.navbar-default {
}
.navbar-brand {
}
.navbar-brand
Navbarに設置するロゴ
ブランドアイコン（brand icon）
基本的な背景色の設定
code:stylexx.css
.navbar {
background-color: var(--main-color, red);
}
背景色にグラデーションをかける
UserCSS:グラデーション
code:stylexx.css
.navbar {
background:
linear-gradient(to top,
var(--base-color, darkblue),
var(--main-color, blue),
var(--base-color, darkblue)
);
}
背景にアニメーション効果をつける
UserCSS:アニメーション
code:stylexx.css
.navbar {
background: linear-gradient( to bottom,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) center 0% / auto 1400% ; /* グラデーション */
animation: navbar 560s linear infinite;
animation-direction: reverse;
}
@keyframes navbar {
to { background-position-y: 1400%; }
}
動かない、原因不明
code:stylexx.css
.navbar {
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) center 0% / auto 200% ; /* グラデーション */
animation: navbar 60s linear infinite;
animation-direction: reverse;
}
@keyframes navbar {
to {background-position-x: 200%;}
}
code:style.css
.navbar {
background: linear-gradient( to bottom,
var(--main-color, blue),
var(--base-color, darkblue),
var(--main-color, blue)
) center 0% / auto 600% ; /* グラデーション */
animation: navbar 30s linear infinite;
animation-direction: reverse;
}
@keyframes navbar {
to { background-position-y: 600%; }
}
code:stylexx.css
.navbar {
background: linear-gradient( to right,
darkblue,
var(--main-color, blue),
var(--base-color, darkblue)
) center 0% / auto 400% ; /* グラデーション */
animation: navbar 30s linear infinite;
animation-direction: reverse;
}
@keyframes navbar {
to { background-position-ｘ: 400%; }
}
FontAwesome を使ったアイコンの置換
code:stylexx.css
.navbar-brand img, .navbar-brand span {
display: none !important
}
.navbar-brand::before {
font-family: 'Font Awesome 5 Free';
font-weight: 600;
font-size: 32px;
content: '\f02d'; /* */
/* content: '\f0ac'; /* */
/* content: '\f0c9'; /* */
}
/customize/左上のScrapboxアイコンを好きな画像に変える
code:stylexx.css
.navbar-brand img, .navbar-brand span {
display: none !important ;
}
.navbar-brand::before {
/* content: '🍔'; */
/* content: '💖'; /* */
content: ''; /* */
width: 60px;
height: 40px;
padding: 24px;
position: absolute;
background-image: var(--navi-icon); /* */
background-size: cover;
border-radius: 4px; /*角丸*/
}
code:stylexx.css
.navbar-brand::after {
content: '';
margin: 0px 60px;
width: 40px;
height: 40px;
position: absolute;
/*ここに画像へのリンクを貼る*/
/* background-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);*/
/* background-image: url(https://daiiz-apps.appspot.com/today/jp.svg); /* */
background-image: var(--navi-icon-B);
background-size: cover;
border-radius: 4px;/*角丸はお好みで*/
}
code:style.css
.navbar-brand::before {
content: ''; /* */
margin: 0px 60px;
width: 40px;
height: 40px;
/*padding: 24px;*/
position: absolute;
/* background-image: url('/api/pages/suto3/haku/icon'); */
background-image: var(--navi-icon-B); /* */
/* background-size: cover;*/
background-size: 40px 40px;
border-radius: 3px; /*角丸*/
}
code:style.css
.navbar-brand::after {
content: ''; /* */
margin: 0px 120px;
width: 40px;
height: 40px;
/*padding: 24px;*/
position: absolute;
background-image: var(--navi-icon-C); /* */
background-size: cover;
border-radius: 3px; /*角丸*/
}
UserCSS:禅モード
ナビゲーションバーを非表示にする
https://img.shields.io/badge/UserCSS-ナビゲーションバー-1572B6.svg?logo=css3&style=for-the-badge
#UserCSS-term
UserCSS.icon