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

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ホームページビルダー クラシック フル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 グーグルマップAPIキー

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ホームページビルダーSPでグーグルマップを利用するには、グーグルマップAPIキーが必要な場合があります。

ホームページビルダーSPグーグルマップ

Googleマップ オプションの設定 ダイアログにて

Google Maps APIキーの指定ができるようになりました。

ホームページビルダー 21SP 投稿タイプ 分類 

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

投稿タイプ post/ブログ では 分類を使うことができないのか?

ホームページビルダーSP CSS調整 メモ

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

@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;
}

ホームページビルダーでYouTube動画をパソコン、スマホ対応

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ホームページビルダーでYouTube動画の貼り付け。

画面サイズをパソコン、スマホに調整。

ホームページビルダー教室授業メモ

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ワードプレスサイト作成中の生徒さん用メモ

<span style=”display:inline-block;”>札幌市で</span><span style=”display:inline-block;”>格安トランクルームなら</span><span style=”display:inline-block;”>プラスルーム</span>

 

札幌市で格安トランクルームならプラスルーム

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

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ホームページビルダー教室、第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

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

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の使い方)@ホームページビルダー 教室

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

@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; } }

CSS改造事例覚書@ホームページビルダー教室

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

.本日のレッスン中に改造したCSSのメモ。業者作成、現在は生徒さんが改造中

mt20 ul.cotactBtn li img {
margin-left: 7px;
}