ホームページ作成ソフトで料金ページを作る

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画高齢者のホームページの作り方よくある質問
 

料金についてのページを作成する|テーブルタグの基本

ホームページで必須の料金ページ

ホームページで実際にお申し込みや問い合わせなどのコンバージョンを得るには、明確にサービスの料金を掲載した方が良いです。

 

例えば英会話のスクールや、学習塾のホームページで授業料が明記されていなければ、問い合わせをするのに躊躇しますよね。

 

士業系では行政書士や測量、登記屋さん、建築業(リフォーム、外壁塗装)など、料金を明確に提示できない場合でも、ある程度の概算でサービス料金を掲載する必要があります。

 

私の場合は、中小企業に対してのホームページ作成提供で、たくさんのサイトを提供していますが、飲食店などでもメニューとして、かなり細かく料金を設定するようアドバイスしています。これは理容、美容関係でも同じ事が言えます。

 

また、期間限定のサービス特売品などがある場合は、料金ページのトップに掲載して、トップページのコンテンツから、直接リンクで飛ばすようにします。

 

商品と価格を見せるためのHTML

商品と価格を見せる一般的な配置の例としては、枠の中に画像を右寄せにして、その左横にサービスと価格を表示させます。あなたのビジネスにあわせて色々工夫してみて下さい。

 

サイト作成ソフトシリウスの場合

シリウスのメインコンテンツの横幅は620PX程度です。商品にもよりますが、バランスよく横幅イッパイに枠を指定して、文章と価格を掲載するには、画像の横幅は250PX程度でまず設定し、後で調節して見て下さい。

 

画像を250PXで、「回り込み指定」した例

 

画像選択時の設定

 

サイズ指定方法・・・・・・・比率固定(横)
画像サイズ横幅・・・・・・・250PX
回り込み・・・・・・・・・・右回り込み
画像ファイルへのリンク・・・別ウインドウ
枠の設定・・・・・・・・・・通常枠

 

料金表

TV用液晶モニター

 

液晶ディスプレイ自体でブルーライトを
低減させるブルーライト低減機能搭載

 

・23.6型ワイド 液晶ディスプレイ
・LCD-AK242EH

 

特別価格・・・24,500円(税込み)

 

料金表

ナチュラルベジフルスムージー

 

酵素カプセルタイプ

 

生酵素大地の力カプセルは、220種類以上の原材料を使用し、豊富な乳酸菌、発酵成分、ビタミン、ミネラルなどを 1粒のカプセルに凝縮 !!

 

不足しがちな栄養素を、生で摂取するのと同等の栄養価で補えます。

 

1袋価格・・・2,100円(税込み) ・60粒(1粒重量410mg)・1粒内容量250mg

 

この他、レイアウト枠の機能を利用し、1行に2列の枠を表示させる方法もあります。
レイアウト枠の使い方の動画を参考に作成してみて下さい。

 

最短ホームページテンプレートの場合

最短ホームページテンプレートでは、付属の「ホームページが作れるようになるサイト」のパーツテンプレートから、画像と文字を横に並べるパーツを選択して貼り付けます。

 

最短ホームページテンプレート

 

このパーツを利用した場合は、枠がメインコンテンツの横幅いっぱいで表示されるため、画像の大きさは200PX〜250PXが適当です。

 

枠線色背景色も簡単に変更できますので、コンテンツにあった色調に調節して下さい。

 

パーツテンプレートでは画像が左になっていますが、画像を右に配置するHTMLを貼っておきますので、コピーしてご利用下さい。

 

<table width="98%" style="border:1px solid blue;" 
cellspacing="0" align="center">
  <tr>
    <td align="left" valign="top" width="350" style="padding:15px;">
      文章
    </td>
    <td align="center" valign="middle" style="padding:8px;">
      <img src="画像ファイル名" width="150" border="0" alt="">
    </td>
  </tr>
</table>

 

テーブル枠の基本

テーブル枠は、料金表のほかに、学習塾や英会話スクールでは時間割スケジュールなどにも頻繁に利用されます。飲食店ではドリンクメニューにも利用できます。

 

テーブル枠のタグの意味をある程度理解し、使いこなせるようになると色々応用できますし、ホームページ作成が楽しくなりますのでぜひ基本は覚えてください。

 

テーブル枠は「表」とも呼ばれます。シリウスではテーブル生成機能により自動で作成する事ができますが、その原理の基本は理解しておく必要があります。

 

テーブルタグの基本概念

まずザッと下記画像でテーブルタグの概念図を理解して下さい。
テーブルは表なので、何列何行にするかを、<tr><td>の数で決めるだけです。

 

テーブルの基本

  • <table>・・・枠の始まりを指示するタグ
  • </table>・・・枠の終わりを指示するタグ
  • <tr>・・・・・行の始まりを指示するタグ
  • </tr>・・・・・行の終わりを指示するタグ
  • <td>・・・・・列の始まりを指示するタグ
  • </td>・・・・・列の終わりを指示するタグ

 

 

ステップ1・・・テーブル枠の基本(1行、1列)

テキスト@

テーブルの基本

