●PageMenu：「関連リンクを左列に持ってくる」をオンオフする

概要

サムネイルで並んでいる状態を見たい時とか

参考

挙動

（他にも干渉しそうな関連リンク周りのCSSは設定しないほうがよいと思われる）

再度クリックするとstyle要素が削除されるのでCSSが解除される

表示を変えた状態で他のページに移った場合変更は維持される

https://gyazo.com/4e8a465f9706092f53b7f4edcd616294

（なんかちょっと関連リンク欄の位置が想定と違うけど…（左に寄りすぎている））

→head内だからだ（他のCSS設定で上書きされるということか）

code:script.js

scrapbox.PageMenu.addMenu({

title: '関連リンクを左に',

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);

});

};

},

})

備考

私の都合で変更する可能性があります

それでも構わない場合はそのままに、自分のプロジェクトにコピペとかした場合はそちらのURLに書き換えて使ってください

上記のコードではPageMenuにしているけどGIFではItemにしている

headかbodyか問題

head内だと他のCSSで上書きされる箇所が生じる

期待した挙動にならない部分が多いので望ましくない

bodyの最後だと逆に他のあらゆるCSSに勝ってしまう

他のCSSとの兼ね合いを考えて読み込むコードを調整する必要がある

所感

PageMenuで一番やりたかったことは実装できてしまった