X（Twitter）でツイートの右上に表示されるGrokボタンを非表示にする方法

2024年12月中旬から、Web版のX（旧Twitter）でツイート（ポスト）の右上にGrokのボタンが表示されるようになりました。このボタンをクリックすることで、そのポストの内容についてGrokに質問できます。

この記事では、ポストの右上に表示されるGrokボタンを非表示にする方法について紹介します。なお、Xのメニューに表示されるGrokボタンを非表示にする方法やGrokの使い方については、こちらの記事で紹介しています。

X（Twitter）のGrokのボタンを消す方法

X（旧Twitter）のスマートフォンアプリやWeb版にて、［Grok］という機能のボタンが表示されるようになっています。この記事では、Grokボタンを非表示にする方法を紹介します。

XのAI「Grok」が無料ユーザーでも利用可能に　2時間に10回までの制限付き

X（旧Twitter）の関連会社であるxAIが開発し、Xに組み込まれているAI「Grok」が無料ユーザーでも利用できるようになりました。

Grokボタンを非表示にする方法

右上に表示されているGrokボタンを非表示にするには、Webブラウザーの拡張機能を利用する必要があります。

筆者はこのボタンがWeb版で表示されることを確認していますが、アプリ版で表示されるかは不明です。もしアプリ版でボタンが表示された場合は、この方法では非表示にできません。

Web版については、次の手順で非表示にできます。

なお、拡張機能を利用できるWebブラウザー（PCのWebブラウザーやAndroid版Firefox、iOSのSafariなど）が必要です。

1. Stylusをインストールする
   Webページのデザインを上書きできる拡張機能「Stylus」をブラウザーにインストールします。CSSの設定ができる拡張機能であれば他のものでも代用できますが、ここではStylusを使って説明します。

   • Chrome版・Edge版Stylus
   • Firefox版Stylus

2. Stylusのアイコンをクリックする
   Web版のXを開いた状態で、拡張機能ツールバーからStylusのアイコンをクリックします。

   

3. x.comを選択する
   ［次のスタイルを書く：］でx.comをクリックします。このとき、x.com以外の部分（/homeなど）がハイライトされておらず、x.comのみがハイライトされている状態でクリックしてください。

   

4. CSSを入力する
   スタイルの設定画面が表示されるので、中央にある大きなテキストボックスに、次のテキストをコピーしてそのまま貼り付けます。

   try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}

   1
   [data-testid="tweet"] button:has(g g) {
   2
       display: none !important;
   3
   }

   

5. 保存する
   画面左のサイドバーにあるオレンジ色の［保存］ボタンをクリックして設定を保存します。

まとめ

この記事では、Web版のXでツイートの右上に表示されるGrokボタンを非表示にする方法について紹介しました。この方法を使えば、Grokボタンを非表示にして、ポストをより見やすくできます。

参考

• XユーザーのxAIさん: 「Grok, analysis! Introducing the Grok button: now on posts across your home timeline! Use it to uncover context, understand real-time events, and explore trending discussions. https://t.co/6iIPYxmYlo」 / X