投稿タイプ post/ブログ では 分類を使うことができないのか?
アーカイブ
ホームページビルダー21クラシックWordPressテンプレートの使い方 YouTube動画をパソコン、スマホ対応
ホームページビルダー21クラシックWordPressテンプレートの使い方
ご予約フォームの作成と使い方@ホームページビルダー21クラシック
ホームページビルダー21教室、第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;
}
ホームページビルダー21 クラシック 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の間違えはワードプレスが吸収してくれているので、ダッシュボードは使うことができていたので、、、まちがえに気がつかなかった)
ワードプレス テンプレート CSS 改造メモ (media printの使い方)@ホームページビルダー21 教室
@media print { .img-responsive { width:auto; max-width:100%; } .merit .img-responsive { max-width:300px; } .voice .panel img { margin-bottom: 10px; } .voice .img-responsive { width:100%; max-width:232px; } .voice .row :after{ clear:both; } .merit top-contents { overflow:hidden; } .col-lg-8.col-md-8.col-sm-8.t-left{ width: 66.66666667%; float:left; } .row.top-line.site-width { overflow:hidden; } .col-lg-4 { width: 33.33333333%; float:left; } .col-lg-3 { width:25%; float:left; } .col-lg-9 { width:75%; float:left; } .panel-body:after { clear:both; } .panel-body { padding: 15px; } .col-lg-12 { width: 100%; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } }