ホームページ制作支援 (本格的実用テンプレート販売)

個人や企業のサイトを手軽に、素早く、無料で、直ぐに作り始めるために・・・

"37370428.zip" : 450KB / "39390727.zip" : 450KB

これらのファイルは、無料でご利用いただける体験用のテンプレートです。

 

《お詫び》 HPの制作にある程度の経験がなければ、無用の長物で役に立ちません。<(_ _)>

知恵を絞って考えなければ、どんなに使えるモノも役には立ちません。

このサイトの第一印象はいかがでしたか？

”正直、特にステキってことはないけど・・・、まぁ～～、

特に見劣りするってこともないかもね。”　ってとこでしょうか(^_^;)？

”可もなく不可もなく。”　ってとこでしょうか？

でも、もしこんなサイトが無料で手軽に作り始められるとしたら、

作ってみたくなりませんか？

もし、興味が湧いて作ってみたくなったら、続きをご覧ください。
 

ホームページ制作の現実
  • ホームページを制作するためのアプリケーションは色々とありますが、残念ながら基礎的な知識を必要としないものなど一つもありません。
    　
  • サイト制作の初心者がどんなに高性能なHP作成ツールを使っても、現実には、プロが制作するような、見栄えと機能性に優れたサイトを作れる訳ではありません。
    　
  • 見た目も実用性も優れたサイトは、専門的な知識を身に付け、試行錯誤を繰り返しながら経験を積んだ制作者の努力によって作り上げられるモノで、HP作成ツールが作ってくれる訳ではありません。
    　
  • HPの基盤はテキストで構成されるHTMLのため、テキストエディタさえあればHPが作れるのは確かです。しかし、テキストエディタだけでHPを作り上げようとすると、その効率の悪さに音を上げるのは必至です。ですからそれはあくまでもHTMLの基礎学習に留め、その後は何らかの高性能なHP作成ツールを利用するのが賢明です。
    　
  • HP作りでも、大工さんがどんなに素晴らしい工具を使っても経験を積むまで素敵な家を建てられないのと同じで、技を磨いてこそ、優れた道具がその真価を発揮します。

事業所サイトにおける最近の傾向

  1. SEO("Search Engine Optimization")対策として、フレームを使わないサイトが殆どです。
    　
  2. サイトにいかなる最先端技術を組み込んでいたとしても、トップページからの画面遷移と、他の全てのページからの画面遷移に共通の選択メニューを提供しています。その殆どがページの最上部に置かれ、ページを上にスクロールすると、そのメニューが見えなくなるのもやむなしとしています。
    　
  3. すべてのページの最下部に、サイト全体で共通の著作権表示などが表示されています。
    　
  4. 横幅が800ピクセル以内に収まるレイアウトにすることによって、800×600ドット以上の解像度を持つモニターならば、横スクロールすることなく縦スクロールだけで見渡せるようにしています。但し、ワイドモニターが低価格化と共に普及しているので、今後はYahoo!のトップページのように、1024ピクセル幅以上のレイアウトが増える傾向にあります。
    　
  5. 前項2.を「ヘッダー領域」、3.を「フッター領域」とすると、ページ内の「本文領域」は、様々なサイズのいくつかの見出し付きのブロックで構成されています。
 
 

体験用テンプレートについて
  • "37370428.zip" の解凍方法が分からない方、又はHPの制作が未経験の方は、このファイルをご利用にならないでください。誠に申し訳ありませんが、これはPCやHP制作の初心者にご利用いただくためのファイルではありません。
    　
  • このファイル名の数字は、"Template Selector" によって選択された種類を示し、左から2桁ごとにヘッダー、本文、フッター、サイドの番号を表しています。
    テンプレートの選択購入画面
    　
  • zipファイルを解凍すると以下のような構成です。
    解凍後のファイルとフォルダの構成
    　
  • "Sample_Layout.htm" をWクリックすると標準のブラウザで確認できますが、HP制作ツールをご利用の場合、すべてファイルとフォルダを新規プロジェクトにインポートし、編集可能な状態で開かれることをお薦めします。
 

