webページの見え方を簡単カスタマイズ!Chrome拡張「Stylish」

どや顔

普段使っているGoogleやYahooといったサイト。

味気ないデザインにも飽きてくるのではないでしょうか?

私も毎日同じ柄のページを見ていると見慣れ過ぎて、ちょっと背景とかいじれたらいいなぁとか考えたりします…

そんな私のように普段のページに見飽きている方はこの機能を活かして魅せ方を変えてみましょう!

普段の画面を一新!?好きな壁紙を適用させてみよう!

色が移り変わっている葉っぱ

ちなみに今回は、以下の状態にすることを目標にやっていきます。

twitter画面

twitter Stylish

このように個性ある壁紙にしていきます。

やることとして主に2点です。

  • GoogleChromeウェブストアより、Google拡張機能『Stylish』を追加。
  • サイト用のスタイルを検索し適用。

まあ、このように文でまとめても分かりづらいと思うので…

説明もそこそこに早速モノは試しということで、そのやり方についてまずは見ていきたいと思います。

【導入に必要なモノ】

まず最初に、これを使うにあたって必要なものをまとめていきます。

【用意するもの】

  • パソコン
  • Chromeブラウザ(Internet Explorerしかない方は、予めChromeブラウザを用意しておきましょう。)
  • JPEGまたはPNG形式の画像×1

※今回は、Google拡張機能を使って行うので、スマートフォンではお使いになることが出来ません。その点ご理解ください。

【導入手順】

GoogleChromeウェブストアよりGoogle拡張機能『Stylish』を追加する

➀まず、GoogleChromeウェブストアのページに行きます。(こちらのリンクからも行けます→https://chrome.google.com/webstore/category/extensions

googleウェブストア

②左上にある検索ボックスより、『Stylish』と検索し、このソフトを選択します。ソフトを見つけたら、右横のCHROMEに追加ボタンをクリックします。(クリックした後に出るダイアログボックスは無視して、拡張機能に追加をクリック。)

stylish1

③成功したら、このように上のバーに追加されます。

stylish2

サイト用のスタイルを検索し適用してみる!

Googleウェブストアより『Stylish』をダウンロード出来たら、次はサイトごとに表示形式をカスタマイズしてみましょう!

➀まずは、カスタマイズしたいページの画面に行ってみます。今回は例として、Twitterの画面を主に使っていきます。

twitter画面1

②この画面に行けたら、先ほど追加した『Stylish』をクリックします。するとこのように、何かいろいろ出てきますので、下の方にある『このサイト用の他のスタイルを検索』というところをクリックします。(一応、他にもやり方はあるのですが、今回はやりやすいやり方を解説していきます。)

twitter画面2

③すると、英語で書かれたこのようなサイトに飛ぶと思うので、こっからテーマを選んでいく形になります。

stylish3

どれを選べばいいの?

考える人

種類としては、このようにたくさんありますが、ではどれを選んだらいいのでしょうか?

これはカスタマイズしたいページによって使えるものが大きく変わってくるので、一概にこれ!とはあまり言えませんが、custom backgroundsというような表記があるものなら、ほとんどが自分好みで、ページをカスタムすることが出来ます。

今回Twitterを例に挙げているので、ちなみに私は『Black Twitter + Custom backgrounds』を選んでみました。

stylish4

 

後は細かい設定をし、『+Install with Stylish』をクリックして、インストールしたら完成です。

ちなみに、好きな画像を挿入するには、この『Black Twitter + Custom backgrounds』では、『Upload your own』の項目にチェックを入れて、『ファイル選択』をし、画像を選択した状態で、インストールしたら反映されます。

反映が終わったら、Twitterの画面に戻ってみます…

すると…

stylishtwitter

まあ、この通り賑やかなTwitter画面になりました…

元に戻したいときは…

twitterstylish2

元に戻したいときは、『Stylish』の拡張機能アイコンを右クリックし、出てきたバーから、「Turn all styles off」をクリックし、チェックを入れれば、このように解除もできます。

おわりに

パソコン

今回はTwitterを例にして、サイトの魅せ方をカスタマイズさせてみましたがいかがだったでしょうか?

意外にカスタマイズも簡単なんですよね…

今回ご紹介した方法以外にも、CSSをいじって魅せ方を自分好みにすることも出来るのですが、こちらは別途CSSの勉強も必要になってしまうので、それに関してのやり方は、またいつかということで…

ちょっと同じ画面も見飽きたなあという方は、記事を読みながら、是非簡単ですのでご自身で試してみてください♪

それでは!

スポンサードリンク