WordPressプラグイン Custom Field Gui Utility の表示をカスタマイズ

WordPressのプラグイン Custom Field Gui Utility 3.2 の入力欄は、
フィールド名と入力欄が上下に並んでいて画面が縦に長くなっています。
そこで、
フォールド名と入力欄を横並びにするカスタマイズを行ってみました。

◆変更前 （約1500px）
◆変更後 （約640px）

カスタマイズ方法

カスタマイズ方法はとても簡単！
下記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 を変更して頂ければと思います。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

この記事と関連する記事