ろぼいんブログ
更新:

Twitterですべてのツイートに「さらに表示」が出るバグの解決方法

2023年10月7日ごろから、Twitter(X)ですべてのツイート(ポスト)に[さらに表示]が出てしまうバグが発生しています。ツイートの文章が全部表示されていたとしても、あらゆるツイートに[さらに表示]が出てしまうため不便です。

Twitter上では多くのユーザーがこの問題を報告しており、 #NoMoreSaraniHyouji というハッシュタグまで生まれています。

この記事では、すべてのツイートに[さらに表示]が出る条件と解決策を紹介します。

[さらに表示]が出る条件

本来は、長いツイートの文章の一部が隠れていることを示すために、ツイートの最後に[さらに表示]が表示されます。

しかし、10月7日ごろから一部の環境でツイートの長さにかかわらず、すべてのツイートに[さらに表示]が出てしまっています。

この問題が発生する条件は次のとおりです。

  • ブラウザーとしてFirefoxを使っている
  • ブラウザーのフォントがメイリオになっている
  • ツイートが英語以外で書かれている

解決策

この問題は、Firefoxの代わりにChromeを使うか、Firefoxのフォント設定を変更することで回避できます。

フォントの変更方法には2つあるので、ご自身に合ったものを選んでください。

方法1:Chromeを使う

Firefoxの代わりにChromeを使う解決策は、文字通りブラウザーを変えるだけです。ここでは詳しい手順は解説しません。

方法2:Firefox全体のフォントを変える

フォントの変更方法の1つ目は、Firefox全体とすべてのWebページのフォントを変える方法です。

Firefoxの設定を開き、[一般]タブの[フォント]の[詳細設定]ボタンをクリックします。

ダイアログが表示されるので、[ゴシック体 (Sans-serif)]を [メイリオ]以外 のフォントに変更します。また、必ず[ウェブページが指定したフォントを優先する]のチェックを外してください

Firefoxのフォントの設定画面のスクリーンショット

方法3:Twitterのフォントだけを変える

すべてのサイトのフォントが変わってしまうのが気になる場合は、Twitterのフォントだけを変更できます。

特定のページのフォントだけを変更するには、 Stylus という拡張機能をインストールする必要があります。

StylusをFirefoxにインストールしたら、ツールバーの拡張機能マークからStylusを選択し、設定画面を開きます。

拡張機能マークをクリックしたようすのスクリーンショット

Stylusの設定画面が開いたら、[twitter.com]という文字列がハイライトされるようにマウスホバーします。このとき、[このURL]という部分はハイライトされないようにしてください。

Stylusの設定画面

スタイルの編集画面が表示されるので、次のテキストをコピーして貼り付けます。貼り付けたら、Ctrl+Sキーを押して保存します。

Stylusのスタイル編集画面
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)}
* {
font-family: "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

游ゴシック以外のフォントを使いたい場合は、"Yu Gothic"の部分を他のフォント名に変更してください。このとき、フォント名の前後に"をつけるのを忘れないでください。

たとえば、Noto Sans JPを使いたい場合は、次のように書きます。

* {
font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

まとめ

Twitterの[さらに表示]が出るバグは、Firefoxのフォント設定が原因で発生しています。このバグは、Twitterで使用されるフォントを変更することで回避できます。

また、類似の問題はYouTubeのコメント欄でも発生しており、この問題も同様の方法で回避できます。YouTubeについては、こちらの記事で解説しています。

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

最新記事