ヘッダーメニューをカスタマイズ

現在はこのスタイルは非推奨です！

ヘッダーのレイアウトをちょっと変えてみたよ！

以前のデザインぽい感じ。

https://gyazo.com/b0fb3ff201f840e3aecff20d6bd4942a

ちなみにオリジナルのレイアウトはこちら。

https://gyazo.com/c647419dbcce00ebf3debf2a2bee173b

変更部分

https://gyazo.com/6d2dea86762a9223f504e7dbfb9d2017

1. UserCSSでメニューのアイコンを変更

2. UserCSSでページ追加ボタンを右に移動

3. UserScriptでプロジェクトページへのリンクを追加

このリンクは別のプロジェクトに移動しても更新されない

プロジェクトの名前が長いときはてきとーに省略します

https://gyazo.com/a3028cf0b59a17d5e1ff7ae2bbdf3e9e

code:import.css

@import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/style.css";

code:import.js

import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/script.js"

code: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 }

code:script.js

(()=>{

// 3-b. メニューバーの下にあるプロジェクトへのリンクをコピーして、メニューバーの中に配置してます

const project = document.querySelector('.quick-launch .project-home').cloneNode(true)

document.querySelector('.col-brand').appendChild(project)

})()

2018-02-05 クラス名変更

2021-07-06 Font Awesome のアップデートに対応

2024-04-20 更新終了