ホームページビルダー21 クラシック フルCSSテンプレート 改造メモ@ホームページビルダー教室授業準備
@media screen and (max-width: 568px)
container_1Bb_2c_left.css:267
.hpb-layoutset-01 #hpb-title {
height: 130px;
background-size: contain;
margin-left: -120px;
}
最後の一行(左マージン)追加にて、背景画像の位置を調整。
『何でも相談できる駆け込み寺』 日本IBM出身 ホームページビルダー元開発責任者 鎌田裕二
ホームページビルダー21 SP テンプレートのCSSを調整します。
@media screen and (max-width: 568px)
style.css:2512
#sp-site-branding2-1 > .site-description {
margin-bottom: auto;
position: relative;
margin-top: -55px;
margin-left: auto;
margin-right: auto;
width: 318px;
height: 38px;
top: 11px;
bottom: auto;
right: auto;
left: 1px;
}
@media screen and (max-width: 568px)
style.css:2522
#sp-site-branding2-1 > .site-title {
margin-top: -10px;
margin-bottom: 21px;
margin-left: auto;
margin-right: auto;
width: 320px;
height: 33px;
}
ホームページビルダー21教室、第3者が作成したHTML/CSSファイル群をもとにホームページ作成中の生徒さん。ご予約フォームの作成開始。
まずは、教室側で見本を作成しました。
<form>
<h3>ご予約フォーム</h3>
<p>当サロンについてのご予約は、下記にて承っております。<br>
<span style=”font-size:75%;”>*は必須</span></p>
<br/>
<div class=”input-line”>
<p class=”input-label”>ご希望コース</p>
<select name=”menu”>
<option value=” disabled selected style=’display:none;’>選択してください</option>
<option value=”facial”>フェイシャル</option>
<option value=”body”>ボディー</option>
<option value=”dathumou”>ワックス脱毛</option>
</select>
</div>
<div class=”input-line”>
<p class=”input-label”>第1希望*</p>
<input size=”20″ type=”text” name=”dai1″ placeholder=”日時”>
</div>
<div class=”input-line”>
<p class=”input-label”>第2希望</p>
<input size=”20″ type=”text” name=”dai1″ placeholder=”日時”>
</div>
<div class=”input-line”>
<p class=”input-label”>第3希望</p>
<input size=”20″ type=”text” name=”dai1″ placeholder=”日時”>
</div>
<br/>
<div class=”input-line”>
<p class=”input-label”>お名前(漢字)*</p>
<input size=”20″ type=”text” name=”dai1″>
</div>
<div class=”input-line”>
<p class=”input-label”>お名前(フリガナ)</p>
<input size=”20″ type=”text” name=”dai1″>
</div>
<div class=”input-line-email”>
<p class=”input-label-email”>E-Mail*</p>
<input size=”30″ type=”text” name=”dai1″>
</div>
<div class=”input-line”>
<p class=”input-label”>電話番号</p>
<input size=”20″ type=”text” name=”dai1″>
</div>
<br/>
<div class=”input-line”>
<textarea rows=”5″ cols=”40″ name=”bikou” placeholder=”ご要望、ご質問等が御座いましたらお聞かせください。”></textarea>
</div>
<br/>
<div class=”submit”>
<input type=”submit” value=” 送信 ” class=”button”>
</div>
</form>
.input-label{
width : 130px;
float : left;
margin-top:3px;
margin-bottom:3px;
}
.input-line input{
width:170px;
}
.input-label-email{
width : 70px;
float : left;
margin-top:3px;
margin-bottom:3px;
}
.input-line-email input{
width:230px;
}
div .input-line, div .input-line-email {
overflow:hidden;
}
.input-line textarea {
width:300px;
}
.submit {
position:relative;
width:300px;
}
.submit input {
position:absolute;
right:0px;
}
WordPress設定 ダッシュボードのURL ホームページビルダーはこの情報からWordPressの位置を決めて画像のURLを生成しているようだ。
http://20161215takara.hpb18.org/wp/wp-admin
となっているべきところ
http://20161215takara.hpb18.org/wp-admin
となっていた。 ホームページビルダーで画像をページに配置
http://xxxxxxxx.net/wp/wp-content/uploads/hpb-media/imagetoumei.gif
のような画像URLが正しいが、上記の設定がまちがっていたので、
http://xxxxxxxx.net/wp-content/uploads/hpb-media/imagetoumei.gif
というURLが生成されていた。 (WordPressのダッシュボードのURLの間違えはワードプレスが吸収してくれているので、ダッシュボードは使うことができていたので、、、まちがえに気がつかなかった)