チェックボックス／ラジオボタンの縦／横並び設定

[ari.endo]

初めまして。遠藤存と申します。
技術評論社の本で、Contact Form 7を知り、利用させていただいております。
とても使いやすく、すばらしいプラグインを作っていただき、ありがとうございます。

ところで私も、masaruさんと同様の要望があり、
span.wpcf7-list-item { display: block; }を使って、
チェックボックスを縦書きにすることができました。

「タグの作成」のオプションの、idとかclassのところで
{ display: block;}を指定したスタイル名を指定したのですが、
どうも、span.wpcf7-list-itemという名前で無いと反映されないようです。

これだと、他のチェックボックスやラジオボタンもすべて縦書きになってしまいます。
ラジオボタンは短いものは横書き、長いものは縦書き、と使い分けたかったので、
タグのidとかclassのところで、別々のスタイル名を有効にできないものでしょうか？

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

[ari.endo]

追加情報です。
<style type=”text/css”>
<!–
.list-block { display: block; }
.list-inline { display: inline; }
–>
</style>
クラスを作成し、以下のようにタグを作っています。
[checkbox* inquiry-type class:list-block “資料が欲しい” “相談がしたい”]

ところが、Firebugで見てみると、作ったクラスが反映されず、
wpcf7-list-itemクラスが固定で設定されてしまっています。
<span class=”wpcf7-list-item”>
<input name=”inquiry-type[]” value=”資料が欲しい” type=”checkbox”> 
<span class=”wpcf7-list-item-label”>資料が欲しい</span>
</span>
<span class=”wpcf7-list-item”>
<input name=”inquiry-type[]” value=”相談がしたい” type=”checkbox”> 
<span class=”wpcf7-list-item-label”>相談がしたい</span>
</span>

設定の仕方がまずいのでしょうか？
ご教示いただければ幸いです。

[ari.endo]

遅ればせながら、$7寄付させていただきました。

[Takayuki Miyoshi]

[checkbox* inquiry-type class:list-block “資料が欲しい” “相談がしたい”]

このクラス指定は、<span class="wpcf7-list-item"> のひとつ上の階層の <span> に対して適用されます。したがって、以下のようにスタイルを指定すれば意図どおりになるでしょう。

.list-block .wpcf7-list-item { display: block; }
.list-inline .wpcf7-list-item { display: inline; }

[ari.endo]

ご教示の通りの設定で、解決いたしました。
スタイルシートの勉強不足で申し訳ありませんでした。
ご丁寧な説明、ありがとうございました。

これにて、解決済みとさせていただきます。

[KINOL]

要するに、以下のような考え方で解決するということですよね？
（少なくとも私は解決できた、と思います。）

１）現在利用しているテーマのスタイルシートに、以下を追加で書き込む。
　.list-block .wpcf7-list-item { display: block; }

　.list-inline .wpcf7-list-item { display: inline; }

　span.wpcf7-list-item{display: block;}

２）これで、デフォルトで縦書きになるが、横書きにしたい場合は以下のようにフォームのコード内に記述する。
　 [checkbox* checkbox-001 inquiry-type class:list-inline “新規” “追加” “追加”]

　

[KINOL]

↑の最後の行は、
[checkbox* checkbox-001 inquiry-type class:list-inline “新規” “追加” “削除”]
でした。

失礼しました。