●ナビゲーションバーに「更新履歴」を表示する
ナビゲーションバーのStreamボタンを表示＋アイコンではなく文字列を表示
https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20
https://gyazo.com/d114aa3350979a6a286069e4abde19b7
参考
code:style.css
.stream-btn {
display: block !important;
position: fixed;
}
.stream-btn .kamon::before { /* ボタンの代わりにテキストを表示する */
display: block;
position: fixed;
right: var(--margin-side); /* 変数は下記で設定 */
width: 80px;
content: '更新履歴';
text-align: center;
font-size: 14px; color: #fff; }
.stream-btn .kamon:hover::before {
background-color: rgba(0,0,0,0.1);
}
.stream-btn .kamon:active::before {
background-color: unset;
}
@media screen and (max-width: 767px) {
.stream-btn .kamon::before { right: 114px;} /* 検索ボタンの位置の変化に対応 */
.quick-launch .flex-box .flex-item .left-box {
left: 40px; /* スマホ表示でプロジェクトタイトルを少し左に寄せる */
}
}
code:style.css
@media screen and (min-width: 1261px) {
:root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
:root {--margin-side: 8px;}
}
自分でScrapboxを活用している人でないと「Stream」という語が指す意味にピンと来ないかもしれないと思った。
2021/12/27
ユーザーメニューが右上に出るようになったので表示が被っている
2021/08/02 ウインドウサイズに合わせて適切な位置に表示するよう改良
2021/08/06 スマホ表示でメニューと重なるようになってしまっていたので修正
2021/12/02 余白を変数で設定しボタンのright指定を明解に
2021/12/27 右上にユーザーメニューが表示されるようになったことに伴い適用を中止