WordPress 追加CSSの入力欄（カスタマイザー）を広げるカスタマイズ

WordPressの追加CSSはとても便利なのですが、入力欄がとても狭いのが難点です。

あくまでも追加CSSという名の通り、ベースのCSSに対してちょっと追加するだけという用途のものだと思いますが、リアルタイムで反映されるのは何物にも代えがたい便利さがあるので、気が付いてみると追加CSSが数千行になっていることも少なくないです。

しかし、追加CSSが多くなってくると入力欄の狭さゆえに、異常に縦長になってしまう問題があります。

マウスで境界を掴んで動かせたらいいのですが、残念ながらそれは出来ません。

入力欄を広げるにはCSSを変更する必要があります。

この記事で分かること

追加CSSの入力欄を広げるカスタマイズ
追加CSSの入力欄の幅を変更できるテーマは意外と少ない

追加CSSの入力欄を広げるカスタマイズ

functions.phpに張り付ければ、動きます。画面が狭くなったら追加CSSも狭くなってくれる点が優れています。

add_action('customize_controls_print_styles', function(){
?>
<style>
	/* 幅を調整 */
	.wp-full-overlay-sidebar{
		max-width: initial;
		width: max(420px,30vw) !important;
	}

	.wp-full-overlay.expanded{
		margin-left: max(420px,30vw) !important;
	}

	.wp-full-overlay, .wp-full-overlay .collapse-sidebar, .wp-full-overlay-main, .wp-full-overlay-sidebar{
		transition-duration: 0.1s !important;
	}

	/* メニュー表示の速度を速く */
	#customize-info, #customize-theme-controls .customize-pane-child, #customize-theme-controls .customize-pane-parent{
		transition-duration: 0.1s !important;
	}
</style>
<?php
}, 10000);