【Pinterest】ダークモードにするCSS。目に優しくしてみよう！
この記事では、Pinterest（PCのウェブサイト版）の外観をダークモードにするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Pinterestを強制的にダークモード（黒を基調としたテーマ）で利用できます。具体的には、背景色を黒に近く、文字色を白にします。アイコンや、ポップアップメニュー内なども細かく調整できます。色は、自分で好きな色にできます。
「Pinterest利用するけれど、デフォルトのテーマは、眩しすぎる！ダークモードにしたい！」という方、ぜひ参考にしてみてください。あくまでPinterest上だけの変更なので、他のウェブサイトには影響されません。いつでもオンオフできます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
本記事は、Pinterestのサイトだけをピンポイントでダークモードにしたい方向けです。
ウェブサイト全体をダークにしたい方は、以下のChrome拡張機能・Firefoxアドオンがおすすめです。自動的に全てのウェブサイトを反転してダークにしてくれます。ブラックリスト・ホワイトリストの登録も簡単です。
https://www.naporitansushi.com/dark-reader/個人的には、上記拡張機能をおすすめしたいところですが、Pinterestだけをダークにしたい場合は、本記事のStylebot（CSS）で挑戦してみましょう。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
CSS
Pinterestにアクセスします。右上の拡張機能アイコン→「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→「www.pinterest.jp」をオフにします。
個別に調整できるように、それぞれの項目について詳しく解説します。
背景色関連
「全体の背景色」の「body」が、全体の背景色になっています。
本記事で紹介した背景色は、「#343333」となっていて、完全な黒ではありません。完全な黒にしたい場合は、「background: #343333;」を「background: #000;」にします。
/*全体の背景色*/
body,
/*検索ボックス、ボタンの背景色*/
.gpV,
/*ボタンホバー*/
.Jea.Lfz.gjz.hA-.wYR.zI7.iyn.Hsu,
.eZS,
.ProPartnerHeaderMenuList .proPartnerHeaderMenuItem:hover {
background: #000;
}各自で指定したい色は、ググってみてください。Googleのこちらのツールが便利です。好きな色のカラーコードを取得できます。
ボタンホバーは、「作成コンテンツ」や、「保存コンテンツ」をクリックした時の背景色になっています。「背景色と同じ色でいっかー」と思い、一緒にまとめていますが、別々に分離することも可能です。
全体の背景色と、ボタンホバー時の背景色を分けたい場合は、以下のコードになります。
/*全体の背景色*/
body,
.gpV {
background: #343333;
}
/*ボタンホバー*/
.Jea.Lfz.gjz.hA-.wYR.zI7.iyn.Hsu,
.eZS,
.ProPartnerHeaderMenuList .proPartnerHeaderMenuItem:hover {
background: #646d71;
}背景を「#343333」、ボタンの色を「#646d71」にする…といったことが可能です。
ポップアップ内
ヘッダーにある各種ボタンをクリックした時に表示されるメニューの背景色になっています。適用前と適用後の比較画像を貼っておきます。
ヘッダーの背景色
ヘッダーと、「作成コンテンツ」、「保存コンテンツ」部分の背景色です。
ポップアップメニューのフォーカス時の背景色
ヘッダー内にある「作成する」、「アナリティクス」、「広告」などのポップアップにフォーカスした時の背景色です。
デフォルトの状態だと、ヘッダーの黒と重なってしまい、少し見えにくかったので、「#343333」で灰色を指定しています。カラーコードを変更すれば、好きな色にできます。
保存ボタンの背景色（赤）
「保存」ボタンの背景色です。デフォルトの真っ赤が少し明るいと思ったので、「#810b1d」で暗くしました。元の赤がいい場合は、行ごと削除すればOKです。
検索ボックス関連（背景・文字色）
「検索ボックス内の文字色」が、検索ボックス内に入力した時の文字色です。通常は黒色で、背景をダークにすると見えにくくなったので、「rgb(255 255 255)」にしています。
「検索ボックスホバー時」が、検索ボックスにカーソルを当てた時の背景色です。
「#4f5a4e」にしてみた画像を貼っておきます。
現在選択している項目下に表示される下線
設定画面などの項目下に表示される下線（デフォルトは黒色）の色です。Pinterestのイメージカラーが赤なので、赤っぽくしてみました。（#9d2f2f）
文字色関連（基本的な文字色）
全体の文字色です。「#ddd」にしています。完全な白色が良い場合は、「#fff」にします。
/*基本的な文字色*/
span,
h1,
h2,
h3,
p,
a,
div,
.R19 {
color: #fff !important;
}各種アイコン（path）の色
ヘッダーなどにある各種ボタンの色です。こういったボタン（path）は、「fill」で色を調整できます。
「fill: #e75b5b;」にした画像を貼っておきます。好みの色にしてみましょう。
【余談】インターネットからCSSを入手する
余談ですが、Stylusを使っている方は、以下のサイトから、CSSを入手できます。いくつかPinterestのダークモード化CSSも配布されていました。
https://userstyles.world/search?q=Pinterestサイトにアクセスして、気になるCSSを見つけたら、サムネイルをクリック→画像下の「Install」をクリックします。
新しいタブでファイルが表示されます。全選択（Ctrl＋A）→コピーをクリックします。
Stylusの管理画面にアクセスします。左側メニュー内の「新スタイルを作成」をクリックします。
先ほどコピーしたコードを全部貼り付けます。（Ctrl＋V）「スタイルを上書き」をクリックします。既に書いているコードがある場合は、「スタイルに追加」にします。
コードが適用されます。ただし、上記サイト上で配布されているのは基本的に海外の方が作成しているので、サイトによっては言語問題で反映されなかったり、更新がストップしていて正常に反映されない場合があります。自分で作成できる方は、0から作るか、コードをお借りして、好みに改造するのがいいかなと思います。
感想
以上、Pinterestのウェブサイトを、ダークモード化するCSSについてでした。
ブログの更新情報をPinterestに送るために、アカウント作成しているんですが、全く使いこなせていません笑
