Recordsからのお知らせ「RINLENMANIA」はこうして作っています。任意のページを読み込んだ直後に好きなCSSを適用できるようになります。これを利用して、Twitterの全ページでトレンドが表示されているdivをdisplay:noneに設定できます。以下その理屈や、Stylusの使い方を延々と説明していく記事となります。はじめに:このサイトの読者層向けの説明こんにちは、ボカロPのアンメルツPです。今回は、見たくないTwitter(ツイッター)のおすすめトレンドを消す方法を説明します。ここでは、よくこの手の記事でググると出てくる「おすすめトレンド」をオフにしたり、海外に設定して読めなくするといった方法ではなく、パソコンでTwitterを見る際に、全ページで「おすすめトレンド」欄ごと完全に非表示にするやり方を紹介しています。「Firefox」で使える「Stylus」という拡張機能(アドオン・エクステンション)を使います。Chromeのものを前提に進めています。情報を集めている最中に余計な情報が手に入って不愉快な気持ちになることがよくあります。「そもそも議題について考えたくないし関わりたくもない、どうでもいい」という精神状態を容赦なく削っていきます。これは自衛をするしかないと思ってます。自分の精神の健康は自分の技術と知識で(と言っても今回はそんな高度な技術ではありませんが)保っていきましょう。非表示にするプロセスまず、執筆時点での普通のTwitterのホーム画面です。Twitterのホーム画面。右下にある「おすすめトレンド」を今回は消します右下に「おすすめトレンド」が表示されております。個人のホーム画面以外に、タイムラインなど、別の画面に移動しても常について回るものです。使った常に非表示にする方法、と順を追って説明していきます。Chromeの開発者ツールを使うCSSとはどうやって消すかと言うと「CSS」を使います。エンジニアの記事においては説明もなく普通に「CSS」という言葉が登場しますが、ここはボカロPのサイトで、この手のツール系の記事を書くのはこれまであまりなかったので説明します。~WordPressで一国一城の主になる方法~CSSとは、Webサイト(ホームページ)を装飾・デザインするのに必要なコンピューター言語のひとつです。HTMLとともに、Webサイトを表示するために使われる代表的な言語です。「HTML」が「文章の構造・中身」を書くものに対し、CSSは「文章や枠などをデザインする」(スタイルシートを適用する)ために書きます。同じ文章でも、太字になったり赤くなったり、枠がかたどられているのはほとんどCSSのおかげです。要素を非表示にするものがあります。これを非表示にしたいHTMLに向けて書いてあげればいいわけです。カードゲーム的に書くと、「対象のHTML要素を選択する。それを非表示にする」みたいな流れですね。好きなWebサイトに行った時に、自動的に追加のCSSを適用してくれるのです。これを利用すると、対象が読み込まれた瞬間に非表示になる、バリアの役割を果たしてくれるというわけです。それでは、実際にStylusをインストールする前に、どのように消えるかを確認しましょう。実はここからいま表示されているWebサイトの内容を好きにいじれるようになっています。別に改ざんできるわけではなく、自分のこの画面上だけ変わるという仕組みです。パソコン(Windows)のキーボードのF12キーを押すと、このように「DevTools」という窓が登場し、WebサイトのHTMLとCSSの中身が誰でも見れるようになっています。この開発者ツールを初回に使うときは、右側に貼り付いた小さなウィンドウしか表示されないかもしれません。その際は、以下の画像のようにボタンを押すと新しいウィンドウで大きく表示されます。Chrome開発者ツール」画面。Chrome開発者ツール」画面(新しいウィンドウで大きく表示)ここで左上にある矢印のようなボタンを押すと、WebサイトのHTML要素を選択できるモードになります。左上にある矢印ボタンを押すと、WebサイトのHTML要素を選択できるモードになる試しに、「右下のおすすめトレンド」にマウスを近づけると、このようにフォーカスして表示されます。これは何重かの構造になっているので、うまいこと「おすすめトレンド」が含まれる場所だけを選択するようにしてください。すると、この部分の要素はここのHTMLで表示しているということを教えてくれます。何を指定すればうまく非表示にできるかというのを調べます。間違った要素を指定してしまうと、違うところまでが消えちゃったりするのでここは慎重に吟味する必要があります。そこでしか使ってない要素やclass、idなどのオプションがあればしめたものです。トレンド"~>この記事の執筆時点では、上記のようなHTML要素が見つかりました。これがわかりやすいので、これを非表示にしましょう。CSSを書いて対象の要素を消すこれを非表示にするには、次のCSSを書きます。「inspector-stylesheet:1」という下線リンクをクリックすると編集画面が出てきます。トレンド”であるdivという要素を非表示にするというCSSの記述です。これを書くと、もう書いた瞬間に「おすすめトレンド」が消えます。枠線の一部はよく見ると残っているものの、目的は達成されたとはいえましょう。CSSの記述を適用すれば消えます。ちなみに「完全に消すのが嫌だ、何か確認すれば見れるようにしておきたい」という場合は、たとえば代わりにこんなCSSを記述します。}テキストの色に、背景と同じ色を指定したCSSの記述です。これを実行すると、背景と文字が綺麗に同化して、写真の一部だけが残ります。写真を残して、背景と文字が同化するCSSの記述これは同化しているだけで、マウスでドラッグすると反転してネタバレが出現するという、古き良き個人サイトのようなことができます。マウスドラッグすると反転してネタバレできるトレンド欄の完成まあ、ブロックにマウスを当てるだけでもわずかに背景の色が変わるのでぼんやりと文字が浮かんできますが...。自分の見てるブラウザで一時的に見た目が変わるだけで、次に訪れた時にはまた元に戻ります。これがいつでも適用されるようにしたいということで、いよいよ拡張機能Stylusの出番です。Chromeの場合は、右上の青いボタンの「Chromeに追加」をクリックします。Chromeでの拡張機能(アドオン)「Stylus」インストール画面そうするとアドレスバーの右の拡張機能の欄に「S」というアイコンができます。これがStylusのアイコンです。アドレスバーの右側に、「S」をかたどったStylusのアイコンが現れるここで、Twitterにアクセスした状態でStylusアイコンをクリックしてください小さな窓が表示されます。Stylusのアイコンをクリックすると、スタイル管理の画面が開く初期状態では「該当するスタイルはありません」と表示されていますね。その下が重要で、「次のスタイルを書く:twitter.com/このURL」となっていることを必ず確認してください。このうち「twitter.com」の部分をクリックします。Twitter.com全体には適用されない場合がありますので気をつけてください。するとCSSを書く画面が登場します。URLで有効になります。「コード1」にさっき開発者ツールで打ち込んだCSSを丸々コピーをします。com」という入力欄は単純な識別のためのタイトルなので、「Twitterのトレンドを非表示にする」のような後から思い出しやすいものに変えると便利です。他は全く変える必要はありませんので、「保存」を押します。先ほどの開発者ツールと同様に「おすすめトレンド」欄が非表示になっているはずです。「1」という数字が表示されるようになります。これが、このサイトでは1個Stylusで書いたCSSが適用されていますよという証になります。「今日はトレンドが見たい」という需要にも応えてくれます。好きなサイトなのにここの部分だけはあまり見たくないといったものがあった場合はこの技術を応用することによって、どんなサイトでも非表示にできます。同じように「該当箇所の特定→非表示」を行うことで同様の対応ができるでしょう。皆様もぜひ自分の精神衛生を保つために自衛をしつつ、楽しい情報収集・SNSライフをお楽しみください。安溶二)鏡音リン・レンなどのVOCALOIDを使用したオリジナル曲やカバー曲を作り続けて12年目。音楽ジャンルに囚われず、キャラクター性を活かしたボカロ曲を主に制作しています。同人CDの制作や、作曲・DTM初心者向けの本(ボカロビギナーズ!)の執筆もしています。Music」を使い続けている理由【レビュー】2019/06/23YouTube「コミュニティ機能」の効果的な使い方【ボカロP・ミュージシャン向け】2019/07/09コミケなど、同人イベントにサークル参加する際の当日持ち物まとめ2019/08/03ボカロにラップさせる調声手法。