ハロプロFCサイトのお申し込みは「こちら」からを大きく表示したい
概要
ハロー！プロジェクト オフィシャルファンクラブWEBサイトからコンサートに申し込む際にクリックする必要があるお申し込みは「こちら」からの文言を赤字で大きく表示するユーザースクリプトを書きました。
これです。
【左：使用前】
【右：使用後】
はじめに
くみん（@LoveRuruDambara）です。
最近ハロヲタ運動部に参加してくれる人が増えてきていて嬉しいです！
さて、今回はライブの申し込みをもっと簡単にしようぜ！という話です。
念願だったハロプロのファンクラブに加入し、初めてライブに申し込もうと思ったとき、お申込みは「こちら」からの表示が全然目立ってなくて探すのに時間がかかりました。
じゃあもっと目立つように表示すればいいんじゃない？でもどうやって？
→ 自分でつくるか～
ということでつくりました。
ユーザースクリプトって何
ユーザースクリプトは、あなたにウェブサイト閲覧時の主導権をもたらします。サイトを使いやすくしたり、機能を追加したり、余分なものをなくしたり。いったんインストールすれば自動でサイトを改善します。Greasy Fork は、ユーザーが作成し投稿したスクリプトを共有しています。自由にインストールでき、使うのも簡単です。
めちゃくちゃざっくり言ってしまえばブラウザ拡張機能です。
これをインストールしておくと、対象のサイトで自動的に適用されて色々追加されたり、見た目が良い感じになったりします。
この辺は私も詳しくないのでよくわかっていません（？）
使用方法
Greasy Fork というユーザースクリプト投稿サイトに使用方法が記載してあるので、それに準拠して説明します。
※スマホはたぶん対応してないと思うのでPCで使用してください。
① ユーザースクリプト管理ツールをインストールする
ブラウザによって使用できる管理ツールは違うらしいですが、Chrome、Firefox、Safari の3つで共通している「Tampermonkey」というやつをオススメしておきます。
それぞれ下線が引いてあるブラウザ名のとこからリンク貼ってあります。
② スクリプトをインストールする
下のリンクから飛んでインストールします。
③ ハロプロファンクラブサイトで使用する
ひなフェスのFC先行受付ページのリンクを貼ったので試しに飛んでみてください。
この記事のサムネイルみたいに表示されていればOKです！
有効と無効の切り替えは右上の Tampermonkey のアイコン（黒四角下部に白丸2つみたいなやつ）をクリックすると切り替えられるはずです。
最後に
JavaScript のコードを初めて書いたのでつくるのに丸一日かかりました……
とんでもない書き方してるところがあると思うので、改善点やバグを見つけた人は教えてください🙏🙏🙏
それでは！
くみん🐸
この記事が気に入ったらサポートをしてみませんか？