ヘッダーメニューをカスタマイズ
現在はこのスタイルは非推奨です！
ヘッダーのレイアウトをちょっと変えてみたよ！
以前のデザインぽい感じ。
ちなみにオリジナルのレイアウトはこちら。
変更部分
1. UserCSSでメニューのアイコンを変更
2. UserCSSでページ追加ボタンを右に移動
3. UserScriptでプロジェクトページへのリンクを追加
このリンクは別のプロジェクトに移動しても更新されない
プロジェクトの名前が長いときはてきとーに省略します
import.css@import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/style.css";import.jsimport "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/script.js"style.css/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.brand-icon, .kamon { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 28px }
/* 2. ページ追加ボタンを検索ボックスの右に移動 */
.navbar-form { flex-flow: row-reverse }
.new-button { margin-left: 10px; margin-right: 0 }
/* 3-a. ヘッダー内のプロジェクトのページへのリンク ※要UserScript */
.col-brand .project-home {
color: #F8F8FF; /* リンクの色 */
margin: 16px 0 0 28px; font-size: 18px;
display: inline-block; max-width: calc(100% - 80px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.col-brand .project-home:hover, .col-brand .project-home:focus,
.col-brand .project-home:active { text-decoration: none; opacity: .6 }
.col-brand .project-home .icon { margin-right: 10px; font-size:.9em }script.js(()=>{
// 3-b. メニューバーの下にあるプロジェクトへのリンクをコピーして、メニューバーの中に配置してます
const project = document.querySelector('.quick-launch .project-home').cloneNode(true)
document.querySelector('.col-brand').appendChild(project)
})()初出 2018-01-11
2018-02-05 クラス名変更
2021-07-06 Font Awesome のアップデートに対応
2024-04-20 更新終了