最初 header

上に残るヘッダーを外す

スクロールしても上部のメニューが付いてきますか？このショートカットは、ほかの浮動ボタンを残したまま、その帯を外そうとします。

パソコンで下のボタンをブックマークバーにドラッグします。その後、対象のページを開いてブックマークを使ってください。

固定ヘッダーを外す

スマートフォンをお使いですか？下に別の使い方をまとめています。

仕組みと使いどころ

スマートフォンではどう使いますか？

コードをブックマークのアドレスとして保存する方法を試せます。まず下のコードをコピーしてください。

iPhone（Safari）： 適当なページをブックマークし、そのブックマークを長押しして「編集」を選び、アドレスをコピーしたコードに置き換えます。

Android（Chrome）： ページをブックマークします。ブックマーク一覧で横の三点メニューから「編集」を選び、アドレスをコピーしたコードに置き換えます。

変更したいページを開いて、そのブックマークを選びます。メニューから動かない場合は、アドレスバーにブックマーク名を入力し、表示された候補を選んでください。

ブックマークのアドレス

javascript:void(function(){var list=document.querySelectorAll("header,[role='banner']");var i,el,cs,r;for(i=0;i<list.length;i++){el=list[i];cs=getComputedStyle(el);if(cs.position==="fixed"||cs.position==="sticky")el.style.setProperty("position","static","important");}list=document.body.getElementsByTagName("*");for(i=0;i<list.length;i++){el=list[i];cs=getComputedStyle(el);if(cs.position!=="fixed"&&cs.position!=="sticky")continue;r=el.getBoundingClientRect();if(r.top<48&&r.width>innerWidth*0.55&&r.height<innerHeight*0.45)el.style.setProperty("position","static","important");}}())

動作はブラウザーやバージョンによって異なります。ページ側でこの方法がブロックされることもあります。

iPhoneでは「ショートカット」アプリも使えます

「ショートカット」アプリで「WebページでJavaScriptを実行」アクションを追加し、下のコードを貼り付けます。SafariのWebページ用に共有シートへの表示を有効にします。求められた場合は、ショートカットの設定でスクリプトの実行を許可してください。次にSafariで対象のページを開き、共有から作成したショートカットを選びます。

ショートカット用コード

void(function(){var list=document.querySelectorAll("header,[role='banner']");var i,el,cs,r;for(i=0;i<list.length;i++){el=list[i];cs=getComputedStyle(el);if(cs.position==="fixed"||cs.position==="sticky")el.style.setProperty("position","static","important");}list=document.body.getElementsByTagName("*");for(i=0;i<list.length;i++){el=list[i];cs=getComputedStyle(el);if(cs.position!=="fixed"&&cs.position!=="sticky")continue;r=el.getBoundingClientRect();if(r.top<48&&r.width>innerWidth*0.55&&r.height<innerHeight*0.45)el.style.setProperty("position","static","important");}}());completion();

パソコンのコンソールではどう使いますか？

変更したいページを開きます。Chromeで Ctrl + Shift + J（Windows/Linux）または ⌘ + Option + J（Mac）を押し、下のコードをコンソールに貼り付けて Enter を押します。

コンソール用コード

void(function(){var list=document.querySelectorAll("header,[role='banner']");var i,el,cs,r;for(i=0;i<list.length;i++){el=list[i];cs=getComputedStyle(el);if(cs.position==="fixed"||cs.position==="sticky")el.style.setProperty("position","static","important");}list=document.body.getElementsByTagName("*");for(i=0;i<list.length;i++){el=list[i];cs=getComputedStyle(el);if(cs.position!=="fixed"&&cs.position!=="sticky")continue;r=el.getBoundingClientRect();if(r.top<48&&r.width>innerWidth*0.55&&r.height<innerHeight*0.45)el.style.setProperty("position","static","important");}}())

効果は開いているページに適用されます。コンソールで実行する前にコードの内容を確認してください。ブラウザーが安全上の警告を表示する場合もあります。

ボタンは header と、上に張り付いた幅の広い帯を外します。チャット、隅の通知、ほかの固定はそのままです。

上部のバーをどう見分けますか？

いちばん多いのは上のバーです。下へ進んでも残り、見出しやボタンや最初の行を覆います。

ボタンは header、banner と印の付いた帯、上に貼り付いた幅の広いバーを外します。位置が fixed または sticky のものです。

別の隅に固定されたものは対象にしません。まとめて外すときは、固定要素のツールを使います。

こちらを使うとき

上のメニューが画面の帯を占めていて、その帯をページの流れに戻して読みたいときに使います。

バーは浮かなくなります。あとに続くものを覆う代わりに、内容の先頭を占めます。

張り付いたままのもの

チャットのボタン、隅のクッキー通知、小さなプレーヤー、固定フッターは対象ではありません。

変化は読み込み直すと終わります。ブックマークはバーに残ります。