/suto3/UserCSS:ナビゲーションバー

generated at 2/17/2025, 1:14:47 PM
UserCSS:ナビゲーションバー
ナビゲーションバー（navigation bar） - Scrapbox:ナビゲーションバー
UserCSS:navigation bar
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); /* */
 }


css.navbar {
}
.navbar-default {
}
.navbar-brand {
}

.navbar-brand
Navbarに設置するロゴ
ブランドアイコン（brand icon）

基本的な背景色の設定
stylexx.css.navbar {
  background-color: var(--main-color, red);
}

背景色にグラデーションをかける
UserCSS:グラデーション
stylexx.css.navbar {
  background:
    linear-gradient(to top, 
      var(--base-color, darkblue), 
      var(--main-color, blue),
      var(--base-color, darkblue) 
    );
}

背景にアニメーション効果をつける
UserCSS:アニメーション
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%; }
 } 

動かない、原因不明
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%;}
 } 

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%; }
 } 

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 を使ったアイコンの置換
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アイコンを好きな画像に変える
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; /*角丸*/
}

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;/*角丸はお好みで*/
}

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; /*角丸*/
}  

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:禅モード
ナビゲーションバーを非表示にする

#UserCSS-term