【GameWith】モンストの見出しコメントを見やすくするCSS

2024年7月24日Stylebot&Stylus(CSS)

この記事では、ゲーム攻略サイト「GameWithゲームウィズ」の「モンスト攻略wiki」内にある見出し横のコメントポップアップをCSSで見やすくする方法を書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

僕は高校生の時にモンスターストライクをプレイしていて、大学進学だったか何だったか忘れましたが、いつの間にかやめていました。

その時一緒にプレイしていた高校から今現在もずっと仲良しの友達から「久々にやってみたけどめちゃくちゃ当時から変わってるぞ」ってLINEがきて、その流れで僕も再開しました。実に5年以上ぶりです。

そんな前置きはどうでもよくて、「あのクエストどう攻略するんだろう～」とか「こんなガチャ限当たったけどこれ評価いいのかな？」といった時に攻略サイト「GameWith」を見ています。確か僕が高校の時には既にあった気がします。便利です。

攻略情報ももちろん助かるんですが、各見出し横にあるユーザーが投稿するコメント欄もかなり役立ちます。このキャラも使えた！とかこういうやり方もある！と参考になります。

ここのコメントポップアップの高さが狭くて、スクロール量が増える点が若干気になりました。マウスのスクロール量を増やしている場合、お目当てのコメントが飛んでしまい探すのに手間取ります。

他にも僕はコメントの内容と投稿日時が分かれば良くて、ユーザー名とアイコンは不要です。ありのままの表示だと僕にとって若干使いにくかったので、CSSを使って自身の環境上だけで見やすいようにカスタマイズしてみます。高さを広げたり、不要な要素・余白を削除します。

自身の環境上で他人には影響しません。Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定で、スマホのアプリ版ではできません。

本記事は「GameWith」の中でもモンスターストライクの攻略ウィキに特化した内容です。同じ「GameWith」でも別ゲーム攻略ページでは動作しない可能性があります。

1. インストール方法
2. 「GameWith」のモンスト攻略内にあるコメントをカスタマイズするCSS
3. 感想

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「GameWith」のモンスト攻略内にあるコメントをカスタマイズするCSS

「Stylebot」拡張機能を使っている場合、対象のサイトを開いて拡張機能アイコンを左クリック→「Stylebotを開く」を押してスタイルシートを作成し書き込んでいくのが基本ですが、今回の場合「モンスターストライク.gamewith.jp」になり、若干ドメインが長くなります。

本記事はモンスターストライクの攻略ウィキに絞った内容なので、別に上記のドメインでも問題ないと思いますが、どーせなら「GameWith」全体で発動するドメインのほうが気持ち的にスッキリするし、あわよくば「GameWith」内の他ゲーム攻略でも動作してくれたらいいなということで、いつもの方法と違って「Stylebot」の設定を開きます。

拡張機能アイコンを左クリック→「オプション」をクリックします。左側の「スタイル」→「新しいスタイルを追加」をクリックします。

上部のテキストボックスに「https://**.gamewith.jp/**」と貼り付けます。

https://**.gamewith.jp/**

ここにCSSを書き込んでいきます。僕が作成したCSSは以下になります。自分がいらないと思ったCSSは書き込まなくてOKです。例えば「コメントポップアップの角丸具合」とかは完全に好みです。

/*コメントポップアップの高さ*/
.article-comment-expand-list {
    height: 850px !important;
}

/*コメント内のユーザーアイコン非表示*/
.js-comment-item .media_left {
    display: none !important;
}

/*コメント内のユーザー名非表示*/
.js-comment-item a.js-comment-user {
    display: none !important;
}

/*コメント内の行間余白*/
.js-comment-item {
    padding: 3px !important
}

/*コメントポップアップの横幅*/
.article-comment-expandbox_inner {
    width: 500px;
}

/*コメントポップアップの角丸具合*/
.article-comment-expandbox {
    border-radius: 20px !important;
}

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

書き込めたら保存します。

「GameWith」の「モンスト攻略wiki」ページを開きます。試しに「【モンスト】禁忌の獄【深淵/木】涅槃寂静の適正キャラと攻略」を開いてみます。

念のため「Stylebot」の拡張機能アイコンをクリックして、「https://**.gamewith.jp/**」が有効になっているか確認します。なっていたらOKで、なっていない場合はオンにします。そもそも表示されていない場合はURLの書き方が間違っています。ワイルドカードが正しく書けているかチェックしましょう。