最近ではWordpressのサイトをCSSでカスタマイズする時は、『追加CSS』を使うのが推奨されています。
この『追加CSS』はリアルタイムに修正が反映されて便利な反面、CSS編集画面がとても狭いのが難点です。
これは、プレビュー画面をある程度広く見せる必要がある点、他のカスタマイザー項目もあるのであまり広くすると間抜けになるというのも理由だと思います。
この記事では、カスタマイザーの横幅をCSSでカスタマイズして広げる方法をご紹介します。この記事を読むことで自分の好きな幅の『追加CSS』を手に入れることができます。
追加CSSの横幅は何で決まっているのか？
答え：追加CSSの横幅は、CSSで決まっています。
カスタマイザーの横幅は300pxになっています。そのからくりは、以下のCSSに書かれているためです。
カスタマイザー領域はwidth:18%となっていますがこの数値はmin-width:300px以下になるので無視されて、実際には300pxに固定になるようなCSSになっています。
.wp-full-overlay-sidebar {
box-sizing: border-box;
position: fixed;
min-width: 300px;/*最小の横幅*/
max-width: 600px;/*最大の横幅*/
width: 18%; /*この比率が横幅を決めている*/
height: 100%;
top: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 10;
background: #eee;
border-right: none;
}
.wp-full-overlay.expanded {
margin-left: 300px;/*プレビュー領域の左マージン（カスタマイザー領域と同じ）*/
}追加CSSの横幅を変更するための変更箇所は？
答え：追加CSSの横幅を広げるCSSカスタマイズの内容
カスタマイザー側の横幅とプレビュー側の左マージンが連動していればいいので、2つの値を同じにして書き換えます。
.wp-full-overlay-sidebar {
width: 500px; /*この比率が横幅を決めている*/
}
/*左マージンをカスタマイザーの横幅と連動させる*/
.wp-full-overlay.expanded {
margin-left: 500px;/*プレビュー領域の左マージン（カスタマイザー領域と同じ）*/
}カスタマイザーのCSSを書き換えるには？
答え：特殊な方法で書き換える必要があります
カスタマイザーのCSSを変更しようとして、style.cssや追加CSSに書き込んでも有効になりません。
ちょっと特殊な方法で変更する必要があります。
function.phpで読み込む場合
<?php
/**
* This function adds some styles to the WordPress Customizer
*/
function my_customizer_styles() { ?>
<style>
.wp-full-overlay-sidebar {
width: 500px; /*この比率が横幅を決めている*/
}
/*左マージンをカスタマイザーの横幅と連動させる*/
.wp-full-overlay.expanded {
margin-left: 500px;/*プレビュー領域の左マージン（カスタマイザー領域と同じ）*/
}
</style>
<?php
}
add_action( 'customize_controls_print_styles', 'my_customizer_styles', 999 );
?>CSSをファイルで読み込む場合
<?php
/**
* Enqueue the stylesheet.
*/
function my_enqueue_customizer_stylesheet() {
wp_register_style( 'my-customizer-css', get_template_directory_uri() . 'assets/css/customizer.css', NULL, NULL, 'all' );
wp_enqueue_style( 'my-customizer-css' );
}
add_action( 'customize_controls_print_styles', 'my_enqueue_customizer_stylesheet' );
?>参考：https://aristath.github.io/blog/modifying-wordpress-customizer
まとめ
カスタマイザー周りのスタイル変更は、あまり意識したことがなかったのですが、実際やってみると変更はとても少なく実現できます。
ただし、CSSの追加方法がちょっと特殊なのでそこは面倒かもしれません。
