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

2012.3.13

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; }