テンプレートの概念
  • 右の図は、"Template Selector (Vista調) Web シミュレーション" で配色を選択する様子ですが、このレイアウトを使ってテンプレートの概念を説明します。
    　
  • ブラウザ中のドキュメント部分は、ヘッダー領域(赤枠)、本文領域(黄枠)、フッター領域(青枠)、左右サイド領域(緑枠)と、4つの領域に分割して捉えます。
    　
  • 前述の傾向で述べるように、すべてのページで常にサイト全般のメニューと著作権を表示する場合は、それぞれをヘッダーとフッターに配置し、すべてのページで本文領域の内容だけが違えばいい訳です。
    　
  • つまり、本文領域以外はすべてのページにおいて共通でいい訳です。となると、全ページに同じ内容を、ページ数だけ繰り返し貼り付ければ簡単です。しかしこの方法は、共通部分をほんの少し変更するだけでも、全ページを編集しなければならず、大変な手間が必要になります。
    　
  • そこで登場したのが「マスターページ」の概念で、共通の内容はたった一つ作るだけで済ませてしまおう、と言う考え方です。当サイトで紹介しているテンプレートは、マスターページの概念を採用するための最も手軽な手段として、インラインフレームを使っています。
 1ページのレイアウトは、ヘッダー、フッター、本文、両サイドから構成されていると想定します。
テンプレートにおけるヘッダー領域とフッター領域は、
各ページのインラインフレーム内に表示されます。
  • インラインフレームとは、ページの中に別のページを配置するための窓枠のようなもので、ページ内の自由な位置に自由なサイズで配置することができます。そこで、サイト全体を構成する全コンテンツページに対して、予め上端にメニュー用(ヘッダー領域)のインラインフレームを、下端には著作権表示用(フッター領域)のインラインフレームを置きます。
    　
  • 左右両サイドの領域については、高解像度のブラウザで表示した際の余白みたいなもので、真っ白のまま見せるか、少し色を付けて見せるかだけです。そのため、後で配色を変更したくなった場合は、背景画像を差し替えれることで対処できます。
    　
  • 以上のようなページの仕組みによって、完全に独立したメニューだけのページを1ページと、完全に独立した著作権表示だけのページを1ページ作るだけで、両者はすべてのコンテンツページ内のインラインフレームの中に表示できます。これによって、メニューと著作権表示の変更は一ヶ所だけで済ませられます。
    　
  • 「マスターページの概念」などと言うと難しく感じられたかも知れませんが、インラインフレームを使っていつも同じ位置に同じページを表示させるだけで、とっても簡単に実現できるのです。このテンプレートの最大の特徴は、「ヘッダー領域の部分に設置したインラインフレームには常にメニュー専用ページを表示し、フッター領域の部分に設置したインラインフレームには常に著作権専用ページを表示する」と言う仕組みです。それを踏まえた上で、体験用テンプレートをお試しください。
 

テンプレートの使い方

はじめに

  • テンプレートのHTMLをテキストエディタで編集するのは現実的ではないので、どこのメーカー製でも、ご自身が使い慣れた効率の良いHTML編集ツールをご利用ください。この解説では Microsoft Office SharePoint Designer 2007 を使いますが、他のツールをご利用の場合は、そのツールに合った操作にご自身で置き換えて操作してください。(なお、1024ピクセル対応のワイド版サイトを作成する場合は、ファイル名の頭に"W"が付くファイルをご利用ください。)
    　
  • 使い慣れたHTML編集ツールを持たない方のために、Microsoft Office SharePoint Designer 2007 と同等かそれ以上の編集機能を備え、しかも無料で入手できる最新のツールをご紹介します。マイクロソフト社のHPには、誰でも無料で入手して利用できる非常に優れた開発ツールがあり、Webサイトの開発用には「Visual Web Developer 2008 Express Edition 日本語版」があるので、詳細は「無料で使える開発ツール」を参照してください。

