Steamのライブラリにあるソフトを完全に非表示にする方法

Steamのライブラリにあるソフトを完全に非表示にする方法を紹介します。

非表示ライブラリの中からも見えなくします。

Steamのライブラリの仕様

ライブラリには購入したゲームが自動で並び、表示させたくないソフトは「非表示に設定する」で非表示ライブラリに移すことが可能です。

しかし非表示を開くのは簡単なので、同じアカウントを家族内で共有したり、同じPCを使用する場合は非表示だけでは隠しきれないことがあるかもしれません。

非表示からも完全に消すには、公式に問い合わせてアカウントから削除してもらう必要があるそうです。

確実に消すならその方法しかないようですが、そうすると遊ぶにはまた買い直す必要があるのであまり良い方法とは言えません。

Steamのライブラリにあるソフトを完全に非表示にする

今回紹介する方法はSteamクライアントの見た目（スキン）を変更する非公式ツールを使います。

それが「Millennium」という有志作成のソフトです。

SteamクライアントはChroniumで作られているソフトなので、このツールを使わなくてもデバッグモードを使えばUIやスキンを調整することも可能なのですが、起動するたびにその作業が必要になるので実用的ではありません。

Millenniumを使えば自動でそれらの調整を反映させてくれるので、今回の方法に使えるという感じです。

やり方

Millenniumをインストール
devオプション付きでSteamクライアントを起動
Steamクライアントをデバッグする
DOMから非表示にしたい部分を探す
MillenniumのQuick CSSでスタイルを調整する

デバッグやDOMの確認は必須ではないので、手順234は丸々すっとばしても大丈夫です。

1.Millenniumをインストール

公式サイトからインストーラーをダウンロードしてインストールします。Steamクライアントは終了しておきます。インストールしたらSteamが起動するのでもう一度終了。

https://steambrew.app/

2.devオプション付きでSteamクライアントを起動

ショートカットにスペースを1つ開けて「-dev」を付け足すか、コマンドプロンプトから「”C:\Program Files (x86)\Steam\steam.exe” -dev」で起動します。

3.Steamクライアントをデバッグする

Steamが起動したらChromeなどのブラウザのURLに「localhost:8080」を入力してアクセスします。画像のようなメニューが出るので、Steamを押します。

4.DOMから非表示にしたい部分を探す

ブラウザ側でこのように表示されたら、Steamクライアント側で「ライブラリ」を表示しましょう。

ブラウザ側にも状態が反映されるので、右側の「Elements」から消したい要素を調べます。

HTMLやCSSの知識がある方なら簡単に分かると思いますが、そうでない方はDevToolの上の方にある「選択マーク」を押してから、左のクライアント画面にマウスを移動させましょう。

現在選択している要素に合わせてDOMツリーを展開してくれるので、調整する場所が分かりやすくなります。

ライブラリの一覧を構成するDOMは

<div aria-label=”grid” aria-readonly=”true” class=”ReactVirtualized__Grid ReactVirtualized__List”

から始まっているので、この要素のスタイルに「display: none;」を設定してみましょう。右側のStyleのelement.style {} の中に直接display: none;と入力するだけです。

これで実際のクライアント側のライブラリの表示も消えているのが確認できます。

もちろんこれは一時的な表示の調整なので、スタイルを書き換えるか再起動すると元に戻ってしまいます。

さらに上のセレクタだと通常のライブラリと非表示のライブラリの一覧を全て非表示にしてしまうので、特定のソフトだけに絞って非表示にするセレクタが理想です。

<div class=””>
<div class=”ハッシュ Focusable”>
<div class=”ハッシュ” draggable=”true”>
<div class=”ハッシュ”></div>
<div class=”ハッシュ”>
<img class=”ハッシュ” src=”/assets/2499860/ハッシュ.jpg?c=ハッシュ” />
</div>
<span lang=”ja”>ドラゴンクエストVII Reimagined</span>
</div></div></div></div>

ライブラリに並ぶソフトの要素はこのような構造になっているので、セレクタはこのようにすると良いでしょう。

div[role=”gridcell”]:has(img[src^=”/assets/2490990/“]) {
display: none !important;
}

MillenniumではJavascriptも動かすことができるので、ソフトのタイトル名でDOMを見つけさせることも可能ですが、アップデートで表記が変わったり、何らかのエラーでコードが止まってしまう可能性があるので、CSSでAppIDを指定するのが一番精度が高いはずです。

5.MillenniumのQuick CSSでスタイルを調整する

Steamを起動したら左上にある「Steam」を押して「Millennium」を押します。

左側「Quick CSS」から「エディターを開く」というのがあるので、それを押すとスタイルシートを編集できるので、このように書きます。

/* リスト表示用（react-virtualized） */
.DialogDropDown_CurrentDisplay > div {
display: none !important;
}

.ReactVirtualized__Grid__innerScrollContainer {
height: auto !important;
}
div[role=”gridcell”] {
position: static !important;
}
div[role=”gridcell”]:has(img[src^=”/assets/2490990/”]),
div[role=”gridcell”]:has(img[src^=”/assets/582010/”]) {
display: none !important;
}