当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

Stylebot&Stylus(CSS)

「Pinterest(ピンタレスト)」のアイコン

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

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

「Pinterest」のボードページにある3つのアイコンサイズを調整した比較画像

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

「Pinterest」のボードページにある「その他のアイデア」、「整理する」、「やることリスト」の3つのボタン画像

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

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

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

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

インストール方法

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

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

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

「Stylebot」をインストールする手順画像

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

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

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

Pinterestの自身が作成したボードページにアクセスする手順画像

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めて「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です。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

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

Stylebotのスクリーンショット3

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

「Pinterest」のボードページにある「その他のアイデア」、「整理する」、「やることリスト」の3つのボタンのサイズを小さくした比較画像

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

「Pinterest」のボードページにある「その他のアイデア」、「整理する」、「やることリスト」の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つのボタンのテキストを非表示にした画像

感想

以上、「Pinterest(ピンタレスト)」のボードページにある3つのアイコンサイズを小さくするCSSでした。

Pinterestって有名なんですかね。全く分かりません。

Stylebot&Stylus(CSS)