お問い合わせはコチラから

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

サイト運営

WordPressの追加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);
WordPressのカスタマイズ左メニューの幅を広げる方法 (カスタマイザー) | ゼロからわかるホームページの作り方
この記事では「WordPressのカスタマイズ(カスタマイザー)左メニューの幅をCSSで広げる方法 」を解説します。WordPressの管理者で「カスタマイズの左メニュー(カスタマイザー)」をよく使う方で「横幅が狭い」ことに使いづらさを感じていませんか?特に「追加CSS」などのテキストエディタを使う場合、横幅が狭すぎて...

追加CSSの入力欄の幅を変更できるテーマは意外と少ない

ご紹介したように追加CSSの入力欄は簡単に広げることができます。

テーマの設定に持たせて、幅を設定できるようにしたら便利だと思うのですが、そのようなテーマは見かけません。

テーマ作者が追加CSSを使っていないため、追加CSSが不便なことにテーマ作者が気が付いていないからだと思います。

y-standardの有料プラグインはその機能があります。

追加CSS編集機能
「外観」→「カスタマイズ」→「追加CSS」で編集できるCSSを大きな入力欄で編集する機能です。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました