●PageMenu：「関連リンクを左列に持ってくる」をオンオフする
概要
●関連リンクを左列に持ってくるを使いたい場合とそうでもない場合があるので切り替えたい
サムネイルで並んでいる状態を見たい時とか
参考
挙動
UserCSSでは設定しないでおき、
（他にも干渉しそうな関連リンク周りのCSSは設定しないほうがよいと思われる）
ボタンをクリックするとHTMLのheadbody部分に
<style id="related-left">～</style> が作られ、表示が変わる再度クリックするとstyle要素が削除されるのでCSSが解除される
表示を変えた状態で他のページに移った場合変更は維持される
（なんかちょっと関連リンク欄の位置が想定と違うけど…（左に寄りすぎている））
→head内だからだ（他のCSS設定で上書きされるということか）
最後の行を
document.body.appendChild(style); にすれば見た目は一応解決するscript.jsscrapbox.PageMenu.addMenu({
title: '関連リンクを左に',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png', // Scrapboxアイコン
onClick: () => {
const cssid = "related-left"; // 適当なidを設定する
let e = document.getElementById(cssid);
if(e){ // 既に設定されている時
e.remove(); // 除去する
}else{ // 設定されていない時
let css;
fetch('/api/code/noratetsu/_CSS_related-page-list_left/style.css')
.then(response => response.text())
.then(text => {
css = text;
const style = document.createElement('style');
style.id = cssid;
style.appendChild(document.createTextNode(css));
// document.head.appendChild(style);
document.body.appendChild(style);
});
};
},
})備考
これだと_CSS_related-page-list_leftを直接参照することになる
私の都合で変更する可能性があります
それでも構わない場合はそのままに、自分のプロジェクトにコピペとかした場合はそちらのURLに書き換えて使ってください
上記のコードではPageMenuにしているけどGIFではItemにしている
headかbodyか問題
head内だと他のCSSで上書きされる箇所が生じる
期待した挙動にならない部分が多いので望ましくない
bodyの最後だと逆に他のあらゆるCSSに勝ってしまう
他のCSSとの兼ね合いを考えて読み込むコードを調整する必要がある
所感
PageMenuで一番やりたかったことは実装できてしまった