無料テンプレートでホームページ作成ウェブ講座 | 2008年03月

ウェブデザイナー的テンプレート
2008年03月

ホームページ作成の基本的な流れ

【目的】作成する内容を考える

まず、初めにホームページの内容を考えます。
企業ホームページの場合でも目的によって、
掲載する内容やデザインが違ってくると思います。
「会社の紹介」「自社製品の販売」「新規顧客の獲得「資料請求してもらう」などなど、
1つの企業でもいくつか目的があると思いますが、それをまず明確にしましょう。
(経験上、目的が明確でないと、ホームページを何度も作り直すことなると思います)

【サーバー・ドメイン】ホームページを置く所を用意する

ホームページを置く所を準備します。
「ホームページを置く所」と言うのは、サーバーのことです。
サーバーとは、データを格納しておけるところで、
そこに、ホームページデータ(htmlファイル)を入れる(アップする)ことで、 ネット上でホームページを見ることが出来ます。

また、そのサーバーがどこにあるのかを示すのがドメインというものです。
皆さんがよく使う http://www.aaa.com って感じのやつです。
このドメインをは、サーバーの住所を表していて、
ネット上でURLを入力するだけで、そのサーバーのデータを表示してくれます。

ですので、『ドメインとサーバーを用意しないといけない』ということですね!!

【画面遷移図】全体の構成を考える

次に、全体の構成を考えます。
ホームページと言うのは、リンクによって、ページの移動を行います。
そのリンクのリンク先を1つ1つ指定しないといけません!!

だから、ある程度、全体の構成を考えておくと、
リンク先の指定やリンク先のページの作成が容易になります。

例: 全体の構成
こんな感じのものがあると、
トップページからのリンク先の数やどのようなページをどんな順番で表示するかが、
分かりやすくなります。

【管理】自分のパソコン内に専用フォルダを作る

ホームページを作成するときは、まず自分のパソコンでhtmlファイルを作成します。
そして、その作成したhtmlファイルをサーバーにアップするということになります。
だから、自分のパソコンのhtmlファイルがマスターデータとなりますので、
しっかりと管理して下さい。

例:
新規フォルダ   リネーム

【テンプレート】当サイトからテンプレートをダウンロード

当サイトからお好みのテンプレートをダウンロードします。
そして、用意した専用フォルダに格納します。
・ダウンロードしたテンプレートがデザインのベースとなります
・ダウンロードしたファイルは、圧縮されていますので、解凍ソフトなどで解凍して下さい

【素材】素材(文章、写真、ロゴなど)を集める

ホームページとは、文字(テキスト)と画像の集まりです。
ここで言う画像とは、写真だけでなく、ロゴ画像やイラストも含みます。

そのホームページに掲載する画像を用意しておきます。

【html作成】ページを作成(デザイン)する

ここでは、詳細な説明を省きます(後で説明します)が、
集めてきた素材を活用しながら、htmlファイルをタグによって作成します。

【アップ】サーバーにアップする

サーバーを準備したときに、FTPと言う情報を与えられます。
そのFTPにより、自分のパソコンからサーバーにホームページデータをアップできます。
FTPを使ってファイルをアップ

【閲覧】ネット上で確認する

アップしたデータが正しく表示されているか実際にネット上でURLを入力して確認します。

ファイル名の付け方の規則

ファイルの名前には規則があります。

・日本語が使えない
・全角は使えない
・空白を空けない

という感じです。

ですので、ファイル名を付ける時には、半角英数で記述しましょう。

また、一般的に、最初のページのファイル名は、indexとなります。

ですので、index.htmlとなります。

これは決まりごととして覚えて下さい。
理由はちゃんとありますが、ここでは省かせていただきます ^^;

テンプレート[tmp001-1]

テンプレート[tmp001-1] SEO対策された無料テンプレートです。デザインのベースは、CSS(スタイルシート)によって作成されています。
ダウンロードした時点で、利用規約に同意したものとみなします。
サンプル ダウンロード



レイアウトの説明

htmlソースの領域を赤枠で囲ってあります。
ホームページ作成時に参考にして下さい^0^/

htmlソース
これ以降の部分は、長いので省略させて頂きます^^;

自力でホームページ運営する為にも、
どこに何が書いてあるか把握してみよう!!

テンプレート[tmp001-2]

テンプレート001-2

tmp001-1のグレーバージョン!!

htmlソースの領域を赤枠で囲ってあります。
ホームページ作成時に参考にして下さい^0^/

レイアウト説明

htmlソース

自力でホームページ運営する為にも、
どこに何が書いてあるか把握してみよう!!

ホームページの基礎知識と作成前の準備

【知識】ホームページとはhtmlファイル
【知識】htmlファイルとはタグで構成されている
【知識】ファイル名の付け方の規則
【知識】htmlをサーバーにアップするとネット上に公開
【流れ】ホームページ作成の基本的な流れ
【準備】ホームページに掲載する画像・素材収集
【準備】パソコン設定は拡張子を表示

トップページの基本を作成

「準備」内容を再度確認

