IDEによくあるミニマップ。近年どんどん細く掴みにくくされるスクロールバーの代わりになり大変便利。
Vivaldiのページアクション機能でWebページにも適用出来て感動し、検索するとスクリプトが配布されていたのでWordPressに設置してみた。
設置
配布元: pagemap · mini map for web pages · larsjung.de
設置は簡単で、JSを読み込み、<canvas>タグとスクリプトを一行追加し、CSSで調整。同梱のdemoからコピーできる。
JS読込
DLしたpagemap-1.4.0.min.jsを任意のフォルダにUP。function.phpに以下を追加、(設置URL)を編集。
function js_footer()
{
echo <<< EOM
<canvas id='map'></canvas>
<script src="(設置URL)/pagemap-1.4.0.min.js"></script>
<script>
pagemap(document.querySelector('#map'));
</script>
EOM;
}
add_action( 'wp_footer', 'js_footer' );BODY最下部で読み込むようになる。
WordPress以外(静的Webページ)の場合は、</body>直前に3～7行目を手動で貼り付け。
CSS追加
テーマCSSに以下を追加し、位置とサイズを調整。
#map {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
z-index: 100;
}このサイトではwidth: 80px、height: 60%。レスポンシブ対応で画面幅1080px以下はdisplay: none。
運用
ページ全体を把握出来、ページ途中にも一瞬で飛べ、少ない移動量で高速スクロール。いい事しかないミニマップを置こう。