HTML

ChromeでTwitterの右カラムやDMポップアップ等を非表示にする

HTML

どうも、先日Twitterのアカウント名を「東証全部退場」にしたところ気に入りすぎて延々戻せていないkayolabo801です。

さて、昨今のTwitter、息苦しくないですか。

どうでもいいトレンドは通報できるくせにセンシティブなトレンドは非表示にすらできず、トレンド欄ではブロックすら貫通する始末。

これではTwitterはどんどんヘイトを蓄積するプラットフォームになってしまいます。

諸悪の根源はいつの間にやら右カラムに常駐し出したトレンド欄です。

こいつが四六時中目に入るせいでストレスなんですよね。

ついでに右下のDM欄は使ったことないしクソ邪魔。

どうにかこいつらを非表示にできないものか…

と思って調べてみるといいものを発見しました。

特定のサイトの特定のCSSを弄れるChrome拡張”Stylus”

「このサイトのこの要素のCSSをこう表示する」といったことが可能なChrome拡張、「Stylus」というものがありました。

こいつで右カラム要素と右下のDMの要素を非表示にしてやればいいわけです。

実際の方法

まずはStylusをChromeに追加しましょう。

そうすると右上の拡張機能欄にStylusが追加されるので、そいつを選択→管理ボタンをクリックします。

するとStylusの管理画面に飛びます。

左にある「新スタイルを作成」をクリック。

そうして「コード1」欄に以下のコードを追加しましょう。

[data-testid="sidebarColumn"],
[data-testid="DMDrawer"]{
display: none
}

このコードを解説すると、Twitterの右カラムに付与されている「 data-testid=”sidebarColumn” 」と右下のDM欄に付与されている「 data-testid=”DMDrawer” 」という要素を指定してやり「display: none」で非表示にしているわけです。

どこにどのようなIDが付与されているかはサイトを開いた状態で目当ての要素を右クリック→検証をクリックすることで見ることができます。

つまり要素に付与されているIDさえ見抜ければ任意の要素を削除することが可能です。

最後に適用先を「次で始まるURL」「https://twitter.com」としてTwitter以外のサイトでStylusが動かないようにし、保存をクリックします。

Twitterのサイトに戻って画面を更新してやると…

このとおり右カラムと右下のDMポップアップ欄を消すことができました。

マトーメ

最近では見たくない情報まで流れてきてしまうTwitter、このような物理的自衛も可能です。

不必要な情報はシャットアウトしてお気楽なTwitterライフを送ってみませんか。

私をHTML中級者に育てた3冊

HTML レビュー 隙あらば自分語り

どうも、人生で初めてボイチェンに触ってみたら自分の笑い声のあまりの可愛さに悶え死んだカヨコです。

高校2年の終わりにHTMLに触り始め、今ではWordPressのレスポンシブテーマを1から組むことができるようになりました。
自分で言うのはおこがましいですが、そろそろ「HTML中級者」を名乗ってもいいのかなと思っております。

さて、私が1年半である程度Webサイト制作ができるようになったのは、3冊の教本の力が大きかったと思っています。
あの3冊に出会わなければ私は未だ生半可なHTML知識でイキり散らしていたでしょう。

てなわけで早速紹介していきます。

わかばちゃんと学ぶ Webサイト制作の基本(湊川あい)

高3のはじめ辺り、私が絶賛HTML初心者イキリをかましていた時に出会った1冊です。

これを読んで全てが変わりました。

内容としては、

  • そもそも何故Webサイトを作るのか
  • HTMLの基礎
  • CSSのちょっと込み入ったとこまで
  • JavaScriptやPHPについてかるーーーーーーーーーく
  • Webサイト公開後の運営について

という感じです。

CSSに関して優先度とか疑似要素とか「大事だけど難しめの内容」まで網羅されているのが素晴らしいと感じますが、何よりこの本を第一に薦める理由は、
「初心者が見落とすWebサイトの制作意義Webサイトの運営
について超丁寧に説明されていることです。

ここが何より重要なのに、巷の初心者用HTML教本には書かれてません。HTML技術だけです。
ぶっちゃけタグとかの知識なんてggれば出てきます。
初心者用教本では技術よりこの2つを教えるべきです。

HTML始めたい人は絶対最初にこの1冊を買ってください。てか買え。

HTML5&CSS3デザインブック(エビスコム)

こいつは「きちんとWebサイトを組む」ことができるようになるための1冊です。

これを参考に1~2回サイトを組んでみれば、「レスポンシブデザインのサイトがどういう構造になっていて、どう組めばいいのか」が分かるようになります。

ただ、少々古めの本なので最新のコーディングトレンドには全然対応していません。
そのせいで私も少し古典的なHTMLを組む癖がついてしまいました。
なので、私としてはこの1冊を薦めますが、ナウいHTMLerになりたい方は別を当たってもいいかもしれないです。

WordPressデザインブック(エビスコム)

これはWordPressテーマを1から作るにあたって私が読むべきと思う1冊です。

2冊目にちょっと古い本を紹介したのは、この本にスムーズに移行できるようにするためです。
2冊目の内容が分かっていれば、難なくWordPressテーマを完成させることができます。

AMAZONでは酷評が目立ちますが、あれはHTMLの勉強の手順を踏まずいきなりWordPressに飛びついた連中のご意見なので気にしなくていいです。(過激派)

とりあえずこの3冊(前半2冊でもいいです)を読みきったら、それだけでHTML中級者を名乗っていいと思います。

ぶっちゃけHTMLは超簡単なので、どうか皆さんも「正しい順序で」勉強して欲しいと思っています。