FirefoxでWordPressを使うとブロックエディタのパネルでスクロールバーが出て見苦しいので消す方法

私は普段PCのブラウザはFirefoxを使ってます。たぶんもう20年くらい?

で、このブログやメインサイトもFirefoxでWordpressの管理画面にアクセスして書いてるわけですが、そのWordpressのブロックエディタがなんか使いにくいなぁ、と思ってました。その原因の1つが右側にあるパネルの横スクロールバーでした。なんとかこれを消せたのでメモとして残しておきます。

Firefoxだと横スクロールバーが出る

Firefoxを使ってWordpressの投稿画面(ブロックエディタ)を開くと、右側のアイキャッチなどを設定するパネルに横スクロールバーが出てしまいます。設定されている幅よりも中身が大きいということです。

これがずっと気に入らなくて「全然調整されてない未完成なUIだなぁ」なんて思っていたのですが、Chromeだとこれが横スクロールバーないんですね、これが。

あー…またFirefox未対応ってことか…。

で、原因と対処を色々探ってみると、どうもこの投稿画面の.interface-interface-skeleton__sidebarというクラスにoverflow-y:scroll;を追加すれば横スクロールバーがなくなるとわかりました。

ブロックエディタはcssで見た目を変えられるから、それで対応すればいいかな?と思ったのですが、これが適用されるのは本文部分のみのようでした。

というわけで、結局ユーザースタイルシートを使いました。

アドオンでユーザースタイルシートを使う

Firefoxでは、今見てるサイトに対して自分でcssを適用させて見た目を変えるユーザースタイルシートという機能があります。たぶんほかのブラウザにも。

今まで使ったことがなかったのでやり方を調べたのですが、アドオンでやるのが一番楽そうです。

いくつかあるのですが、メジャーな「Stylus」をつかいました。

これで自分のサイトのURLで以下のcssを適用させるように入力します。

.interface-interface-skeleton__sidebar{
	overflow-y: scroll;
}

これでOKです。

横スクロールバーがなくなって、中身もちゃんと収まるようになりました。よしよし。

ちなみに、Stylusのボタンはツールバーから削除しても特に問題はありません。一度設定してしまったら、あとはツールバーから削除すれば、横スクロールバーが消えたという結果だけが残るようなものです。

思ったよりもよかった

横スクロールバーが出なくなったという、たったこれだけですが、かなりスッキリして使いやすくなった気がします。こんな僅かなデザインだけでずいぶんと(気分も)変わるものですね。

これでこのブログももっと更新しようという気になるものです。

ABOUT ME
著者近影
宮城島 俊太 (Shunta MIYAGISHIMA)

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

CATEGORY
RANKING