Twitterで変な線が出る原因と対処法を解説

Twitterでは、投稿やトレンドワードなどの周りに変な線が出ているユーザーが発生しました。

今回の記事では、Twitterで変な線が出る原因と対処法について解説していきます。

Twitterで変な線が出る

Twitterでは、投稿と投稿の境目や各機能のボックスなどが薄い線で分けられています。

通常各コンテンツの括りや境目などは薄い線で分けられているのですが、今回の問題では一部がくっきりとした黒い線で囲まれたデザインになってしまっている方がいます。

トレンドワードとタイムラインで黒い枠線が表示される

変な線が出ていると話題になったのは、トレンドワードとタイムライン上に流れてくる投稿の枠線です。

通常でも薄い灰色の枠線で囲まれていたり、背景が薄い灰色になっている箇所ですが、こちらがはっきりとした黒いラインで囲まれているという状況です。

変な線が出る原因

ここからは、Twitterで変な線がでる原因について解説していきます。

ソースコード内に余計なものが付与されている

変な線が出る原因としては、ソースコード内に余計な値が付与されていることが原因です。

今回はおそらく、対象の枠線に該当するclassに、不要なclassを付与していたことにより本来必要がないCSSの設定が適応されていたことが理由のようです。

ソースコードの設定はユーザー側では行わず、Twitter側で行われるものです。

何かしらのアップデートの際に線が出ている状態のままにしてしまい、一時的に表示されたなどの可能性があります。

仕様変更の可能性は？

今回の内容はソースコードが影響しているものですが、即時に修正されたことから仕様変更の可能性は低いのではないかと思われます。

何かしらの検証、もしくはデザイン面の修正やアップデートを行う際に、不要な設定をしたまま反映されてしまった可能性があります。

対処法

今回の問題はデザイン面の一部の設定不備のため、気にならない方はそのままTwitterを利用すれば問題ありません。

また即時で修正されたため、2023年6月20日 16:00現在では元のUIに戻っています。

一方で引き続き変な線が残っているという場合には、

上記を試すことで変な線が消える可能性があるので、試してみてください。

TweetDeckで閲覧する

TwitterのUIがおかしい場合には、TweetDeckを利用してタイムラインの投稿を確認したり、検索をしてみてください。

TweetDeckはデフォルトで新バージョンのUIになっていますが、見にくい場合には下記の関連記事を参考に手動で旧デザインでも閲覧できます。

Twitterの検索でサジェストが表示されなくなった詳細や対処法について解説

おかしい箇所のHTML・CSSを調べてみる

ソースコードを閲覧することに抵抗がない場合や、原因の箇所が気になる場合には、PCからTwitterにアクセスしてデザインがおかしくなっている箇所のCSSを調べてみてください。

Macの手順としては、Twitterのブラウザ画面が開かれている状態で右クリックをします。

メニューが表示されるので検証をクリックしてください。

検証モードが表示されるので、左側の四角と矢印のマークをクリックします。

検証したい箇所の検索ができるので、左側の画面からソースコードを確認したい箇所にカーソルをあててクリックします。

対象の箇所のHTMLとCSSが表示されるので、内容におかしいものがないかを見てみてくだださい。

手動でHTML・CSSを書き換えてみる

どうしてもデザインを修正したい場合には「おかしい箇所のHTML・CSSを調べてみる」でご紹介した手順で検証モードを開き、手動で書き換えてみてください。

一時的にはなりますがデザインを修正することができます。

コードを書き換えて悪影響はないのか？

ブラウザ上でHTML・CSSを手動で書き換えてデザインを変更するだけであれば、特に大きな問題はありません。

書き換えられるのはあくまで自分のブラウザ上に表示されているデザインのみなので、他のユーザーに影響もありません。

また万が一デザインをおかしくしてしまっても、ページの再読み込みを行えば元々の設定に戻ります。