【Pinterest】ボードページ下のアイコンを小さくするCSS

2023年2月13日Stylebot&Stylus(CSS)

この記事では、PCウェブサイト版「Pinterest（ピンタレスト）」のプロフィールページのボードページにある「その他のアイデア」、「整理する」、「やることリスト」の3つのアイコンサイズを小さくするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

[Pinterest（ピンタレスト）」上で、自身が作成したボードページにアクセスすると、タイトルの下に「その他のアイデア」、「整理する」、「やることリスト」の3つのボタンが表示されます。

「この3つのアイコンが大きくて、スペースを取りすぎています。どうにか小さくコンパクトにできませんか？」と、読者様から質問をいただきました。僕は、普段ピンタレストを全く利用しませんが、試してみることにしました。

CSSを使うことで、好きなサイズ、さらには文字を非表示にしてアイコンだけの表示にする…といったことが可能です。

本記事以外にも、「Pinterestでこういったカスタマイズしたい～」という要望ありましたら、問い合わせよりお願いいたします。ただし、僕はCSS初心者なので、ほとんどできないとは思います。

僕は、普段ピンタレストを全く利用しないので、いつの間にか仕様変更でコードが使えなくなっている可能性が大です。その場合も、問い合わせより教えていただければ幸いです。

1. インストール方法
2. Pinterestのボードページアイコンをカスタマイズする手順
3. 文字を削除して、アイコンのみ表示にする
4. 感想

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

Pinterestのボードページアイコンをカスタマイズする手順

「Pinterest」にアクセスします。自身が作成したボードページ（保存コンテンツ）を開きます。

開いたら、インストールした拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*ボードページ下のアイコンサイズ（その他のアイデア、整理する、ノート）*/
div[data-test-id="board-tools"] :is(a[aria-label="その他のアイデア"], a[aria-label="整理する"], a[aria-label="ノート"])>div>div[style*="height"] {
  height: 40px !important;
  width: 40px !important;
}

/*ボードページ下のアイコン周りの余白除去*/
div[data-test-id="board-tools"] :is(div[data-test-id="その他のアイデア"], div[data-test-id="整理する"], div[data-test-id="ノート"]) {
  padding: 0 !important;
}

/*ボードページ下のその他のアイデアの文字を一行にする*/
div[data-test-id="board-tools"] a[aria-label="その他のアイデア"]>div>div:nth-of-type(2) {
  width: 100px !important;
}

「アイコンサイズ」の「height」が高さ、「width」が横幅になっています。好きなサイズに調整してみてください。もっと小さくしたい場合は、「height: 30px !important;」や「width: 30px !important;」といった風に数字を小さくします。

「アイコン周りの余白除去」の「padding」で余白を削除しています。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト（例：www.pinterest.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。

ボードページのタイトル下にある「その他のアイデア」、「整理する」、「やることリスト」の3つのアイコンサイズが小さくなります。

分かりやすいようにGIF画像も貼っておきます。

一時的に無効化したい場合は、Stylebot→「www.pinterest.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

文字を削除して、アイコンのみ表示にする

以下のCSSを追記することで、アイコンの文字を非表示にします。

/*ボードページ下のアイコン（その他のアイデア、整理する、ノート）のテキスト非表示*/
div[data-test-id="board-tools"] :is(a[aria-label="その他のアイデア"], a[aria-label="整理する"], a[aria-label="ノート"])>div>div:last-child {
  display: none !important;
}

アイコンだけで判別できる方は、利用するとスッキリしていいかもしれません。