WordpressのプラグインでWP-Membersが
あるのですが、この横幅を個別に操作したいのですが、
親要素が
html
1<div class="div_text">
と、自動的に入ってしまい。
「generic-no-float.css」で操作はできるものの、
その下の子(孫)要素の幅を親要素より
広げたくても広げられません。
画像で説明いたしますと
「会社名・店舗名」が親要素<div class="div_text">です。
その下の「姓」と「名」が子要素<div class="div_text">です。
さらに、下の「※記者IDは英数字…」のテキストが孫要素です。
※子要素・孫要素も自由に横幅を指定したいです。
広げたいテキストは下記の通りです。
※記者IDは英数字、漢字、ひらがな、カタカナのいずれかを使用してください。
特殊記号や日英以外の言語は表示できない場合があります。
※パスワードは6文字以上の英数字をご使用ください。
既に他の人が登録済みのメールアドレス、パスワードの組み合わせは使用できません。
html
1 <label for="office_shop" class="text">会社名・店舗名</label> 2 <div class="div_text"> 3 <input name="office_shop" type="text" id="office_shop" value="" class="textbox" /> 4 <p class="office_shop_text"> 5 お店・会社の広告・宣伝・案内を投稿する場合は以下必須 6 </p> 7 <label for="last_name" class="text">姓</label> 8 <div class="div_text"> 9 <input name="last_name" type="text" id="last_name" value="" class="textbox" /> 10 </div> 11 <label for="first_name" class="text">名</label> 12 <div class="div_text"> 13 <input name="first_name" type="text" id="first_name" value="" class="textbox" /> 14 <p class="last_name_text1"> 15 ※記者IDは英数字、漢字、ひらがな、カタカナのいずれかを使用してください。<br /> 16 特殊記号や日英以外の言語は表示できない場合があります。 17 </p> 18 <p class="last_name_text2">※パスワードは6文字以上の英数字をご使用ください。<br /> 19 既に他の人が登録済みのメールアドレス、パスワードの組み合わせは使用できません。 20 </p> 21 </div> 22 </div> 23
修正前HTML↓
html
1 <label for="office_shop" class="text">会社名・店舗名</label> 2 <div class="div_text"> 3 <input name="office_shop" type="text" id="office_shop" value="" class="textbox" /> 4 </div> 5 <label for="last_name" class="text">姓</label> 6 <div class="div_text"> 7 <input name="last_name" type="text" id="last_name" value="" class="textbox" /> 8 </div> 9 <label for="first_name" class="text">名</label> 10 <div class="div_text"> 11 <input name="first_name" type="text" id="first_name" value="" class="textbox" /> 12 </div> 13
「functions.php」に下記のPHPを追加しました。
php
1 2add_filter( 'wpmem_register_form_rows', 'my_register_form_rows_filter', 10, 2 ); 3function my_register_form_rows_filter( $rows, $toggle ) { 4 $rows['office_shop'][field_after] = '<p class="office_shop_text">お店・会社の広告・宣伝・案内を投稿する場合は以下必須</p>'; 5 $rows['first_name'][field_after] = '<p class="last_name_text1">※記者IDは英数字、漢字、ひらがな、カタカナのいずれかを使用してください。<br /> 特殊記号や日英以外の言語は表示できない場合があります。</p> 6 <p class="last_name_text2">※パスワードは6文字以上の英数字をご使用ください。<br /> 既に他の人が登録済みのメールアドレス、パスワードの組み合わせは使用できません。</p>'; 7 return $rows; 8} 9
「generic-no-float.css」にある「.div_text」の表示だけを抜粋しました。
css
1/* Login Form and Registration Form */ 2 3#wpmem_login .div_text, 4#wpmem_reg .div_text { 5 width:74%; 6 margin:0 0 14px 0; 7} 8 9#wpmem_reg .div_textarea textarea{ 10 width:100%; 11} 12 13 14/** for smaller screens */ 15 16@media screen and (max-width: 720px) { 17 #wpmem_reg .div_text, #wpmem_reg .div_textarea, 18 #wpmem_login .div_text { 19 float: none; 20 } 21 22 #wpmem_reg .div_text, #wpmem_reg .div_textarea, 23 #wpmem_login .div_text { 24 width: 98%; 25 } 26
「posishon」とか使用したのですが、
下の要素が入り込んでしまいました。
大変わかりずらい説明で
大変申し訳ございませんが
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー