WordPressプラグイン Custom Field Gui Utility の表示をカスタマイズ
WordPressのプラグイン Custom Field Gui Utility 3.2 の入力欄は、
フィールド名と入力欄が上下に並んでいて画面が縦に長くなっています。
そこで、
フォールド名と入力欄を横並びにするカスタマイズを行ってみました。
カスタマイズ方法
カスタマイズ方法はとても簡単!
下記CSSを、Custom Field Gui Utility のCSSファイル(cfg-utility.css)を開き、
最下部に貼り付けるだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | #cfg_utility .inside { margin: 0; padding: 10px 20px; } #cfg_utility .widget, #cfg_utility .postbox, #cfg_utility .stuffbox { margin: 10px 0 !important; } #cfg_utility h4 { margin: 0; padding: 3px 0 0; border: 0; line-height: 1.2; width: 150px; float: left; } #cfg_utility .post { clear: both; padding: 0; } #cfg_utility .post .inside { margin: 0; padding: 0 0 0 150px; } #cfg_utility .inside p { margin: 0; padding: 0; } #cfg_utility .thumb { width: 60px; height: 60px; } #cfg_utility textarea { width: 100%; } #cfg_utility div.imagefield div.inside { height: auto; } .formErrorClose { margin-top: 30px; } .formError { padding-top: 30px; } .widget, #widget-list .widget-top, .postbox, .menu-item-settings { background: #F5F5F5; } .widget, #widget-list .widget-top, .postbox, #titlediv, #poststuff .postarea, .stuffbox { border: none; box-shadow: none; } .postbox_hr { text-indent: -9999px; overflow: hidden; height: 3px; margin: 20px 0 !important; background: #ccc; } #cfg_utility .post .inside:after { visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; } * html #cfg_utility .post .inside { zoom: 1; } *:first-child+html #cfg_utility .post .inside { zoom: 1; } |
※フィールド名の横幅は 150px に設定しています。
変更したい場合は、17行目と28行目の 150px を変更して頂ければと思います。