【Pinterest】プロフィール下のアイコンを小さくするCSS

2022年5月26日Stylebot&Stylus(CSS)

Stylebotのアイコン

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

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

Pinterestのボードページにある3つのアイコンサイズを小さくしたイメージ画像

本記事で紹介するCSSを使えば、Pinterestの「その他のアイデア」、「整理する」、「やることリスト」の3つのボタンのサイズを、好きなサイズに小さくできます。

「あの3つのアイコン大きくてスペース取りすぎじゃないですか!?邪魔ですよね!」というお便りをいただいたので、普段Pinterest全く利用しないんですが、試してみることにしました。

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

「Pinterest利用していて、もっとスッキリさせたい!」という方、ぜひ参考にしてみてください。これ以外にも、「Pinterestでこういったカスタマイズしたい~」という要望ありましたら、問い合わせよりお願いいたします。といっても僕は、CSS初心者ペーペーなので、ほぼ教えられません。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

Pinterestにアクセスします。適当に誰かのプロフィールページを開きます。(例:ナポリタン寿司)その方が作成しているボードをクリックします。僕の場合、1件だけボードがあります。

誰かのプロフィールページを開いて、ボードをクリック

開いたら、右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

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

/*Pinterestプロフィール下のアイコンサイズ*/
.Jea.Z2K.fev.gjz.gpV.mQ8.zI7.iyn.Hsu {
  height: 40px !important;
  width: 40px !important;
}

/*Pinterestプロフィール下のアイコンサイズ:マウスフォーカス時*/
.Jea.Z2K.eZS.fev.gjz.mQ8.zI7.iyn.Hsu {
height: 40px !important;
width: 40px !important;
}

/*アイコン周りの余白除去*/
.hs0.un8.C9i .C9q.Shl.zI7.iyn.Hsu {
  padding: 0;
}

それぞれの「height」で高さ、「width」で横幅を調整できます。

もっと小さくしたい場合は、「height: 30px !important;」や、「width: 30px !important;」にします。逆に大きくしたい場合は、数字を大きくします。「!important」などの文字列は消さないように注意です。

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

Pinterestの「その他のアイデア」、「整理する」、「やることリスト」の3つのアイコンサイズを変更するCSSを書き込んだ画面

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

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

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

本記事のCSS適用前と適用後の比較画像

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

CSS適用前と適用後の比較GIF画像

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

【おまけ】文字を削除して、アイコンのみ表示

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

/*Pinterestプロフィール下のアイコンの文字削除*/
.tBJ.dyH.iFc.dR0.O2T.tg7.mWe {
  display: none !important;
}

アイコンだけで判別できる方は、一緒に使うと、よりスタイリッシュになります。

3つのアイコンのテキストだけが非表示になって、アイコンのみ表示になる

感想

以上、Pinterestのボードページにある3つのアイコンサイズを小さくするCSSでした。

本記事を書くにあたって、自身のPinterestアカウントを見直してみたのですが、まさかのボード非公開にしていました。ブログ更新時に、毎回自動でアイキャッチ画像をボード保存するようにしていたのに、まさか非公開とは…笑

びっくりです。正直、今でもちゃんと公開されているかどうか分かりません。見れない場合は、問い合わせより教えていただければなと思います。

こちらの記事もおすすめ!

Posted by ナポリタン寿司