人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1371481330
●拡大する

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● gizmo5
●34ポイント

こんな情報がありました。
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 を指定するとできるんじゃないかと思います。


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

2 ● だわかき
●33ポイント

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


3 ● rouge_2008
●33ポイント ベストアンサー

各テンプレート入力画面のテンプレートフォーマットを指定できるようになっていますから、「[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」の指定方法も同じです。(ページ下部に関連ページへのリンクあり)


kaji0245さんのコメント
ビンゴです!まさにこれでした、ありがとうございます<(_ _)>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