実際に作業に取り掛かる前に、再度、「準備」内容を確認しておこう!!
ホームページ作成の準備


画面遷移図を作成

画面遷移図とは、「画面を遷移していく図」のことです。
(って、そのままですが。。。)

これは、ノートと鉛筆で、紙の上に書いても構いません。
トップページがあって、メニューなどのリンクをクリックすると、
次に、どんなページに移動するかを明確にします。


テンプレートをダウンロードしよう

ホームページは、全く何も無いゼロから自分で作成しても構いません。
でも、少しでも作成されたものがあれば、とても簡単に作業を開始できます。
また、他人の作成したソースと見て理解することが、
htmlを理解するのに最も近道だと思います。

ということで、当サイトでご用意したテンプレートからお好きなものをダウンロードして下さい。
テンプレート一覧


ダウンロードしたファイルを解凍

ダウンロードしたファイルは、圧縮されています。

圧縮とは、データが容量が大きい場合、ファイルの数が多い場合などに、
それらを「ギュッっと圧縮してデータのサイズ(容量)を小さくすること」です。
これを解凍すると圧縮する前の状態に戻ります。
(解凍は、解凍ソフトで簡単にできます!!)

圧縮解凍ソフトは、ネット上にフリー(無料)でありますので、それを活用して下さい。


解凍したらファイルを確認

解凍したら、どんなファイルがあるか確認します。
基本的には、
【HTMLファイル】index.html
【CSSファイル】style.css
【画像ファイル】●●●.gif、●●●.jpg
などがあります。


後は、コンテンツを入れると、トップページが完成!!

NEXT トップページを完成させる

ホームページの運営とコツ

定期的に更新を行おう!!
ソフトを活用し、作業の効率良くする!!
アクセスアップを目指そう!!
相互リンクでアクセスアップ!!
アクセス解析を導入し、傾向をつかもう!!

ホームページで成功する秘訣

・SEO
・LPO
・オーバーチュア
・相互リンク
・ブログを書く
・タイトルの見直し
・キーワードアドバイスツールを有効活用

[ヤフーの検索エンジン]YST update 実施しました

2008/03/05にYahooの検索エンジンがアップデートしました。
⇒ http://searchblog.yahoo.co.jp/2008/03/yst_update_9.html

検索エンジンのアップデートとは、
色んなソフト(ワードやエクセル)なども機能がアップしていっているように、
検索エンジンもバージョンアップして、機能追加や情報の更新が行われていることです。

ですので、アップデートしたことで今後、検索結果の順位に変動があります。

変動は、その時々の、アップデートした内容によりますが、
多かれ少なかれ多少は、影響があると思います。

ちなみに・・・
昨年の2007年10月くらいアップデートの時には、
かなりの順位変動があったのは、記憶に新しいと思います。
当サイトの管理人の運営サイトも影響がありました^^;

このサイトは、
現在、『無料テンプレート ホームページ』というキーワードで、
YST結果、約17,300,000件中【第7位】です。

第1位になるまでは、頑張らなくては・・・^^;

無料テンプレートとは

テンプレートとは、英語で 『template』 と記述します。

雛形と言えば分かりやすいでしょうか!?

「ある程度の形が作成されていて、 それを自分用に作りかえれば、すぐに作品が完成する」
というイメージのものです。


当サイトでは、そのホームページの雛形を無料で用意しています。

テンプレートを利用することによって、
ゼロからホームページを作成する手間を省くだけでなく、
プロが作成したテンプレートですので、
SEOもばっちり対策してあるので、
検索エンジンからの訪問者を少しでも獲得しやすくなっています。


ホームページのタグやスタイルシート(CSS)の書き方を覚えることは、
他人のソースを見て理解することが一番の近道です!!

ですので、当サイトのテンプレートを利用して、
タグの習得を行うことができると思います。

ホームページ制作会社にお願いすることは、とても良い方法だと思います。
その前に、制作会社の方としっかり会話できるようになる為にも、
一度、テンプレートを触ってみてはどうでしょうか!?
ホームページの雰囲気がつかめると思います。

また、「ホームページを自力で運営して行きたい」という人は、是非、お問い合わせ下さい!!

当サイト管理人は、そのような方に、少しでもお役に立てればと思っています。

・自分の会社のホームページ立ち上げたい方
・個人的なホームページを立ち上げたい方
・商用サイトを立ち上げたい方
などなど

まずは、ご相談のみでも構いませんよ!!
そのような積極的な方のご相談は、大歓迎です!!

なお、管理人も人の子ですので、
何でもかんでも知っている訳ではありませんので、
ご質問にお答えできない場合がありますが、できる限りお答えしたいと思います。

Yahoo!ブックマークに登録・追加

自分のホームページをYahoo!ブックマークに登録してもらう為に、
自分のホームページにブックマーク登録のボタンを設置しましょう。

※ ブックマークとは、お気に入りをネット上で共有するものです。

今までは、下のように自分のPC内でお気に入りを登録していたと思います。
お気に入り

