ブラウザ：お気に入りに仕込む遊び技。ページを急にTwitter風に変換JavaScript

ブラウザでページをtwitter風に

～ページをtwitter化するのブックマークレット～

ブラウザの「お気に入り」は
普通はページを開くためのものですが、

実は JavaScriptを登録すると小さなツールとして使うことができます。

こうした仕組みは ブックマークレット と呼ばれます。

今回は遊びネタとして、

ページをtwitter化するブックマークレット

を作ってみます。

クリックすると、
ページがtwitter風のレイアウトに変わります。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{if(window.__xTheme)return;window.__xTheme=1;const s=document.createElement('style');s.textContent=`html,body{background:#000!important;color:#e7e9ea!important;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}body{max-width:600px!important;margin:0 auto!important;padding:20px 16px 80px!important}*{background:transparent!important;color:inherit!important;border-color:#2f3336!important;box-shadow:none!important;text-shadow:none!important}img,svg,video,iframe,canvas{border-radius:16px!important;max-width:100%!important}a{color:#1d9bf0!important;text-decoration:none!important}button,[role="button"],input,textarea,select{background:#16181c!important;border:1px solid #2f3336!important;border-radius:9999px!important;color:#e7e9ea!important;padding:10px 14px!important}div,section,article,main,aside,header,footer,nav{border-radius:16px!important}body>*{background:#000!important}.x-card,article,section,main>div,body>div{background:#000!important;border:1px solid #2f3336!important;padding:12px 14px!important;margin:0 0 12px!important}h1,h2,h3{font-size:20px!important;font-weight:800!important}p,span,li{line-height:1.5!important}body:before{content:"ホーム  \\2003  話題を検索  \\2003  通知  \\2003  メッセージ";display:block;position:sticky;top:0;z-index:999999;background:#000;border-bottom:1px solid #2f3336;color:#e7e9ea;font-weight:700;padding:14px 10px;margin-bottom:14px}body:after{content:"ポストする";position:fixed;right:24px;bottom:24px;background:#1d9bf0;color:#fff;padding:14px 22px;border-radius:9999px;font-weight:700;z-index:9999999}`;document.head.appendChild(s)})();