テーブルを使ってサロンHP作成の時綺麗に並べる方法説明

HPのタイトルはあなたのお店のタイトルになり、中の文章もあなたのサロンの説明&お客様を集客する文になり、次はいよいよデザイン的な部分の第一歩になります。
初心者でもわかりやすいように綺麗に並べる方法などを説明していきます

サロンHP作成でテーブルを使って綺麗に並べる方法説明

綺麗に並べる サロンHP作成でテーブルを使って作る方法説明

先ほどのページまでで、とりあえずでもいいので、トップページ(今開いているindex.html)のページの文章を

あなたのサロンのモノに変えれてえいると思います。

今しっかり変えておけば、もしHPのテンプレートを変えた時もコピーするだけなので、しっかり変えておいてください。

訳は、早いうちに自分のお店のタイトルと内容にしておくことで、検索結果で調べられるのが早くなるからです。(スグではありません)

 

ではでは、つづいて、文だけではさみしいので、メニューページや、デザインを紹介するページなど、

綺麗に写真を並べれるようにテーブルを作成していきます。

 

 

 

 

まずは、 aled(HP編集ソフト) のテーブルを作りたい部分をアクティブにして、

テーブルを置く場所にに、文字を書くときのカーソルを持ってきます。(赤枠のようにピコピコしてるものです)

 

簡単HP作成 テーブルの作り方

 

 

 

 

 

 

 

テーブルを入れたい場所をアクティブにできたら aled の上のメニューバーの 赤枠 のテーブルを選択(クリック)します。

 

見た目、デザインを綺麗にするテーブル

 

 

 

 

 

 

 

 

すると下記の画面が出てきます。

一番上の ”””挿入数””” はテーブルという枠の 縦列と横列 の数を設定します。これはイロイロやってみてください。

幅も、テーブルを作ってから画面上で帰れますので、特に気にしなくても大丈夫です。

 

赤枠の ”””ボーダー””” の部分ですが、 サイズを 0 にするとラインは目に見えません。

私はほとんど 0 でしか使いませんが、ラインを出したい時は、 1 にして、 色 で枠の色を選択できます。

 

0 も 1 も カラーもそれぞれやってみてください。

実際作ってみて、嫌だったら、キーボードの 『back』 ボタン1つで消せますので、やってみることが大切です。

 

下記の設定でいいかなぁ~と思ったら OK をクリックします。

 

サロンHPにデザインをよくするためにテーブルを挿入する

 

 

 

 

 

 

 

 

すると、下記のように、先程アクティブにして、カーソルを移動させた場所に 上記で設定したテーブルが挿入されます。

 

先ほどの設定では ボーダー を 0 にしたのですが、今はボーダーの色が見えてますよね。

これは編集ページで ボーダー が見えないと、編集しにくいので見えるだけですので、

プレビューで見てみてください。何も見えませんね。

 

では早速テーブルに、文字を入力して行ってみます。 ※メニューや、自己紹介、画像紹介などにテーブルはよく使います。

まずは、赤枠のように、テーブルの中の左上の部分に文字を入れるカーソルをテコテコさせるために、クリックしてください。

 

テーブル作成 初心者でも簡単にデザインを綺麗にする方法説明

 

 

 

 

 

 

 

 

そして実際に文字を入力します。 今回はテーブルの使い方の説明なのでなんでもいいです。 『こんにちは』 といれてみました。

すると、テーブルのラインが、今入力している部分だけ大きくなって、何も入ってない部分はかなり小さくなっちゃいましたね?

今からこれらも綺麗に整えていきますのでご安心ください。

まずは練習なので、書きたいことを書いてみてください。

そして、隣のテーブル枠にも文字を書いて言ってください。下記の画面のように、右枠の中をアクティブにします。

 

テーブルに文字を入れていく

 

 

 

 

 

 

 

テーブルの中に文字を書いていくと下記のような感じになります。

文字の長さによって、テーブルの幅が違ってますね。でも今現在はこれでいいです。

 

下記の場合では、真ん中の一番長い文が入っている幅が一番広いので、一番右の ”こんばんわ” と入っている枠を大きくしてみます。

まずは ”こんばんわ” のすぐ後ろをアクティブにしてください。

 

テーブルの文字と幅の合わせ方 初心者でもデザインを綺麗に作る方法説明

 

 

 

 

 

 

 

そして、”半角英数”の状態で (日本語入力ではできません) キーボードのスペースを押します。

(ちなみに半角英数は、キーボードの左上にあります)

すると、一番右のテーブルの枠の幅が広くなり、真ん中と同じくらいになりました。

 

HTMLソースで、数字で動かないように指定もできるのですが、タグなどが難しいので、まずはこの方法でなれてください。

もちろん画像も一緒です。 日本語入力のスペースでは上手く動かないので、半角英数にしてからスペースで調整してください。

単純ですが、テーブルの幅は、こんな感じのやり方で合わせていきます。

 

テーブルの幅の合わせ方

 

 

 

 

 

 

 

次は、テーブルの中でも、上下枠をつけたい時等が出てきます。画像説明のときや、隣のテーブルの枠と書き方を変えたいとき等。

そんなときは、テーブルの枠の中にテーブルを入れるのですが、あまりいい方法ではないのですが、書いておきます。(ややこしいので)

下記の画面では、テーブルの一番下の左枠に、ボーダー0で2段の枠をいれてます。

 

こうすることで、例えば、普段の料金と、サービス価格を入れたりできますね。

 

画像ではテーブルと、テーブルの中にいれたテーブルの下に隙間がありますが、プレビューで見るとなくなってますので、

まずはなんでもやってみてから、プレビューで見て確認するのを忘れないでください。

 

テーブルは真面目なデータを示すときは枠の色をつけて、それ以外の時はボーダーの色を0にして綺麗に整えることに使うといいと思います。

私のデザイン集などは、このやり方で作ってます。  

(もちろんjavaを使ったり、動くスライドショーも作れますが、お客様が一番見やすいのは?と考えると・・・ ですね)

 

テーブルの中にテーブルを入れる

 

 

 

 

 

 

下記の画面が、先程 編集画面で隙間が空いていた部分が、 プレビューでみると綺麗に埋まってますので安心してください。

テーブルしたのスペース

 

 

以上で簡単ではありますが、見た目をよくするデザインの仕方の テーブル の使用方法です。

上記の画面でも プレビュー でみると、普通に綺麗な状態になっています。

テーブルはとにかく触ってみて、プレビューを見ながら調整しながらする事がいいです。

 

では次は、文字自体の装飾についてです。 これもデザインに大きく関わってきますよ。

次もこのテーブルの部分からスタートなので、HP編集ソフトはそのままで次のページをみてください。

広告

広告

HP作成過程

 

1 実際にアナタのサイトを作っていく順番説明

サイトを一通り読み終えたら、それを元にして、イヨイヨ完全無料でのサロンのHPを作成していきます。その手順を順番にかいてます。

2 あなたのHPになるテンプレートダウンロード

まずは、あなたのサロンのHPの元になるテンプレートをダウンロードします。
イロイロ分かるようになってきてから、完全オリジナルに編集していきます。

3 当サイトで使用無料作成ソフト 初心者向き説明 

当サイトで使用する完全無料のソフトの紹介です。このページから一括でダウンロードする事もできます。

4 HP作成後の集客出来るHP作成説明の
PDF・動画説明を見る

HPを作成した後の、テクニックの紹介です。コレをできるようになれば、今の私とまったく同じ知識がついているのと同じになります。SEOやHPの集客を強くするコツです。