ファイルとフォルダの目的と用途

  _MasterImages 左右両サイドの背景画像が全種類、サイト全般で利用するための汎用の画像
  Using テンプレートの要となるファイルを収容
  　　images テンプレートを構成するための画像を収容
  　　Document.css 本文領域(サイトの全コンテンツ本文)で利用する CSS
  　　Footer.css フッター領域に配置するための Footer.htm が利用する CSS
  　　Footer.htm フッター領域に配置するための著作権表示用 HTML
  　　Header.css ヘッダー領域に配置するための Header.htm が利用する CSS
  　　Header.htm ヘッダー領域に配置するためのメニュー用 HTML
  　　WFooter.htm フッター領域に配置するための著作権表示用 HTML (1024ピクセル・ワイド版)
  　　WHeader.htm ヘッダー領域に配置するためのメニュー用 HTML (1024ピクセル・ワイド版)
  BasePage.htm 全コンテンツの原本で本文が空白の HTML / このファイルを「別名で保存」して複製を編集
  Blocks.htm 様々なサイズのブロックを1列、2列、3列に並べ、一塊にしたテーブルの原本 / コピー元に利用
  Sample_Layout.htm ヘッダー領域、本文領域、フッター領域が集結した全体像をサンプル表示
  Sample_Styles.htm CSS に納められている各種スタイルをまとめてサンプル表示
  WBasePage.htm  全コンテンツの原本で本文が空白の HTML (1024ピクセル・ワイド版)
  WBlocks.htm  ブロックを並べ、一塊にしたテーブルの原本 (1024ピクセル・ワイド版)
  構造説明書-1.htm  Header.htm の構造説明書
  構造説明書-2.htm  BasePage.htm の構造説明書

レイアウトの基本は多重テーブルの活用

「ヘッダー領域」、「フッター領域」、「本文領域」を明確に分離して配置するためにはテーブルを使います。テーブルは罫線枠のようなもので、線の太さ、色、幅などを自由に指定でき、状況に合わせて伸縮自在のため、自由なレイアウトのための最強のツールです。さらに、無色透明で線の太さがゼロ(0)として扱うことによって幾重にも重ね合わることができ、その機能をどれだけ活用するかが、どれだけ巧みにレイアウトを設計できるかとなります。

最初にヘッダー、フッターのページを作成してサイズを確定

"BasePage.htm" を使ってトップページやその他のコンテンツページを書き始める前に、メニューや項目名などのテキストを除き、ヘッダーやフッターとなるページ("Using/Header.htm","Using/Footer.htm")のレイアウトとサイズを確定してください。同時にロゴマークのサイズも確定してください。これらのサイズを真っ先に決めることによって、全ページの原版となる "BasePage.htm" 内のインラインフレームのサイズも確定でます。順序を間違えると大量のコンテンツページを作成した後に、そのすべてのインラインフレームのサイズを調整しなければなりません。

"BasePage.htm" 内のインラインフレームを調整

"BasePage.htm" を開き、上部インラインフレームに "Using\Header.htm"、下部インラインフレームに "Using/Footer.htm" を割り当てます。実際に表示して状態を確認し、各インラインフレームの縦(高さ)のサイズが最適な状態になるように調整してください。横幅のサイズは最初から最適化されているので変更する必要はありません。上下のインラインフレームのサイズが確定したら、以後は編集禁止扱いとして、新規コンテンツページのテンプレート原版としてご利用ください。

空のトップページと空のコンテンツページの準備

"BasePage.htm" を複製して、"index.htm" やコンテンツ用の空のページを用意してください。これらは空のページと言っても、インラインフレームには既に所定のページがセットされているので、下図(1)のように表示されます。まだ空欄のためほんの僅かな高さしかありませんが、ヘッダー領域とフッター領域に挟まれたセルが本文領域です。この本文領域には、764ピクセル幅の1列1行のテーブル(2)が収まっており、その周りにはさらに大きなテーブル(3)があり、またその周りにはさらに大きなテーブル(4)があります。この違いは、カーソルを中央に置き、[Esc]キーを何度か押して確認できます。

 

(1) 空のページ index.htm　(2) 本文領域のテーブルを選択した状態

 

(3) 一回り外のテーブルを選択した状態　(4) 二回り外のテーブルを選択した状態

 

これが分かっても特に役立つ訳ではありませんが、テーブルを巧みに重ね合わせると意外と思いもよらないことができること、その重なり具合は外見上で識別が非常に難しいこと、それをご理解いただくために示しました。仕組みを知れば真似る事ができるからです。
 

本文領域のテーブル内にブロックを配置

"Blocks.htm" には予め下図のような複数のブロックが用意されているので、必要なブロックをコピーし、"index.htm" などの本文領域のテーブル内、上図(2)に貼り付けるだけでレイアウトを構成することができます。ブロックには5種類の幅が用意されており、各々の幅を組み合わせることにより、2段組み、3段組みの文書領域を構成できます。なお、これらのブロックの実態はテーブルで、各々のセルに適切な背景画像を指定することによって構成されています。下図のような状態で[F12]キーを押し、通常の表示状態をブラウザで確認してください。

 

Blocks.htm の個々のブロック・テンプレート　Blocks.htm の段組みに構成されたブロック・テンプレート

 

"Blocks.htm" の前半(上図左側)に5種類のブロックが単体で置いてあるのは、それぞれが個々のテーブルです。そして赤色の水平線に続いて、ブロックを横に2列、3列と並べてあるのは(上図右側)、既に段組み用のテーブルに収納された状態です。それぞれを一塊として選択すると、下図のように表示されます。

 

単体のブロックを一塊として選択した状態　2つのブロックが収容されている段組み用のテーブル全体を選択した状態

 

ブロック単体(上図左側)を選択するには、見出し行のセル中央で右クリックし、選択(C)、テーブル(T)の順にクリックしてください。複数のブロックを収容した段組み用のテーブル(上図右側)全体をまとめて選択するには、若干のコツがあり、テーブル中央の12ピクセル幅の狭いセルの中で右クリックし、選択(C)、テーブル(T)の順にクリックしてください。又は、テーブル内部のどこかにカーソルを置き、[Esc]キーを何度か押して選択することもできます。

 

操作上で最も注意して欲しいのは、テーブルの枠が無色透明で太さが(0)のため、テーブルが幾重にも重なっているとそれらを直ぐに一目で識別できないことです。例えば、段組み用テーブルの中のブロックの下にさらにブロックを置きたい場合は、予めブロックの下に空白行を挿入すると便利ですから、カーソルの現在位置をよく把握しながら順に右に移動してみてください。ブロックの右端で縦に長いカーソルが点滅したら、そこで[Enter]キーを押すと、直下に空白の行が現れます。
 

ブロック内への記述

ブロックの配置が決まり、内容を書き込む準備が整いました。

例えば左図のようにレイアウトが決まったら、早速ブロックの中に文章や画像を書いてみてください。ブロックは縦方向に自然と伸びるので、折り返しの文字数を気にする必要はありません。なお、左図とこの文章のように画像と文章を横に並べて配置したい場合は、主に以下のような方法があります。 

1. 適切なテーブルを用意して収納する方法

2. 画像のプロパティを利用して回り込みを指定する方法

ここでは回り込みを利用しています。以上ここまでの大まかな説明を参考に、体験用テンプレートの実用性にご理解をいただけましたら、今度は好みの配色をお探しください。

 

"Template Selector (Vista調) Web シミュレーション" へ!!

 

SharePoint Designer の代わりに、「無料で使える開発ツール」でご紹介している Visual Web Developer 2008 Express Edition をご利用の場合は、以下の動画解説をご利用ください。

 

動画-1 , 動画-2 , 動画-3 , 動画-4 , 動画-5 , 動画-6 , 動画-7