Chrome拡張機能

Chromeで新しいタブを開いた時に表示される履歴をCSSで非表示にできる拡張機能「Stylish」

投稿日: 更新日: 2017年12月27日

以前に自分のPCをミラーリングした状態でプレゼンした時、新しいタブの履歴がとんでもなくて人生詰みそうになったでででーさん(@d3_dayo) です!

 
前回の記事に続いてChromeブラウザ自体のカスタマイズに関する記事を書きます。

前回はChromeブラウザのテーマを誰でも超簡単に自作することができる「ThemeBeta」というサイトを紹介しました。自分好みのブラウザデザイン(壁紙)にすることでこれまで以上に愛着が湧くと思うので、これはぜひChromeを使っている人には試して欲しいChromeのカスタマイズです!非常に簡単ですし!
 
そして今回は、Chromeで新しいタブを表示すると必ずページ中央下に表示されてしまう閲覧履歴をCSSで非表示にすることができるChrome拡張機能「Stylish」を紹介したいと思います!
 
 

スポンサーリンク

完成図

デフォルトの状態ではChromeで新しいタブを開くとこのようにページ下部分に必ず閲覧履歴が表示されてしまいます。
 

 
上の画像では自分の閲覧履歴が表示されないよう…全て「☓」を押して消してはいるものの…それでも履歴が表示される枠の部分は残ってしまいます。これだとせっかくテーマを設定して好みの壁紙が表示されるようにしているのに、それがコンテンツに隠れてしまって台無しです。
 
また、冒頭の吹き出し部分にも書きましたが、安易に履歴が表示されると…特に職場で事故を起こす可能性が生じますw(特に男性)しかも、この履歴欄からよく見るサイトへアクセスする割合って…少なくとも私個人のことで言えば全くないと言って良いと思います。
 
 
さて、今回紹介するChrome拡張機能でCSSを記述することで、上の画像のように必ず表示されてしまう履歴欄が…
 

 
このように…綺麗さっぱり非表示の状態になります!
 
ウェブ関係の人はもちろんのこと、ブログを運営している人なら弄ったことはなくても言葉としては何となく知っていると思いますが、CSSというのはウェブ上で表示される文字や画像や枠などのスタイリングをすることができる型を決めるためのコードのことです。
 
この記事では、ブログのカスタマイズをするかのように新しいタブの表示をカスタマイズする方法を紹介していきます。コードと聞くだけで難しく考えてしまう方もいるかとは思いますが、この記事では…読めばコピペだけで作業ができるように頑張って書きますので、慌てず焦らず落ち着いて指定のテキストを指定の箇所へと貼り付けて頂ければと思います!
 
 

Stylishのインストール

まずはChromeに拡張機能をインストールする必要があります。
 
Stylish - ウェブサイト用カスタムテーマ
Chromeで上記のリンクにアクセスして「CHROME に追加」ボタンをクリックするだけで拡張機能をインストールすることができます。
 
 

履歴を非表示にする(CSSの記述)

さてさて、ここから新しいタブに表示される履歴を非表示にするための手順を書いていきます。
 
拡張機能をインストールしたら、新しいタブを開いてChromeの右上バーに表示されているStylishの「S」アイコンをクリック、すると以下のような窓が表示されるので右上の「︙」をクリックし「スタイルを作る」を選択します。
 

 
 
上記の手順で「スタイルを作る」を選択すると、以下のような画面が表示されると思います。この画面でCSSを記述することで履歴を非表示にすることができます。
 

 
 


スポンサーリンク


やること

ここから実際にCSSを記述する手順を紹介していきます。記述と書きましたが、この記事に掲載するコードを指定した箇所にコピーして貼り付けるだけでOKです!
 
まずは以下のコードをコピーして、サンプル画像の赤枠で囲った「コード1」の枠内に貼り付けましょう。
 
※履歴だけじゃなくてグーグルのロゴや検索バーも非表示にしたい場合には、このコードではなくその下にある「おまけ」に記載したコードを貼り付けてください!

上記のコードを以下の赤枠で囲った入力欄に貼り付けます。
 

 
おまけ
履歴だけじゃなくて検索バーもグーグルのロゴも全部消しちゃいたい場合には、以下のコードを上の画像で囲っている入力欄に貼り付けます。

各コードの役割もコメントアウトで記載しておきましたので、一部残したい部分などあれば、その部分の文字列だけを上記コードから削除して貼り付けてください!
 
 
次に「コード1」の入力欄下にある「適用先」をデフォルトで表示されている「ドメイン上の URL」から「正規表現に一致する URL」へと変更します。
 

 
 
そして次は、「適用先」の右側にある…恐らくこの記事の手順通りで進んでいけば「newtab」と表示されている入力欄からnewtabという文字列を消して、以下の文字列へと書き換えます。

上記の文字列を以下の赤枠で囲った入力欄に貼り付けます。
 

 
 
ここまで作業できたら、文字列を書き換えた入力欄の右側にある「追加」ボタンをクリックします。
 

 
 
あとは仕上げとして、左側のメニューからこのスタイルに名前を付けて(名前は「newtab」などで良いと思います)その下にある「保存」ボタンをクリックしたら全作業終了です!
 

 
 

おわりに

以上の作業をすれば、作成したスタイルの削除、拡張機能の無効やアンインストールをしない限りは新しいタブを開いても閲覧履歴が表示されなくなります。
 
この記事に書いた通りにコードなどを指定の箇所に貼り付けるだけで設定することができるので、ぜひ閲覧履歴を非表示にしたい人は試してみてください!
 
また、このStylishで出来ることは決して閲覧履歴の非表示だけではなく、いろんなサイトのいろんな表示をカスタマイズすることができる面白い拡張機能なので、また改めて他の使い方も機会があれば紹介したいと思います。
 
 
以下の記事ではこれまでにブログで紹介したChrome拡張機能に関する記事をまとめています!今回の記事で紹介した拡張機能以外にも、日常のChrome使いを更に便利なものにする拡張機能がまだまだありますので、こちらもどうぞご覧ください!
 
【保存版】これまでに書いてきたChrome拡張機能の使い方や機能を紹介した記事のまとめ | カキタクナッタラ

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