SARDONYX ブログ

no title 目次 目次 前書き Styles おわりに 前書き HTML, CSSを書くことができ、普段からChrmeのDevToolを使っている人間はこう思う時がたびたびある。 「このサイト使いづらいな。独自カスタムできないものか？」 と。 そこで今回紹介するのが、 Styles というChromeの拡張機能だ。 任意のCSSを自動反映できる代物。他の人が一般公開したCSSカスタマイズも利用することができる。 簡単な例として、今回はQiitaの色を変えてみる。 Styles 拡張機能 Styles をインストール カスタマイズしたいURL(今回は https://qiita.com/mpyw/items/a816c6380219b1d5a3bf )へ行き、Stylesのアイコンをクリック。 「次のスタイルを書く:qiita.comこのURL」をクリック。 あとは、Chrome DevToolで各要素のクラスを調べて上書き、またはカスタマイズしたり、任意のスタイルを書いたりしてゆく。 エディタは、シンタックスハイライトのテーマを変えたり、ホットリロード機能があったりと、かなり充実している。 今回はサンプルということで、緑調のQiitaを水色調へと変えるコードを掲載。 /* ヘッダー */ .st-RenewalHeader { background-color : #62a1bd ; } .st-RenewalHeader_communitySelector { background-color : #56e2e2 ; } .st-RenewalHeader_postButton { background-color : #56e2e2 ; } /* 目次 */ .it-Toc a { color : #dedede ; } /* 背景 */ .p-items_wrapper { background-color : #3c5f79 ; } /* LGTMカラー */ .css-1cguqpk

no title 目次 ▶︎ all running... 目次 前書き 使い方 ScriptAutoRunnerコード 前書き Chromeブラウザには、 ScriptAutoRunner という拡張機能がある。 これはWebページロード時に自動で任意のJavaScriptを実行できるというもの。 と、いうわけでもっともすぐに思いつくのは、コピペ禁止とかいうくだらない措置をぶち壊すことだ。 以下私が使っているソースコード 使い方 Chrome拡張機能をURLから入手したら、ScriptAutoRunnerのアイコンをクリックし、歯車を押す。 その後ページが見えたら、「</>」というマークをクリック。 下記コードをコピペ。(波選別にコードを分けると良い。) コンセントのマークをクリックすると有効化。 オン/オフは簡単にできる

no title 目次 ▶︎ all running... 目次 リンク 趣味 リンク GitHub: https://github.com/SARDONYX-sard Twitter: https://twitter.com/SARDONY94463261 趣味 プログラミング 使用言語 HTML, CSS, JavaScript(TypeScript), Python, Ruby, PHP ゲーム： モンハン ⇧目次へ戻る