ホームページビルダーテンプレート

ホームページビルダーでカッコいいホームページを作る

ホームページビルダーにしろそのほか高額の作成ソフトにしろホームページを作成するのはその人なんです。ソフトはただ操作する人の言われたとおりにしているだけなんです。ダサいホームページを作るように言われたからダサく作っているだけです。確かにホームページビルダーとプロ用のソフトでは機能の部分等ではその価格だけの差があります。

しかし普通の中小企業やお店、個人事業主の方のホームページにはそこまでの機能が必要ない場合も多いでしょう。ある意味、ホームページビルダーで充分なのです。

なぜか？

あなたはHTMLの知識はありますか？CSSについての知識はありますか？ホームページビルダーでホームページを作成している人の多くがよく理解していないようです。ホームページビルダーでワープロのようにホームページを作成していくとソフトウェアが自動的にHTMLを記述していってくれます。

テンプレート そのHTMLは多くの場合、複雑で文法に誤りがあったりします。例えば英文のサイトをソフトウェアで日本語に翻訳するとおかしな文章になったりするのと似ています。

わたしは、ホームページを作成するときHTMLを打っています。慣れてしまうとその方が正確に記述できるため作業がスムーズのような気がします。ソフトウェアを使えば手助けもしてくれます。それはホームページビルダーでも同じです。

ちなみにこちらで販売するテンプレートのHTMLを見てみましょう。上の写真のページのHTMLです。

