CSSとHTMLを変更してプラグインの設定画面を見やすくする方法

プラグインの設定画面を作るのに、「51-modern-default.css」を利用されている方は多いと思いますが、

ここでcssにちょっとした工夫をすることで、設定画面を見やすくすることができます。

 

○完成イメージ

 

線で囲っているだけですが、設定項目と設定項目の区切りが大分見やすいですね。やり方はconfig.cssに

 

.{クラス名} {

    margin: 10px 0px 10px 0px;

    border: solid 1px #eee;

    padding: 20px;

}

 

これを追記し、ここで指定したクラス名を各設定項目の一番親のdivタグに入れるだけです。

<div class=“{クラス名}”>

とっても簡単なので是非お試しください(^^)/