【Pinterest】ダークモードにするCSS。目に優しくしてみよう!

2022年5月26日Stylebot&Stylus

Stylebotのアイコン

この記事では、Pinterest(PCのウェブサイト版)の外観をダークモードにするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

Pinterestのウェブサイトをダークモードにした画像

本記事で紹介するCSSを使えば、Pinterestを強制的にダークモード(黒を基調としたテーマ)で利用できます。具体的には、背景色を黒に近く、文字色を白にします。アイコンや、ポップアップメニュー内なども細かく調整できます。色は、自分で好きな色にできます。

「Pinterest利用するけれど、デフォルトのテーマは、眩しすぎる!ダークモードにしたい!」という方、ぜひ参考にしてみてください。あくまでPinterest上だけの変更なので、他のウェブサイトには影響されません。いつでもオンオフできます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

ポイント

本記事は、Pinterestのサイトだけをピンポイントでダークモードにしたい方向けです。

ウェブサイト全体をダークにしたい方は、以下のChrome拡張機能・Firefoxアドオンがおすすめです。自動的に全てのウェブサイトを反転してダークにしてくれます。ブラックリスト・ホワイトリストの登録も簡単です。

個人的には、上記拡張機能をおすすめしたいところですが、Pinterestだけをダークにしたい場合は、本記事のStylebot(CSS)で挑戦してみましょう。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

CSS

Pinterestにアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebot Stylebotを開く

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*-----------------------------------------
背景色関連
-----------------------------------------*/
/*全体の背景色*/
body,
/*検索ボックス、ボタンの背景色*/
.gpV,
/*ボタンホバー*/
.Jea.Lfz.gjz.hA-.wYR.zI7.iyn.Hsu,
.eZS,
.ProPartnerHeaderMenuList .proPartnerHeaderMenuItem:hover {
  background: #343333;
}

/*ポップアップ内*/
.SpV,
.Jea.QDA.qDf.s2n.ujU.zI7.iyn.Hsu,
div[data-test-id="business-hub-dashboard-section"],
.ho-.zI7.iyn.Hsu,
.u97 {
  background: #1e1c1c !important;
}

/*ヘッダーの背景色*/
.qJc {
  background-color: #161515;
}

/*ポップアップメニューのフォーカス時の背景色*/
.BsF,
.bmw:focus, .bmw:hover, .W6-:focus, .W6-:hover {
  background-color: #343333;
}

/*保存ボタンの背景色(赤)*/
.Jrn {
  background: #810b1d;
}

/*アナリティクスのグラフ背景*/
div[data-test-id="sparkline-graph"] {
  background: #dddddd;
  border-radius: var(g-border-sm);
}

/*検索ボックスホバー時*/
.Jea.fev.zI7.iyn.Hsu,
#searchBoxContainer>div {
  background: #444343 !important;
}

/*現在選択している項目下に表示される下線*/
.BsF.zI7.iyn.Hsu {
  background-color: #9d2f2f;
}

/*-----------------------------------------
背景色関連終了
-----------------------------------------*/



/*-----------------------------------------
文字色関連
-----------------------------------------*/
/*基本的な文字色*/
span,
h1,
h2,
h3,
p,
a,
div,
.R19 {
  color: #ddd !important;
}

/*各種アイコン(path)の色*/
path {
  fill: #ddd;
}

/*検索ボックス内の文字色*/
input {
  color: rgb(255 255 255);
}

/*-----------------------------------------
文字色関連終了
-----------------------------------------*/

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。瞬時にPinterestのページ上がダークモードになります。

Stylebot Pinterestをダークモードにするコードを書き込んだ画面

ボード内ページなどにも反映されます。

Pinterestのボード内のピン画面

一時的に無効化したい場合は、Stylebot→「www.pinterest.jp」をオフにします。

Stylebot 「www.pinterest.jp」がオンになっていることを確認

個別に調整できるように、それぞれの項目について詳しく解説します。

背景色関連

「全体の背景色」の「body」が、全体の背景色になっています。

Pinterestの全体の背景色はどこか示した画像

本記事で紹介した背景色は、「#343333」となっていて、完全な黒ではありません。完全な黒にしたい場合は、「background: #343333;」を「background: #000;」にします。

/*全体の背景色*/
body,
/*検索ボックス、ボタンの背景色*/
.gpV,
/*ボタンホバー*/
.Jea.Lfz.gjz.hA-.wYR.zI7.iyn.Hsu,
.eZS,
.ProPartnerHeaderMenuList .proPartnerHeaderMenuItem:hover {
  background: #000;
}

各自で指定したい色は、ググってみてください。Googleのこちらのツールが便利です。好きな色のカラーコードを取得できます。

Google カラー選択ツールの画像

ボタンホバーは、「作成コンテンツ」や、「保存コンテンツ」をクリックした時の背景色になっています。「背景色と同じ色でいっかー」と思い、一緒にまとめていますが、別々に分離することも可能です。

ボタンホバー時の背景色はどこか示した画像(作成コンテンツ、保存コンテンツ)

全体の背景色と、ボタンホバー時の背景色を分けたい場合は、以下のコードになります。

/*全体の背景色*/
body,
.gpV {
  background: #343333;
}

/*ボタンホバー*/
.Jea.Lfz.gjz.hA-.wYR.zI7.iyn.Hsu,
.eZS,
.ProPartnerHeaderMenuList .proPartnerHeaderMenuItem:hover {
  background: #646d71;
}

背景を「#343333」、ボタンの色を「#646d71」にする…といったことが可能です。

背景色とボタンの色を個別に変えた画像

ポップアップ内

ヘッダーにある各種ボタンをクリックした時に表示されるメニューの背景色になっています。適用前と適用後の比較画像を貼っておきます。

ポップアップ内のCSS適用前と適用後の比較画像

ヘッダーの背景色

ヘッダーと、「作成コンテンツ」、「保存コンテンツ」部分の背景色です。

ヘッダーの背景色はどこか示した画像

ポップアップメニューのフォーカス時の背景色

ヘッダー内にある「作成する」、「アナリティクス」、「広告」などのポップアップにフォーカスした時の背景色です。

ポップアップメニューのフォーカス時の背景色はどこか示した画像

デフォルトの状態だと、ヘッダーの黒と重なってしまい、少し見えにくかったので、「#343333」で灰色を指定しています。カラーコードを変更すれば、好きな色にできます。

ヘッダーのボタンの背景色変更CSSを設定していない場合、少し見えにくくなる

保存ボタンの背景色(赤)

「保存」ボタンの背景色です。デフォルトの真っ赤が少し明るいと思ったので、「#810b1d」で暗くしました。元の赤がいい場合は、行ごと削除すればOKです。

保存ボタンの背景色はどこか示した画像

検索ボックス関連(背景・文字色)

「検索ボックス内の文字色」が、検索ボックス内に入力した時の文字色です。通常は黒色で、背景をダークにすると見えにくくなったので、「rgb(255 255 255)」にしています。

検索ボックス内の文字色はどこか示した画像

「検索ボックスホバー時」が、検索ボックスにカーソルを当てた時の背景色です。

検索ボックスホバー時の背景色はどこか示した画像

「#4f5a4e」にしてみた画像を貼っておきます。

検索ボックスの背景色を「#4f5a4e」にした画像

現在選択している項目下に表示される下線

設定画面などの項目下に表示される下線(デフォルトは黒色)の色です。Pinterestのイメージカラーが赤なので、赤っぽくしてみました。(#9d2f2f)

現在選択している項目下に表示される下線はどこか示した画像

文字色関連(基本的な文字色)

全体の文字色です。「#ddd」にしています。完全な白色が良い場合は、「#fff」にします。

/*基本的な文字色*/
span,
h1,
h2,
h3,
p,
a,
div,
.R19 {
  color: #fff !important;
}

各種アイコン(path)の色

ヘッダーなどにある各種ボタンの色です。こういったボタン(path)は、「fill」で色を調整できます。

各種ボタンの背景色はどこか示した画像

「fill: #e75b5b;」にした画像を貼っておきます。好みの色にしてみましょう。

ヘッダーのボタンの背景色を「fill: #e75b5b;」にした画像

【余談】インターネットからCSSを入手する

余談ですが、Stylusを使っている方は、以下のサイトから、CSSを入手できます。いくつかPinterestのダークモード化CSSも配布されていました。

サイトにアクセスして、気になるCSSを見つけたら、サムネイルをクリック→画像下の「Install」をクリックします。

「UserStyles.world」にアクセスして、Installボタンをクリック

新しいタブでファイルが表示されます。全選択(CtrlA)→コピーをクリックします。

Pinterestの背景をダークミントモードにするCSSをコピー

Stylusの管理画面にアクセスします。左側メニュー内の「新スタイルを作成」をクリックします。

Stylusの管理画面 「新スタイルを作成」ボタンをクリック

先ほどコピーしたコードを全部貼り付けます。(CtrlV)「スタイルを上書き」をクリックします。既に書いているコードがある場合は、「スタイルに追加」にします。

Mozilla形式のコードを貼り付ける 「スタイルを上書き」ボタンをクリック

コードが適用されます。ただし、上記サイト上で配布されているのは基本的に海外の方が作成しているので、サイトによっては言語問題で反映されなかったり、更新がストップしていて正常に反映されない場合があります。自分で作成できる方は、0から作るか、コードをお借りして、好みに改造するのがいいかなと思います。

Pinterestが、ダークミント風のテーマになる

感想

以上、Pinterestのウェブサイトを、ダークモード化するCSSについてでした。

ブログの更新情報をPinterestに送るために、アカウント作成しているんですが、全く使いこなせていません笑

Posted by ナポリタン寿司