<body>
<div id="box">
<!--ここからヘッダー部分 -->
<div id="header">
<div id="title"><img src="image/title.gif" alt="タイトルロゴ" width="300" height="80" /></div>
<div id="header-right">
<h1>このページの見出し、ページのキーワードを入れると良いでしょう。</h1>
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="prof"><a href="#">プロフィール</a></li>
<li id="map"><a href="#">サイトマップ</a></li>
<li id="blog"><a href="#">ブログ</a></li>
<li id="mail"><a href="#">メール</a></li>
</ul>
</div>
<div id="header-navi">
<ul>
<li><a href="maeni.html">インフォメーション</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">サポート</a></li>
<li><a href="#">会社概要</a></li>
<li><img src="style/image/header-navi-a-bg.gif" alt="right-border" width="16" height="30" /><br />
</li>
</ul>
</div>
<img src="image/top_image.jpg" alt="トップページイメージ" width="780" height="195" /><br />
</div>
<!--ここまでヘッダー部分 -->
<!--ここからメインの部分 -->
<div id="container">
<h2>ようこそウェブサイトへ</h2>
<p class="border">あなたはこれまでにホームページを作ったことがありますか？<br />
あなたはどんなソフトウェアを使ってホームページを作成しましたか？<br />
そしてそのホームページのできばえには満足しましたか？<br />
さらにそのホームページは効果のあるホームページになりましたか？</p>
<div class="l-box">
<h3>ホームページを作ろう</h3>
<p><img src="image/image2.jpg" alt="イメージ2" width="120" height="120" class="al" />これまでにホームページを作ったことがあるという方、初めてホームページを作成しようと思ったとききっと「ホームページビルダー」を購入しようと考えませんでしたか？また購入しませんでしたか？</p>
<p class="border">で、マニュアルどおりに進めていくと確かに簡単!!ワープロでも使うような感覚でさくさく作成出来ます。そりゃ最初は戸惑うこともあったでしょうけどそれほど悩んでしまったり、あきらめざるを得なかったりするということはなかったでしょう。</p>
</div>
<div class="r-box">
<p class="border"><img src="image/image2.jpg" alt="イメージ2" width="120" height="120" class="ar" />多くの方が「そうだそうだ」と思われたことでしょう。「ホームページビルダー」というソフトウェアは価格も数千円とお手ごろです。またマニュアル本、解説本も多く出版されています。さらにメーカー製のパソコンにはあらかじめインストールされているものもあったりします。</p>
</div>
<h3>ホームページテンプレートでワンランク上のデザイン</h3>
<p>しかあし!!<br />
なんか納得いかない!!<br />
なんか素人っぽい!!<br />
ちょっとダサい!!<br />
素敵なホームページって思えない!!</p>
<p>そりゃぁ仕方ないでしょう。だってあなたは素人なんですし…いきなりプロ顔負けのホームページが出来るわけがありません。出来たらプロの必要がなくなります。</p>
<h4>なぜ、ホームページビルダーで作るとダサくなるのか？</h4>
<p>ホームページビルダーで作成したホームページが素人っぽくなってしまうのはホームページビルダーのせいなのでしょうか？いいえ、そうではありません。あなたが素人のためホームページをどう作ってよいかわからずマニュアル本どおり、解説本どおり作成していくからです。</p>
</div>
<!--ここまでメインの部分 -->
<!--ここから左メニュー部分 -->
<div id="sidebar">
<h4>サイトメニュー</h4>
<p><img src="image/image1.jpg" alt="イメージ1" width="100" height="100" class="al" />ホームページビルダーで納得いくデザインができていますか？</p>
<p class="cl">なんかダサい…と思っていませんか？そんな時ソフトウェアのせいにしていませんか？</p>
<ul>
<li><a href="maeni.html">ホームページ作成の前に</a></li>
<li><a href="kihon.html">ページの基本構造</a></li>
<li><a href="header/index.html">ヘッダー部分の記述</a>
<ul>
<li><a href="header/title.html">タイトル画像を差し替えよう</a></li>
<li><a href="header/h1.html">ページの見出しを書こう</a></li>
<li><a href="header/navi1.html">タイトル右のナビゲーション</a></li>
<li><a href="header/navi2.html">タイトル下のナビゲーション</a></li>
<li><a href="header/image.html">ナビゲーション下のイメージ</a></li>
</ul>
</li>
<li><a href="sidebar/index.html">左のメニュー部分の記述</a>
<ul>
<li><a href="sidebar/h4.html">左のメニュー部分の見出し</a></li>
<li><a href="sidebar/menu1.html">カテゴリーメニューの記述方法</a></li>
<li><a href="sidebar/menu2.html">ページメニューの記述方法</a></li>
<li><a href="sidebar/menu3.html">カテゴリーとページの組み合わせ</a></li>
<li><a href="sidebar/text.html">テキスト・画像</a></li>
</ul>
</li>
<li><a href="main/index.html">メインの部分の記述</a>
<ul>
<li><a href="main/h.html">メインの部分の見出し</a></li>
<li><a href="main/text.html">テキストを入力</a></li>
<li><a href="main/dangumi.html">メインの部分で段組</a></li>
<li><a href="main/list.html">リストを書く</a></li>
<li><a href="main/ol.html">番号つきリストを書く</a></li>
<li><a href="main/dl.html">定義型リスト</a></li>
<li><a href="main/image.html">イメージの配置</a></li>
<li><a href="main/caption.html">キャプションつきイメージ</a></li>
<li><a href="main/table.html">テーブル（表）</a></li>
</ul>
</li>
<li><a href="footer/index.html">フッター部分の記述</a></li>
<li><a href="css.html">スタイルシートについて</a></li>
</ul>
<p class="f1"><img src="image/image1.jpg" alt="イメージ1" width="100" height="100" class="ar" /> もし、あなたがこれからホームページを作成しようとするなら、今のホームページよりワンランク上のホームページにしたいのならこのテンプレートがきっと役に立つでしょう。</p>
</div>
<!--ここまで左メニュー部分 -->
<!--ここからフッター部分 -->
<div id="footer">
<p>Copyright&copy; 2005-2008 <a href="http://www.wdcro.com/">Web Design Office CROSSROAD</a> All Rights Reserved.</p>
</div>
<!--ここまでフッター部分 -->
</div>
</body>

どうでしょう？これは<body>～</body>の部分のみですが、あなたがこれまでに作成したホームページのHTMLと比較してみるとよいでしょう。おそらくなぞのアルファベットの記述がもっと多く含まれていたのではないかと思います。あなたが作成したホームページできっと多いのが<font～とか<td>とかが目立つのではないかと思います。

これ以上シンプルにしようがないほどシンプルになっています。

スタイルシートでレイアウト