ウェブサイトを作成すると言っても、その方法は何通りかあります。ここでは、HTMLとCSSを使用した静的なサイトを作成する手順について述べたいと思います。
記述はどうあれ、ブラウザでの見え方が思う通りになれば良いので、個人個人で記述の仕方などは若干違うと思います。
ここでは、データベースなどを活用し、同じ質のサイトを、早く多く作成することに主眼を置いて説明します。
また、ホームページとランディングページでは作りが違うので、今回はホームページを作成する手順です。ワードプレスを利用する方法もありますが、そちらは別の機会に説明します。
骨組みを作る
まず最初にやることは、骨組みを作ることです。
骨組みとは、例えば、ここにこのぐらいの幅でヘッダを置くとか、タイトルを表示させるとか、グローバルナビゲーションはどうするかとか、パンくずリストは表示させるかとか、サイドカラムは右か左か両方かなしかとか、メインカラムに記述することとか、フッタやフッタ上のデザインとか、ウィジェットに広告を置くかとかについて、トップページ、カテゴリページ、固定記事、投稿記事などそれぞれについてデザインを決めるということです。
固定記事や投稿記事のページはメインカラムが文章主体となり、トップページやカテゴリページは記事にリンクさせるボックスや画像が主体になるのではないでしょうか。作り方にもよりますが、リンクボックスの並べ方なども骨組みを考える一要素になるかと思います。
オブジェクトのスタイルを作る
オブジェクトと書きましたが、メニュー、トップイメージ、メインイメージ、バナー、テーブル（表）、リスト、ロゴ、タイトル文字、コピーライト、記事リンクなどのデザインを総称して、オブジェクトと表現させていただきました。あまり使わない表現だったかも知れません。
オブジェクトのデザインが決まったら、それに使用するCSS文書を、1デザイン1行（クラス名で保存）でデータベースに保存し、コピペで使用できるようにします。
その後、HTML文書にそれぞれのオブジェクトを、骨組みした好きな場所に埋め込みます。
作成したページをデータベースにする
オブジェクトを埋め込んでページが完成したら、ページ情報をデータベースに保存します。
理由ですが、ページのタイトル・パーマリンク・アイキャッチ画像URLの情報だけでも保存されていれば、Excelで記事リンクのHTML文書を生成できるからです。
生成した記事リンクは、トップページ、カテゴリページ、前の記事にも自由に貼り付けてリンクさせることができます。複数のサイトをもっていれば、他のサイトからでも、コピペだけで記事にリンクさせることができます。
まとめ
骨組み（土台作り） ⇒ オブジェクト埋め込み ⇒ データベース作成
これが手順になりますが、記載だけではイメージが湧かないと思います。
こちらでは、動画でウェブサイト作成の様子を実際に観ることができます。
無料講座となりますので、是非登録してみてください。
注）このリンクもデータベースからコピペしただけのものです。
コメント