本文へスキップ

ホームページビルダー16のCSS編集方針

電話でのご予約・お問い合わせはTEL.03-1234-0000

〒163-0000 東京都○○区○○○1-2-3

ホームページ・ビルダー16フルCSSの編集方針

ビルダーサロンは、○○町の美容院・ヘアーサロンです。
ここに紹介文が入ります。ここに紹介文が入ります。
----------------------------------------------------------------
ホームページビルダー16に入っている、自動スマートフォン作成機能
が使いたくて、「ホームページビルダー16通常版」なるものを買った。
通常版の広告では「テンプレートの組み合わせ総数240通り以上」と
あったので、さぞかしテンプレートが多いのだろうと思い、バリュー
パックではなく通常版にした。
しかし、基本テンプレートはそれほど多くなく、企業ものがほとんど。仕方ないので、企業のテンプレートを個人でも使える形にCSSを変更することにした。
CSSのいろいろな箇所を変更することになったが、記録に残して置かないと、忘れそう。そこで、ホームページビルダー16フルCSS編集過程をその変化が分かるようなページ構成にしてまとめた。

(01)フルCSS編集方針概要
・テーマが美容室でスタイリッシュ ブルーを選ぶと、こんなデザインのページになる。これを個人のページでも使える形にしようと言う訳である。

・上の「ビルダーサロンは、◯◯・・・」の部分に文字を入れて見れば分かるが、文字の位置合わせは<BR>で行うらしい。そうでないと、右側の「ビルダーサロン」に重なってしまう。つまりいま書いているここの部分のサイズになってしまうのである。なぜ、こうしているのか分からないが、<BR>を入れなくても、右と重ならないサイズに変更する。

・住所などを書いた「ビルダーサロン」の部分は関連ページのリンクとその紹介GIFアニメにする。

・ページ右上の「電話でのご予約・お問い合わせは」の部分はサイトの副題・キャッチフレーズを入れる。

・フォントは画面解像度が125dpiなどのモニターで見ても、レイアウトの崩れないピクセル(px)に変更する。

・ここのエリアはページ幅一杯にサイズを変更する。

・全体のカラーは黒から違う色(ブルーを基調)に変更する。

・ページ下の「新着情報」の部分と「スタッフブログ・研修旅行記・サービスカード・ご予約」の背景画は今回の変更ページでもおかしくないので、そのまま使用する。

・2ページ以降は「Concept」のページを変更して使用する。

次のページヘ


news新着情報

20**年*月*日
○○○○○○○○を更新しました。

20**年*月*日
○○新聞に「○○○○○○」が掲載されました。

20**年*月*日
サイトをオープンしました。

スタッフ写真

shop info.店舗情報

ビルダーサロン

〒163-0000
東京都○○区○○○1-2-3
TEL.03-1234-0000
FAX.03-1234-0001
→アクセス