Custom Field Templateプラグインを少し見やすくするCSSコード

Wordpress

Custom Field Templateプラグインを触る機会が増えてきているのですが、標準の見た目は少し見づらかったので、影響のない範囲で自分好みに修正してみました。

確認環境

  • WordPress3.1.3
  • Custom Field Template1.9.9

主な変更点

  • ラベルの見た目が太字で読みづらかったので、薄いグレーに変更
  • 項目ごとの上下関係が分かりづらかったので、薄い点線をひき、かつ下マージンを広くとって見やすく
  • CSSが1行記述で読みづらかったので、改行記述に変更

設定方法

[設定]→「カスタムフィールドテンプレート」→「ADMIN CSS」に以下のCSSコードを記述します。

コード

“`#cft dl {
margin: 20px 0;
border-top: 1px dotted #dfdfdf;
padding-top: 10px;
}
#cft dl:after {
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#cft dt {
width:20%;
clear:both;
float:left;
display:inline;
font-weight:bold;
text-align:center;
}
#cft dt .hideKey {
visibility:hidden;
}
#cft dd {
margin:0 0 0 21%;
}
#cft dd p.label {
margin:0;
color: #777;
}
#cft_instruction {
margin:10px;
}
#cft fieldset {
border:1px solid #CCC;
margin:5px; padding:5px;
}
#cft .dl_checkbox {
margin:0;
}“`

ちなみに元CSSはこちら。

“`#cft dl { margin:10px 0; }
#cft dl:after { content:" "; clear:both; height:0; display:block; visibility:hidden; }
#cft dt { width:20%; clear:both; float:left; display:inline; font-weight:bold; text-align:center; }
#cft dt .hideKey { visibility:hidden; }
#cft dd { margin:0 0 0 21%; }
#cft dd p.label { font-weight:bold; margin:0; }
#cft_instruction { margin:10px; }
#cft fieldset { border:1px solid #CCC; margin:5px; padding:5px; }
#cft .dl_checkbox { margin:0; }“`

タイトルとURLをコピーしました