これをネット上で共有して、
お気に入りサイトを皆にも有効活用してもらおうと言うものです。
周りのみんながどんなサイトをブックマークしているのか気になりますよね!!

そのお気に入りに登録(ブックマーク)する作業を簡単にしてくれるのが、
ブックマークの登録ボタンです。

是非、自分のホームページもせっかくだから、
ブックマークに登録してもらいましょう。。。

まず、http://bookmarks.yahoo.co.jp/settings/ にアクセスします。
ブックマークの設定URL

下記を選択。
ブログパーツ

下記のHTMLソースを選択してコピーする。
「Yahoo!ブックマークに登録」ボタン・アイコン

それを自分のホームページのソースに貼り付ければOKです。

SSL(エスエスエル)とは

Secure Socket Layer の略で、簡単に言うと、通信を暗号化して、
通信を安全に行うことです。

Yahoo!家電の説明を引用。
Netscape Communications社が開発した、インターネット上で情報を暗号化して送受信するプロトコル。現在インターネットで広く使われているWWWやFTPなどのデータを暗号化し、プライバシーに関わる情報やクレジットカード番号、企業秘密などを安全に送受信することができる。SSLは公開鍵暗号や秘密鍵暗号、デジタル証明書、ハッシュ関数などのセキュリティ技術を組み合わせ、データの盗聴や改ざん、なりすましを防ぐことができる。OSI参照モデルではセッション層(第5層)とトランスポート層(第4層)の境界で動作し、HTTPやFTPなどの上位のプロトコルを利用するアプリケーションソフトからは、特に意識することなく透過的に利用することができる。SSL 3.0をもとに若干の改良が加えられたTLS 1.0がRFC 2246としてIETFで標準化されている。

ショッピングサイトや会員サイトなどは、
どうしても個人情報を扱うサイトとなるので、セキュリティは、必須です。

確認する方法としては、
http:// から https:// と『s』が入っていることと、

ブラウザに鍵マークが付くことです。
鍵マーク

ひらがなに変換するウェブブラウザ

http://headlines.yahoo.co.jp/hl?a=20080310-00000003-imp-sci

富士通ラーニングメディアから、
ひらがなに変換するブラウザが登場しました!!

小学生向けに漢字をひらがなに変換するブラウザみたいです。。。

自分が小学生の時には、ネットもなかったのに・・・

http://headlines.yahoo.co.jp/hl?a=20080310-00000003-imp-sci

wordpressテンプレート[wp001-1]

wordpressテンプレート[wp001-1]

wordpressのテンプレートです。
デザイン的には、個人ブログ向けのテンプレートです。

ダウンロード
ダウンロードはこちらから。。。

wordpressでのテーマカスタマイズ(トップと記事を分ける)

wordpressでのテーマカスタマイズ。

トップページと記事のページで表示を分けたい時。。。

まずは、トップページのみ表示させる場合 <?php if(is_home()) { ?> 表示させたい内容 <?php } ?>
次は、記事ページのみ表示させる場合 <?php if(is_single()) { ?> 表示させたい内容 <?php } ?>

トップページを完成させる

HTMLを理解しながら、コンテンツ(タグも含む)を入れて行く

テンプレートには、コンテンツがサンプルとして、少しあるだけです。
これを削除して、自分のホームページコンテンツを入れて下さい。

コンテンツを入れていく時には、
ブラウザ(実際にネットで表示される画面)とテキストエディタ(htmlソースが表示される画面)の両方を開いて、
テキストエディタに少しずつコンテンツを記述して、
ブラウザで確認するという作業を繰り返します。

【テキストエディタ】ソース変更
テキストエディタでhtmlソース記述1
【ブラウザ】更新ボタン後、確認
ブラウザで更新ボタンを押して、表示されているか確認2
【テキストエディタ】ソース変更
テキストエディタでhtmlソース記述3
【ブラウザ】更新ボタン後、確認
ブラウザで更新ボタンを押して、表示されているか確認4
①テキストエディタでhtmlソース記述
②テキストエディタを保存
③ブラウザで更新ボタンを押して、
  表示されているか確認
 ↓
④テキストエディタでhtmlソース記述
⑤テキストエディタを保存
⑥ブラウザで更新ボタンを押して、
  表示されているか確認
 ↓
以下、これを繰り返します。


すると、トップページが完成します。

トップページ以外を作成

まず、ファイルを作成

トップページが完成したら、
次に、トップページ以外(クリック先)のページを作成します。

初めに、トップページのファイルをコピーして、
それをテンプレートとして、作成して行くので、
トップページのファイルをコピーします。

トップページを選択してコピー
トップページを選択してコピー
貼り付け
貼り付け
ファイル名変更
ファイル名変更

次に、名前の変更したファイルのソースを修正します。


トップページ同様ファイルを作成する

ファイル名を変更したら、
次に、トップページと同様に、テキストエディタとブラウザを開いて、ソースを修正します。
(もちろん、トップページファイルをコピーしたので、最初のソースは、トップページと同じです)
トップページを完成させる

« 2008年02月 | home | 2008年04月 »