質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1947閲覧

WordPressカスタム投稿フィールドの間隔を調整したい

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/08 15:55

###■前提
WordPressの「Smart Custom Fields」というプラグインを使用しています。

###■目的
カスタム投稿フィールドの間隔を調整したいです。

###■具体例
下記画像①②のステップで、フィールドをいくらでも追加できるプラグインです。
![イメージ説明

そうして追加して記事を公開すると、下記画像のように表示されます。
質問は、このフィールドの表示の間隔(ココ)を調整したい、ということです。
イメージ説明

###お願い
当該プラグインにドンズバなご回答でなくても、とにかくカスタムフィールドの間隔を調整する方法などでもうれしいですし、「コードがないとわかんないけど、大体このあたりにこういうコードが書かれてない?」というヒントでもうれしいです。

尚、フィールド内に「br」を入れたりして間隔を広げるという方法でなく、プラグインやWordPress側のCSSで対処したいと思っています。

わかりにくい質問で恐縮ですが、ご意見頂戴できますと幸いです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/10/08 16:03

出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。また、プラグインが挿入するCSSも追記ください。
guest

回答3

0

ベストアンサー

ひとまずこんな感じでいいような気がします。

css

1.konotabino-wrap { 2 padding-top: 10px; 3} 4.konotabino-wrap .group1 { 5 margin-bottom: 10px; 6} 7.konotabino-wrap .group1:last-child { 8 margin-bottom: 0; 9}

投稿2016/10/08 17:39

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/08 17:52

完っ璧なご回答です!!!ザ!パーフェクト! last-childですかぁ…ははぁ、なんですのこれわ。笑 まことにありがとうとございます。 よい週末を!良い夢を!そしてよい人生を!お過ごしくださいませ★
guest

0

①と②の領域は、何か要素で囲まれていますか?
囲まれているならその要素に何らかのclassがついていませんか?
記事の表示画面を開発者ツール等で検証すれば、
実際にどのような構造のHTMLが出力されているのかわかりますので、
まずはそれを調べてください。

該当の領域にその領域を特定するためのclassがついているのであれば、
そのclassをセレクタとしてmargin-top:●px;などを設定すれば間隔の調整はできると思います。

投稿2016/10/08 16:04

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/08 16:23

こんばんは★ おっしゃるように、①をwrapでくるんでmargin指定してみました。 .wrap { margin-top: 100px; } すると、一番上の間隔だけは調整できました。 しかし、①と②の間隔には適用されませんでした。(´;ω;`) ------- 今回適用された間隔 ① ココは適用されない ② ------- そんな感じです。 ココの間隔も調整できればいいのですが…
kei344

2016/10/08 16:26

To: matsuzakaqさん 横から失礼します。 ②もwrapでくるんだらいいのでは?
gin

2016/10/08 16:29

実際はこんな感じになってるんじゃないでしょうか? 今回適用された間隔 ------- <wrap ココは適用されない ① ココは適用されない ② -------
退会済みユーザー

退会済みユーザー

2016/10/08 16:31

keiさん、ありがとうごさいます。 ②というのは、当該プラグインの機能によって、記事投稿のたびにその都度追加されるんです。③や④が追加されることもあります。 なので、今回私がwrapでくるんでみたら、①②③④…のすべてをまるごとくるんでしまうようなのです。 (私が「①をwrapした」と発言したのがまずかったですね。ただしくは、「カスタムフィールドを呼び出すphpの部分をまるごとwrapした」でした。)
kei344

2016/10/08 16:34

To: matsuzakaqさん では修正依頼にも書きましたが、出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
退会済みユーザー

退会済みユーザー

2016/10/08 16:34

ginさん、ありがとうございます。 うーん、ちょっと違うかもです。 その図でいいますとこうでしょうか。 <wrap> 今回適用された間隔 ------- ココは適用されない ① ココは適用されない ② -------</wrap> ③や④などいくつ追加しても全部wrapするような指示をphpに書いてしまったみたいです。 でも、じゃ、どこをwrapでくるめばいいのだろうか…汗
退会済みユーザー

退会済みユーザー

2016/10/08 16:35

keiさん、かしこまりました。しばしお待ちください。すごいたくさん表示されて、どこがどこだかとかが、ぜんぜんわからなくって。笑
aKusano

2016/10/08 16:39

プラグインが都度追加する①、②、③……の各領域は、それぞれがdiv等で囲まれていないということですか? だとするとあとCSSで何とかするなら隣接セレクタを使う方法が考えられますが、 そのためには出力されるHTML構造の詳細がわからないと何ともお答えできませんね。 .wrapで囲んだ領域全体のHTMLコードを追記できませんか?
aKusano

2016/10/08 16:52

カスタムフィールドをグループ化して簡単にリピート追加することができるプラグインなので、そのグループ化されたカスタムフィールド(今回でいうと①、②、③、の各グループ)をdiv要素などで囲まずにHTMLに出力するとは考えづらいんですけどね。。。既に各グループはプラグインによってclass付きのdiv要素か何かで囲まれてると思うんですよね。。。 ※あくまで予想ですが。
退会済みユーザー

退会済みユーザー

2016/10/08 16:58

だだだ!だめだぁーー!HTMLで出力された文字が多すぎて、なにがなんだか、わかりません!!笑 まるごとコピペしようかと思ったけど、道徳心が引き留めてくれました。笑 さて、そこでですね。 カスタムフィールドのwrapの方法からのアプローチ、というのはいかがでしょうか? 私のwrap方法がまずかったのかなと考えられますので、下記に「こうwrapしました」を書いてみます。 なので「そこをこうwrapすればいいんじゃない?」などアドバイスいただけるかも、、と思っております。 <!-- カスタムフィールド呼び出し --> <div class="konotabino-wrap"> <?php $group_set = SCF::get( 'group1' ); foreach ( $group_set as $fields ) { $aaa1 = apply_filters( 'the_content', $fields[ 'aaa1' ] ); $bbb1 = apply_filters( 'the_content', $fields[ 'bbb1' ] ); $ccc1 = apply_filters( 'the_content', $fields[ 'ccc1' ] ); $ddd1 = apply_filters( 'the_content', $fields[ 'ddd1' ] ); $eee1 = apply_filters( 'the_content', $fields[ 'eee1' ] ); echo $aaa1; echo $bbb1; ?> <ul class="group1"> <li><?php echo $ccc1; ?></li> <li> <?php echo $ddd1; echo $eee1; ?> </li> </ul> <?php } ?> </div> いかがでしょうか?私の「konobasino-wrap」は、なにがマズかったのか?このコードをご覧になっただけで、おわかりになりますでしょうか?汗
aKusano

2016/10/08 17:07 編集

私PHPはよくわからないんですが、これってもしかして<ul class="group1">〜</ul>ってやつが繰り返し①、②、③となって出力されてるんじゃないですか?? だったら直接ul.group1{margin-top: ●px;}とするか、それだと他に影響がでる恐れがあるのでもう少し絞り込んで .konotabino-wrap ul.group1 {margin-top: ●px;} ってやってみたら出来るのでは…?違うかな? (仮にli要素が①、②、③に該当するのであれば、別にそれでもCSSで制御はできますけどね。)
退会済みユーザー

退会済みユーザー

2016/10/08 17:17

おしい!! group1にはddd1とeee1しか含まれていないので、それだけは間隔が調整できました!①も②も③も、すべてのddd1とeee1の間隔に適用されました。 でもやっぱり、aaa1もbbb1もccc1もddd1も調整したいですね… なのに、すべてをくるんだkonobasino-wrapでは、①の上にしか適用されない。①と②の間は変わらない。という…(´;ω;`) ちなみに、繰り返し表示されるのは、group1だけではありません。aaa1~eee1までの全部なのです。このaaa1~eee1がすなわち質問のtest1とtest2にあたります。 そしてそのaaa1~eee1がまとまって、①になるのです。 さらに、質問画像の①をクリックすると、フィールドが追加されます。 すなわち、②が、そして③が追加される、という仕組みです。 もちろん、この②にも③にも、aaa1~eee1まで全部あります。 と、まぁ、そんな感じなのでした。
aKusano

2016/10/08 17:32

んー、この呼び出しテンプレ、なんで$aaaと$bbbを.group1の外でechoしてるんですかね?何か意図があるのですか? このままだとレイアウトの制御はかなり難しいですよ? 出力書式を弄れるなら、cssでレイアウト制御しやすいようにテンプレを書き換えてしまえば良いのでは。。。
退会済みユーザー

退会済みユーザー

2016/10/08 17:36

意図は、「aaaとbbbは横いっぱいに表示して、他のやつは二列のカラムにしているから」という感じです。そうですよね。このおかげで、もうclass指定がひっちゃかめっちゃかです。まったくの素人なので、思いつくかぎりの組み合わせで今テキトーにやっています。笑 で、当時もそんな感じのでたらめでやっていたら、「意図」の通りの表示ができた!というノリだったので、テンプレを書き変えるのは、これまた偶然の一致待ちとなるため、難易度高めです。 …図書館でもいって勉強してきますわ。笑
退会済みユーザー

退会済みユーザー

2016/10/08 17:54

aKusanoさん、たびたびのご返信、まことにありがとうございます。 今回は上述のphpを読み解き、かつ、改変不要なCSSを提示してくださったginさんにBAとさせていただきました。 遅くまでお付き合いいただき、ほんとうにありがとうございます。
aKusano

2016/10/09 15:53

お構いなく〜
guest

0

PHP

1<div class="konotabino-wrap"><?php 2$group_set = SCF::get( 'group1' ); 3foreach ( $group_set as $fields ) { 4 $aaa1 = apply_filters( 'the_content', $fields[ 'aaa1' ] ); 5 $bbb1 = apply_filters( 'the_content', $fields[ 'bbb1' ] ); 6 $ccc1 = apply_filters( 'the_content', $fields[ 'ccc1' ] ); 7 $ddd1 = apply_filters( 'the_content', $fields[ 'ddd1' ] ); 8 $eee1 = apply_filters( 'the_content', $fields[ 'eee1' ] ); 9 printf ( '<div class="aaa1">%1\$s</div><div class="bbb1">%2\$s</div><ul class="group1"><li class="ccc1">%3\$s</li><li><div class="ddd1">%4\$s</div><div class="eee1">%5\$s</div></li></ul>', $aaa1, $bbb1, $ccc1, $ddd1, $eee1 ); 10} ?> 11</div><!-- >未テスト< -->

CSS

1.konotabino-wrap .aaa1 {} 2.konotabino-wrap .bbb1 {} 3.konotabino-wrap .ccc1 {} 4.konotabino-wrap .ddd1 {} 5.konotabino-wrap .eee1 {}

投稿2016/10/08 17:31

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/08 17:50

おおお、いつも間にかご回答をいただいてましたね(^◇^) ありがとうござます。 さすがのさすが、さすがのさすがのさすがでございます。。 ただ、、今回は、CSSの指示内容が少なくて済みそうなginさんにBAを投じさせて頂きたいと思います。ていうか、ケイさん全部「総合1位」ですもん!!!!たまには他の人に、ね。笑 いつもありがとうございます。サイトができあがったらお知らせしますね(^_-)-☆
kei344

2016/10/08 18:07

全部独立して指定したいのかと思いましたので、ざっと書きました。 > 総合1位 scoreはまめに回答していれば誰でも上げられるので、matsuzakaqさんも回答しまくればいけますよ。 > サイトができあがったらお知らせします 規約に触れる可能性があります(広告)。なので別にかまいませんので、楽しんでコーディングしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問