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

「この3つのアイコンが大きくて、スペースを取りすぎています。どうにか小さくコンパクトにできませんか?」と、読者様から質問をいただきました。僕は、普段ピンタレストを全く利用しませんが、試してみることにしました。
CSSを使うことで、好きなサイズ、さらには文字を非表示にしてアイコンだけの表示にする…といったことが可能です。
本記事以外にも、「Pinterestでこういったカスタマイズしたい~」という要望ありましたら、問い合わせよりお願いいたします。ただし、僕はCSS初心者なので、ほとんどできないとは思います。
僕は、普段ピンタレストを全く利用しないので、いつの間にか仕様変更でコードが使えなくなっている可能性が大です。その場合も、問い合わせより教えていただければ幸いです。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」でインストールできます。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
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;
}
アイコンだけで判別できる方は、利用するとスッキリしていいかもしれません。

感想
以上、「Pinterest(ピンタレスト)」のボードページにある3つのアイコンサイズを小さくするCSSでした。
Pinterestって有名なんですかね。全く分かりません。
「Pinterest」をCSSでダークモードにする記事を書いています。気になった方は、参考にしてみてください。