アニメーションGIFとCSS animationの使い方 @ホームページビルダー21テンプレート

ホームページビルダーに同梱されているアニメーションGIF

アニメーションから切り出したフレーム

CSS3でフレームにアニメーションを加える

 

ホームページビルダー21クラシックWordPressテンプレートの使い方 YouTube動画をパソコン、スマホ対応

ホームページビルダー21クラシックでYouTube動画の貼り付け。

CSS定義を追加して、画面サイズをパソコン、スマホに調整。 

ご予約フォームの作成と使い方@ホームページビルダー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;
}

CSS font-family の使い方@ホームページビルダー21教室

ヒラギノ明朝

font-familyをCSSにて設定

クラシック フルCSSテンプレートの使い方 アンティーク@ホームページビルダー21

ホームページビルダー21クラシック フルCSSテンプレート

フルCSSテンプレート アンティーク
[0000],[1000],[10000]のような番号が振られていない。そのため通常版、バリューパック、ビジネスパックのどれに含まれているのかが不明。ファイルのありかを探して確認しました。

C:\Program Files (x86)\JustSystems\HPB21\CLASSIC\stdlayout\02\Ga\preview_icon\dsnset07a.gif

 

ホームページビルダー21 クラシック テンプレート CSSの使い方

ホームページビルダー教室の生徒さんからの要望でワードプレス・テンプレートのCSSを改造しました。その記録です。

h1#hpb-page-title {
text-shadow: 2px 1px 1px black;
}

.entry-content h3[class=”myh3″] {
border-radius: 5px;
background-color: #fdfff2;
border: solid 1px #a3bf51;
padding-left:5px;
padding-top:5px;
}

ホームページビルダー20 SPの使い方 Yahoo!地図問題

ホームページビルダー教室の生徒さんが作成中のSPサイト(サイトタイプ=WordPress)

Yahoo!地図を埋め込んでも、地図データが表示されない現象に悩まされています。

問題解析ようにサイトのデータをエクスポートしてもらい、教室のパソコンで再現、調査しています。

また、ホームページビルダー教室で作成したSPワードプレスサイト

http://www.hpb20sp-wp.com/acaaa/

では正しく表示できています。

次のCSSが邪魔していうようです。(style.css)

img {
max-width: 100%;
height: auto;
}

 

CSS font-familyの使い方メモ ホームページビルダー教室

font-family: “ヒラギノ明朝 ProN W6”, “HiraMinProN-W6”, “HG明朝E”, “MS P明朝”, “MS PMincho”, “MS 明朝”, serif;

font-family: ‘游明朝’ ,’Yu Mincho’ ,’游明朝体’ ,’YuMincho’,’ヒラギノ明朝 Pro W3′ ,’Hiragino Mincho Pro’ ,’HiraMinProN-W3′,’MS P明朝’ ,’MS PMincho’ ,serif;

明朝体・ゴシック・丸ゴシック フォントの指定方法 CSS font-familyの使い方 @ ホームページビルダー20教室

明朝体の指定

明朝体の指定

明朝体の指定

ゴシックの指定

丸ゴシックの指定

サイドバーの左右配置変更@ホームページビルダー20 クラシック ワードプレス・テンプレートの使い方

ホームページビルダー クラシックのワードプレス・テンプレートにはウィジットを配置するために必ずサイドバーという領域が左右どちらかに配置されています。

ホームページビルダー.net

ホームページビルダー.net 変更前

本サイト ホームページビルダー.netではサイドバーが左側に配置されているテンプレートを使って作成しました。

style.cssを変更することにより、左右を入替えました。

ホームページビルダー.net

ホームページビルダー.net 変更後