テキスト@1列、1行の中に表示されます。テーブル枠の最も基本的な形で、ココから行と列を増やしていく事で、多彩な表が作成できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
</tr>
</table>

width="100%"・・・メインのテーブルの大きさを指定します。
border:1px・・・・・枠線の太さを指定します。数字が大きいほど太くなります。
solid #000000・・・枠の色を指定する#から下の6桁で色がきまります。
6桁の色表一覧

 

ステップ2・・・1行の中に2列を作る

テキスト@ テキストA

テーブルの基本

1行(<tr>が1セット)の中に<td>を2セットにする事で2列になりました。後は<td>を増やしていく事で、基本的に何列でも作成可能です。

 

<table width="100%" style="border:2px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>

</tr>
</table>

 

ステップ3・・・2行目を作る

テキスト@ テキストA
テキストB テキストC

テーブルの基本

ステップ2で2列にしたテーブルを、2行にしてみます。</tr>で、いったん1行目を閉じて、2列目を開始するために<tr>新しい行を開始させます。この繰り返しで、行と列を必要なだけ作成できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>
</tr>
<tr>
<td>テキストB</td>
<td>テキストC</td>
</tr>
</table>

 

ステップ4・・・列の幅の割合を変更する

テキスト@ テキストA
テキストB テキストC

テーブルの基本

<td width="150">width="150"は、数字でPX数を指定する事で、その列の横幅を固定できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td width="150">テキスト@</td>
<td>テキストA</td>
</tr>
<tr>
<td>テキストB</td>
<td>テキストC</td>
</tr>
</table>

 

表の左上であるテキスト@の横幅を指定すると、その下の行のテキストBにも枠幅指定の定義が影響します。なので、各列の一番上のみに枠幅の指定をするだけで良い事になります。

 

テーブルについては、作成ソフトを利用する場合に、以上の事だけ理解できていれば十分対応できます。シリウスの場合ではテーブル枠を自動作成できますし、最短ホームページテンプレートの場合はコピペ、貼り付け、でテーブルが作成できます。

 

ただ、上記のように、HTMLタグの基本原理を理解しておくと、ホームページ作成に幅ができ、将来応用する場合に役立ちます。

 

テーブル枠で時間割を表示させた例

7行6列の例
 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

小学生英会話

10:00-10:45

 

フリートーク

15:00-15:45

 

幼稚園英会話

15:20-16:20

 

フリートーク

15:00-15:45

 

幼稚園英会話

15:20-16:20

 

フリートーク

15:00-15:45

 

小学生英会話

11:00-11:45

 

小学生英会話

16:30-17:15

 

幼稚園英会話

16:20-17:20

 

小学生英会話

16:30-17:15

 

幼稚園英会話

16:20-17:20

 

小学生英会話

16:30-17:15

 

英検対策5級

13:00-14:00

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

英検対策4級

14:15-15:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

 

タグの基本ルール

テーブルタグは<table></table><tr>と</tr><td>と</td>のように、ルールとして必ず開始タグ終了タグで1セットになっている必要があります。この関係が成り立っていないと、ホームページのブラウザ表示が崩れてしまいます。

 

他のタグの例では、<p>段落</p><div>領域</div><a href=リンクURL">リンク</a>なども同じルールですが、タグの基本原理なので、覚えておいて下さい。

企業お店ホームページ作成|料金ページ作成とテーブルタグの基本の関連ページ

トップバナー作成
トップバナーはホームページの顔!訪問者さんのファーストビューでホームページの中身が閲覧されるかどうかが決まります。SEOの第一歩でつ転ばないようにバナーはビシッと作成しましょう!
お問い合わせページの作り方
ご自身の会社のホームページを作成する場合にお問合せのページに必要な情報を解説します。このお問い合わせページはホームページの出口であるため、各ページからのリンクバナーなどを作成して、うまく誘導しましょう。
会社概要ページの作り方
ホームページ作成で会社概要のページはSEO的にみても情報開示という面で非常に重要になります。会社概要について必要なコンテンツとプロフィールの書き方について解説します。
サービス内容のページを作る
ホームページで企業や店舗のサービス内容のページのキーワードは、ホームページタイトルと関連させ、独自のビジネスの特徴を出していくべきです。小規模な企業ホームページでコンバージョンを獲得するコツを解説します。
お申し込みページの作り方
集客につながる効果的な「お問い合わせページ」「お申し込みページ」を作成するときの注意点を解説します。このようなページは閲覧者さんに確実にコンタクトして頂けるよう解りやすい構成にする必要があります。その極意とは!
トップページの作り方
ホームページ作成の最終段階はトップページを造る事です。運営者からのお知らせ欄やイメージ画像、重要コンテンツへの誘導リンクバナーなどをうまく配置しましょう!検索エンジンへの登録などホームページを作成した後の重要な作業についても解説します。
ホームページの改善とSEO
ホームページは完成したら、それが始まり!作りっぱなしで、お問い合わせはありませんし、売り上げも伸びません!一発で完全なホームページできませんので検証して改善していきましょう!そのキッカケとなるコンテンツです。

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