ツール・ページ#page#infobox#css#toggle
ページ内のinfoboxを消すuserScript
サイドバーのinfoboxを一時的に隠して、本文を広く表示できます。infoboxが大きくて本文が読みづらいときに、画面をすっきりさせて読むことに集中できます。隠している間はフッターに🥷バッジが出て、クリックするといつでも元に戻せます。
使い方：ページメニューの「hide infobox」を選ぶと隠れます。
デモ
インストール
設定ページの code:script.js に貼る
import "/api/code/cosense-toolbox/ページ内のinfoboxを消すuserScript/script.js";
ソースコード全文を見る（JS）
const hideInfoBoxStyle = `
@media (767px < width) {
.page-column:has(.page-sidebar) {
grid-template-columns: minmax(200px, 3fr) min-content;
grid-template-areas: "page menu";
position: relative;
}
}
.page-sidebar:has(.infox) {
display: none;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
`;
function applyHideInfoBoxStyle() {
const style = document.createElement("style");
style.innerHTML = hideInfoBoxStyle;
style.setAttribute("data-hide-infobox", "true");
document.head.append(style);
return style;
}
function toggleHideInfoBoxStyle() {
const styleEl = document.querySelector("style[data-hide-infobox]");
const badge = document.querySelector("div[data-infobox-hided-badge]");
if (styleEl && badge) {
styleEl.remove();
badge.remove();
return;
}
applyHideInfoBoxStyle();
document.querySelector(".page-column .page-sidebar").className += "r";
showFloatingInfoboxHidedBadge();
}
function showFloatingInfoboxHidedBadge() {
const Badge = document.createElement("div");
Badge.style.cssText = `
width: max-content;
color:white;
margin-left: auto;
background-color: lightgray;
padding: 4px;
margin-right: 1rem;
border-radius: 4px;
font-size: 1.25rem;
font-weight: bold;
cursor: pointer;
`;
Badge.setAttribute("data-infobox-hided-badge", "true");
Badge.innerText = "🥷";
Badge.onclick = () => {
toggleHideInfoBoxStyle();
Badge.remove();
};
document
.querySelector(".footer")
.insertBefore(Badge, document.querySelector(".footer .status-bar"));
}
toggleHideInfoBoxStyle();
scrapbox.PageMenu.addMenu({
title: "hide infobox",
onClick: () => {
toggleHideInfoBoxStyle();
},
icon: "fas fa-caret-right",
});