Q&A
キャッチフレーズがソースにないですがformの外にいるんですか？
初めて質問させて頂きます。
現在、wordpressで記事の最後に、メルマガ登録フォームを設置しようと作業中です。
背景に画像を敷いて表示させたいのですが、どうしても上手く行きません。。。
完成イメージは下記のような感じです。
イメージ写真の様な感じで表示させたいのですが、
現状は下記画像の様な状態です。
html
1<form action="https:/************" method="post" name="******_form"> 2<div style=" background-image: url('http://******.jp/wp-content/uploads/2016/10/*********.jpg'); width:100%; height:500px; background-size: 100%; background-repeat: no-repeat; padding-top: 60px; padding-bottom: 20px; padding-left: 20px;"> 3<fieldset > 4<input id="touroku_name1" class="inputText inputTextShortest" name="touroku_name1" size="10" type="text" placeholder="姓" /><input id="touroku_name2" class="inputText inputTextShortest" name="touroku_name2" size="10" type="text" placeholder="名" /> 5<input id="touroku_mail" class="inputText inputTextLong" name="touroku_mail" size="30" type="text" placeholder="メールアドレス" /> 6<input class="formBtn" name="submit" type="submit" value="登録" /></fieldset> 7</div> 8</form>
お恥ずかしいですが、上記が固定ページに記載しているコードになります。
できれば、外部のスタイルシートを使用せずに、このシート内でコードをまとめられたらと考えております。
どなたかお力添えのほど、宜しくお願い申し上げます。
【追記】
height:500px;を外すと以下のようになってしまいます。
ご観覧頂きありがとうございます。出来ればフォームの中に入れたいのですが、一旦は画像に直接photoshopで記載して、そのまま使用しております。宜しくお願い致します。
回答3件
0
質問で掲載されている画像のフォーム部分って今まるごと画像なんですか？
それをwidth:100%;で調整しています？
それならば、divについているheight:500px;を削除すればいいと思います。
実際にフォームをコーディングする際もこの指定は不要かと思います。
投稿2016/10/17 04:29
総合スコア2722
ご回答ありがとうございます。
height:500px;を外すと以下のようになります。
フォーム部分はメルマガの張り付け用のタグを使用していますので、
画像ではありません。
宜しくお願い致します。
すみません。。。
height:500px;を外した画像は、追記で本文に掲載させて頂きました。
背景画像を縦横ピッタリに出すにはheightが必要ですね。
また縮めても同じ状態にするとなると横幅に合わせ同じ比率でheightを変化させていくJSを書く感じになるとおもいます。
背景はあくまで背景なので大きさをもちません。
早々にご丁寧な回答ありがとうございました。
背景についてとても勉強になりました。
私自身、色々と勘違いしていた点が多かったです。。。
また何か質問させて頂いた際は、宜しくお願い致します。
0
ベストアンサー
divについてるheight:500px;を取って、
背景領域の高さは内容物とpaddingの合計で自動的に決まる仕組みにすればいいと思います。
インラインCSSで指定した場合、メディアクエリが使えません。
従って画面サイズに応じて適用するCSSを分岐させることはできません。
なので、どんな幅・高さになっても成り行きでそれなりにちゃんとしたレイアウトに見えるように
しておく必要があります。当然、「PCサイズの時はこう、SPサイズの時はこう」といった具合に
それぞれで別個に細かくレイアウトを調整することはできませんので、どこかで妥協が必要になります。
それが嫌なら外部スタイルシートに@mediaで条件分岐させて記述するしかないです。
投稿2016/10/17 04:59
編集2016/10/17 04:59
総合スコア3763
ご回答ありがとうございます。
外部スタイルシートを読み込ませるのはどのようにすればよいですか？？
今は一旦個別ページを使用して、作っているのですが。
最終的には”bottom-of-every-post”というプラグインを使う予定です。
ご回答よろしくお願い申し上げます。
追記拝見しました。
背景画像に使っている写真を縦横ピッタリで常に表示することはマストな要件なのですか？
レスポンシブの場合は基本的に横幅が変わりますので、通常は要素の縦横比が変動します。
縦横比が変動する要素に固定比率の背景画像を貼れば、当然どこかが見切れるか（cover）、背景画像で覆われない部分が出るか（contain）、画像の縦横比が変わるか（100% 100%）、何かしら問題が生じます。
背景画像をそのままの縦横比ピッタリで拡大・縮小させるのであれば、
JSを駆使するか、CSSでpaddingハックと呼ばれる手法を取る必要があります。
いずれの手法を取った場合でも、今度は内容物が背景領域の枠内に収まりきらなくなる危険性が生じます。特に、フォームの前後に何かテキストを追加したいんですよね？
テキストは画面幅が変化しても基本的に拡大縮小しませんので、折り返しが発生して高さが変わります。
その際、ボックス要素の高さが背景画像の領域までしか存在しなければ、中身はボックスからはみ出してしまいます。
これらの両立は非常に難しい課題ですので、
①通常はコンテンツ量に合わせて背景表示領域は成り行きに任せるか、
②それとも背景表示領域に合わせてコンテンツ量の方を制限するか、
二者択一となります。
どちらを優先したいのかによって、取るべき手法は変わりますので
まずは何を優先して見せるべきなのか決めた方がいいと思います。
ご丁寧な回答ありがとうございました。
外部CSSを使ってメディアクエリでできるかぎり対応することにしました！
ありがとうございました！
0
まず、どの時点でfromの下に大きくmarginが開くのか調べてほしいです、
試してほしいのは
・divを取る
この時点でmarginが空くなら背景画像は無関係
・divをfromより外に
・divをpに
・divのstyleを消したり足してみる
いろいろ試して何をやればmarginが空くのか原因を絞込む
投稿2016/10/17 04:45
総合スコア32
あなたの回答
tips
プレビュー
