1371481330 wordpress3.5のカスタムフィールドテンプレートプラグインについて教えてください。管理画面側の入力レイアウトを画像のように縦1列から2列に変更させるにはどうしたらよいでしょうか?あと区切り線を入れる方法も教えていただければ助かります<(_ _)>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/06/18 00:02:10
  • 終了:2013/06/21 13:33:57

ベストアンサー

id:rouge_2008 No.3

rouge_2008回答回数594ベストアンサー獲得回数3512013/06/21 13:01:21

ポイント33pt

各テンプレート入力画面のテンプレートフォーマットを指定できるようになっていますから、「[cft] and [cftsearch] Shortcode Format」に次のように表示したいHTMLを記述します。

<table>
<tr><th>画像名1</th><td>[画像名1のKey]</td>
<th>説明文1</th><td>[説明文1のKey]</td></tr>
<tr><th>画像名2</th><td>[画像名2のKey]</td>
<th>説明文2</th><td>[説明文2のKey]</td></tr>
<tr><th>画像名3</th><td>[画像名3のKey]</td>
<th>説明文3</th><td>[説明文3のKey]</td></tr>
<tr><th>画像名4</th><td>[画像名4のKey]</td>
<th>説明文4</th><td>[説明文4のKey]</td></tr>
...以降同様に項目数の分だけ<tr>から</tr>までを繰り返し記述します。
</table>

※上記フォーマットの保存が完了したら、任意のテンプレートの「テンプレートフォーマット」で上記を保存したフォーマットを選択します。


「ADMIN CSS」に次のCSSを追加して置くといいです。

.cft table { margin:10px 0; }

※区切り線や各セルの幅等を指定したい場合も、テンプレートのHTMLでclassを割り振る等して、上記「ADMIN CSS」に追加します。
添付画像のように左側と下に線を表示する場合は、「border-left」と「border-bottom」を指定します。

・トップページ > スタイルシートリファレンス > border-left
http://www.htmq.com/style/border-left.shtml
※「border-bottom」の指定方法も同じです。(ページ下部に関連ページへのリンクあり)

id:kaji0245

ビンゴです!まさにこれでした、ありがとうございます<(_ _)>

2013/06/21 13:33:36

その他の回答(2件)

id:gizmo5 No.1

gizmo5回答回数484ベストアンサー獲得回数1382013/06/18 09:29:46

ポイント34pt

こんな情報がありました。
http://experiment.street-square.com/2011/01/16/custom-field-template-howto/

6.カスタムフィールドテンプレート入力欄のCSS設定変更
設定画面にある ADMIN CSS でカスタムフィールドテンプレートの入力欄に適用するCSSを変更することができます。
たとえばデフォルトテンプレートの入力欄を、以下のようなCSSで左右2列にしてみます。

#cft dl { margin:10px 0; width:50%; float:left; }
#cft dl.dl_textarea { width:600px; }
#cft dt { width:120px; clear:both; ・・・ text-align:center; line-height:100%; }
#cft dd { margin:0 0 0 125px; }


これでいけるなら区切り線は、#cft dl に border-bottom を指定するとできるんじゃないかと思います。

id:kaji0245

上記コードでは思うようなレイアウトになりませんでした(;^ω^)

2013/06/18 11:57:33
id:dawakaki No.2

だわかき回答回数797ベストアンサー獲得回数1222013/06/18 12:42:46

ポイント33pt

No.1の人が回答しているように、カスタムフィールドテンプレートプラグインの入力画面のデザインは変更できますが、管理画面のデザインは変更できません。

id:rouge_2008 No.3

rouge_2008回答回数594ベストアンサー獲得回数3512013/06/21 13:01:21ここでベストアンサー

ポイント33pt

各テンプレート入力画面のテンプレートフォーマットを指定できるようになっていますから、「[cft] and [cftsearch] Shortcode Format」に次のように表示したいHTMLを記述します。

<table>
<tr><th>画像名1</th><td>[画像名1のKey]</td>
<th>説明文1</th><td>[説明文1のKey]</td></tr>
<tr><th>画像名2</th><td>[画像名2のKey]</td>
<th>説明文2</th><td>[説明文2のKey]</td></tr>
<tr><th>画像名3</th><td>[画像名3のKey]</td>
<th>説明文3</th><td>[説明文3のKey]</td></tr>
<tr><th>画像名4</th><td>[画像名4のKey]</td>
<th>説明文4</th><td>[説明文4のKey]</td></tr>
...以降同様に項目数の分だけ<tr>から</tr>までを繰り返し記述します。
</table>

※上記フォーマットの保存が完了したら、任意のテンプレートの「テンプレートフォーマット」で上記を保存したフォーマットを選択します。


「ADMIN CSS」に次のCSSを追加して置くといいです。

.cft table { margin:10px 0; }

※区切り線や各セルの幅等を指定したい場合も、テンプレートのHTMLでclassを割り振る等して、上記「ADMIN CSS」に追加します。
添付画像のように左側と下に線を表示する場合は、「border-left」と「border-bottom」を指定します。

・トップページ > スタイルシートリファレンス > border-left
http://www.htmq.com/style/border-left.shtml
※「border-bottom」の指定方法も同じです。(ページ下部に関連ページへのリンクあり)

id:kaji0245

ビンゴです!まさにこれでした、ありがとうございます<(_ _)>

2013/06/21 13:33:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません