ホームページビルダー20 SP クラシック ヒント集 共通

ホームページビルダー・ヒント集 共通

このカテゴリーでは、SP、ワードプレス・テンプレート、フルCSSテンプレートに共通の話題を取り扱います。ホームページビルダー20に限ることなく、旧版の話題もこちらで取り扱います。

今後は、ホームページビルダー バージョン21の話題にも触れる予定です。


ホームページビルダー ヒント集

ホームページビルダー スマホ版 固定部表示試験記録

/* 2017 06 29 */
.fixed-menu {
display:none;
}
@media screen and (max-width: 568px) {
.fixed-menu {
display:block;
position:fixed;
bottom:0;
background:rgba(1, 0, 0, 0.4);
color:white;
z-index:9999;
font-size:14pt;
font-weight:bold;
width:375px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.fixed-menu a, fixed-menu a:link, fixed-menu a:visited {
color:white;
}
}

ホームページビルダー クラシック フルCSSテンプレート 改造メモ

ホームページビルダー クラシック フル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;
}

最後の一行(左マージン)追加にて、背景画像の位置を調整。

ホームページビルダー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;
}

ご予約フォームの作成@ホームページビルダー 教室レッスン

ホームページビルダー教室、第3者が作成したHTML/CSSファイル群をもとにホームページ作成中の生徒さん。ご予約フォームの作成開始。
まずは、教室側で見本を作成しました。

HTML

<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>

CSS

.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 ホームページビルダーはこの情報から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の間違えはワードプレスが吸収してくれているので、ダッシュボードは使うことができていたので、、、まちがえに気がつかなかった)

› 続きを読む