ホームページの立上げ方法 - マンション管理士 内藤正裕のページ

2005 年 7 月 23 日
神奈川県マンション管理士会 講習会資料
ホームページの立上げ方法
内 藤 正 裕
※
学習の目標
この講習会では、受講者のみなさんが下記のことができるようになることを目標としています。
(1) ブログを利用したホームページを作れるようになること
(2) HTML/CSS の基礎を知ること
(3) ブログ作成ツール「Movable Type」について知ること
(4) 独自ドメインの取得方法を知ること
(5) SEO(検索エンジン最適化)対策について知ること
(6) ホームページを開設するときのポイントを知ること
多少難しい内容もあえて含めていますので、最初からすべてを理解する必要はありません。とりあえず「こう
いうことが出来るのか」ということを知っていただくだけでも十分です。「自分ではお手上げ」という方のため
の対処方法も最後にご紹介しますので、安心してご参加ください。
すべてのファイルをサーバーにアップロードする作業の繰り
返しで、非常に手間と時間がかかる。ホームページ全体のレ
イアウトや構成をリニューアルしようとすると、それこそ大
変な作業で、今まで作った全ページに手を加えていかなけれ
ばならない。
結局のところ、いったんホームページ・ビルダーで作られ
たホームページは、手間がかかるために更新も滞りがちであ
り、時代遅れとなったデザインや構成を大きく変えることも
できず、いったん入力したコンテンツを他のホームページに
移し変えることもできない、
という様々な問題を抱えている。
I. はじめに
1. なぜ「ホームページ・ビルダー」ではダメなのか?
最近まで、個人がホームページを立ち上げるときには、
「IBM ホームページ・ビルダー」等のホームページ作成ソフ
トを利用することが一般的だった。
実際、筆者のホームページも、当初はホームページ・ビル
ダーによって作られたものであったし、ごく最近まではホー
ムページ・ビルダーによって更新を行っていた。また、神奈
川県マンション管理士会のホームページ
(http://www.kanagawa-mankan.org/)もホームページ・ビル
ダーによって作られたものであり、現在でも更新作業はホー
ムページ・ビルダーによって行われている。
2. なぜブログなのか?
一方、最近流行しているのが「ブログ」である。ブログと
は Web log(ウェブログ)の略で、日記形式のホームページの
総称であるが、
HTML やプログラムに関する知識がまったく
無くても、インターネットの電子掲示板に投稿する感覚で手
軽に記事の追加や更新が出来ることが特長である。以前はコ
ンピュータ業界のエンジニアなどがブログで情報交換や意見
交換を行っていたが、
2000 年頃から米国で一般ユーザーの間
でもブログの利用が広まり始め、それを受けた形でニフティ
やヤフー!などの大手プロバイダーがこぞってブログ開設サ
ービスを提供し始めたことから、国内でも利用者が爆発的に
増えている。
総務省の調べによると、2005 年 3 月末時点の国内ブログ
利用者数は延べ約 335 万人、月に 1 度はブログを更新してい
るアクティブブログ利用者数は約 95 万人、ブログ閲覧者数
は約 1,651 万人という状況で、2007 年 3 月末にはそれぞれ
約 782 万人、約 296 万人、約 3,455 万人に達すると予測され
ている。
実際、マンション管理組合や管理組合役員が開設している
ブログも増えつつあり、例えば「マンション管理組合日記」
(http://xss.jp/mkan/)などがある。
たしかにホームページ・ビルダーを購入して、マニュアル
を読みながら一通りの作業を行っていけば、比較的容易にホ
ームページの開設はできる。しかし、問題はその後の更新作
業である。その都度ホームページ・ビルダーを起動して、新
たなファイルを追加したり、
変更部分を更新したりした後に、
※神奈川県マンション管理士会理事
1
ものである。
芸能人やスポーツ選手などが開設しているブログも人気を
博している。
筆者のホームページ(http://www.m-naito.com/) も最近
Movable Type を利用してリニューアルされた。
しかし、ブログは基本的に日記形式なので、そもそも商用
目的にはあまり向かないものだった。ところが、Movable
Type というデザインの柔軟性の高いブログ作成ツールが開
発され、一見ブログには見えないホームページを容易に構築
することができるようになったことから、これを利用したビ
ジネスサイトも増えつつある。
実際、最近開設された日経 BP 社の「マンション新時代」
(http://mansion.nikkeibp.co.jp/)のサイトは、Movable Type
によって作られている。
本稿では、
上で紹介したように、
ブログを利用しながらも、
一見しただけではブログのように見えないホームページを構
築するためのノウハウを紹介していく。
マンション管理士では千葉県マンション管理士会の重松秀
士氏のホームページ「マンションサポート・ドットコム」
(http://www.mansion-support.com/)がMovable Type による
2
「livedoor ID をいますぐ登録!」をクリックすると、登
録情報を入力する画面になる。
II. ブログを利用したホームページの開設
1. 完成見本
実際に livedoor の無料ブログサービスを利用して、ホーム
ページの立上げを行った完成見本が下のものである。
希望の livedoor ID や、個人情報等の必要事項を記入し、
利用規約に目を通した後に、
「利用規約に同意して入会する」
ボタンを押すと、その場で ID が発行される。同時にその内
容は上で登録したメールアドレスに連絡される。
このようなホームページを構築する方法を以下で説明して
いく。
2. ホームページは 5 分で簡単に作れる
(1) ID を取得
まず livedoor ID を取得する必要がある。ライブドアのホ
ームページ(http://www.livedoor.com/)を開く。
(2) ブログの作成
ID が取得できたら、
「次へすすむ」をクリックすると、引
き続きブログの作成が行われる。
画面右の中ほどにある「ブログを作成」をクリックすると
下の画面になる。
タイトルや説明文などを記入して、
「作成する」ボタンを押
すと、内容の確認画面が表示される。
3
の内容で投稿する」をクリックすれば、最初の記事が投稿さ
れる。
「ブログの管理ページへ進む」をクリックすると、管理ペ
ージが表示される。
実際のホームページを確認すると次のような感じである。
これでブログのホームページが作成された。今後ブログの
投稿や設定変更などは、この画面から行う。とりあえず、ブ
ログタイトルの「マンション管理士・行政書士川原一守事務
所(見本)」をクリックして、ホームページを表示させてみよ
う。
6. カテゴリーを作ってみよう
同じような調子で、いくつか投稿を続けよう。記事をカテ
ゴリー分けするために、記事の入力画面で「新規カテゴリの
追加」をクリックして、カテゴリを作成しながら、投稿をし
てみる。
いくつか記事を投稿した後に、実際のホームページを確認
すると、下のような感じになる。ブログでは基本的に、最新
の記事が一番上に表示される。
最初はエントリーが何もない状態なので、タイトルと説明
文があるだけである。しかし、これでも世界中のどこからで
もアクセスできる立派なホームページである。
3. あとはコンテンツを入れていくだけ
とりあえず投稿してみよう。
「ブログを投稿する」をクリッ
クすると、入力画面が現れるので、タイトルと本文を記入し
て、アップする画像にあらかじめ用意した写真を選んで「こ
4. ブログっぽさをなくすために
ブログを一般のホームページとして使う場合、トップペー
ジに表示される情報を固定したい場合がある。その場合、
「投
4
下の例では、
「シンプル」の中の「blueframe」を選んだ。
これで、だいぶブログらしさが消えて、普通のホームページ
らしくなってきた。
稿したブログを編集する」でトップページに表示したい記事
を選び、
「さらに詳しく設定する」をクリックする。
投稿日時を例えば2005年12月31日23時59分のように、
未来の日時に変更しておけばよい。これで、その日が過ぎる
までは、一番上に表示される記事は固定される。
次に「ブログの設定/管理」でブログの設定を変えてみよう。
デフォルトの設定から変更する部分は以下の通りである。
(1) トップページの表示形式を 1 件に変更。
(2) アーカイブの表示件数は「全て表示」に変更。
(3) コメント設定とトラックバック設定はいずれも「受け
入れない」に変更。
(4) 広告の表示設定を「表示しない」に変更。
5. よりクールな見た目にするために
余計な情報を消してみよう。まず「プラグインの設定」で、
「ブログ検索」と「最新記事」の 2 つだけを残して、後はす
べて削除する。そして「プラグインの追加」で、
「カテゴリ別
アーカイブ」を追加する。
もう一度「プラグインの設定」を開き、プラグインの順番
とタイトルを変更する。このあたりプラグインの追加や設定
は、好みに合せて適当に変えればよい。
出来上がったホームページは次の通り。このままでも十分
ホームページとして通用する出来だ。
さらに
「デザインの設定」
で好みのデザインのものを選ぶ。
5
6. より細かい改良を加えて
上で出来たホームページでは、字の大きさが小さ過ぎると
感じる人が多いだろう。また、個別の記事やカテゴリー別の
アーカイブを開いたときに、プラグインが表示されないのも
不満が残る。
そこで、
「ブログの設定/管理」の「デザインの設定」で、
「カスタマイズ」をクリックして、
「スタイルシート(CSS)」
や「メインページ」等の変更にチャレンジすることにする。
の<$ArticleDate$>を削除するか、または<!-- と --> で挟ん
で、次のようにする。
<IfDateChanged><h2
class="date"><!--<$ArticleDate$>--></h2></IfDateChanged>
また、同じ「トップページ」の HTML の中から、一番下
のほうにある次の部分
<div id="links">
<$PluginList$>
のすぐ下に <!-- を加えて、
<td
width="99%"><a
href="<$AddBlogReader$>"
target="_blank"> こ の Blog を <br> リ ー ダ ー に 追 加
</a></td>
</tr>
</table>
のすぐ下に --> を加える。
さらに、さきほどと同じ
<div id="links">
<$PluginList$>
の最後に</div>を追加したものを、個別記事ページの次の行
<div id="footer"></div>
のすぐ前にペーストして、下のようにする。
<div id="links">
<$PluginList$>
</div>
<div id="footer"></div>
カテゴリアーカイブについても、上と同じことを行う。
以上の変更が終わったら、さきほどと同様に「ブログに設定
を反映(再構築)」をクリックし、
「全てのページ」を選択して、
ブログを再構築する。
これでほとんど見た目は普通のホームページらしくなった。
まず、スタイルシートの中で「font-size:」という文字列を
探していく。そして、以下のように 1 サイズ大きいものにす
べて変更する。とりあえずスタイルシートの意味は分からな
くてもよい。
xx-small Æ x-small
x-small Æ small
small Æ medium
medium Æ large
large Æ x-large
x-large Æ xx-large
変更したら、上の内容を保存した後に、
「ブログに設定を反
映(再構築)」をクリック。
「全てのページ」を選択して、ブロ
グを再構築する。
次に、トップページの投稿日や余計な情報を消すために、
「デザインの設定」で「カスタマイズ」を選び、
「トップペー
ジ」をクリックする。
なお、上のように CSS や HTML を変更した場合、
「デザ
インの設定」で別のデザインに切り替えると、その変更内容
が失われてしまうので注意が必要である。必要ならば変更し
た内容をテキストファイル等でバックアップしておくこと。
同様に、誤った変更で表示がおかしくなった場合には、もう
一度同じデザインを選びなおせば、初期の内容にリセットさ
れることも覚えておこう。
7. あとはひたすらコンテンツを増やしていくだけ
ホームページのデザインが決まったら、あとはコンテンツ
を増やしていくだけである。カテゴリーを増やしながら、記
事の投稿を続けていこう。
トップページの HTML 文書が表示されるので、この中の
<!-- Loop Start -->の少し下にある、次の行
<IfDateChanged><h2
class="date"><$ArticleDate$></h2></IfDateChanged>
6
なお、画像の配置を左から右に変えたい場合は、投稿画像
の <img> タ グ に 含 ま れ る align="left" の 部 分 を
align="right" に書き換えればよい。
し、かつ弊社及び弊社の指定する者に対し著作者人格権を
行使しないものとします。
(3) 広告が表示される場合がある
最近のインターネット上の広告は、コンテンツの内容に合
せた広告が表示される仕組みになっている。マンション管理
士事務所のホームページの場合、マンション管理業者の広告
などが表示されてしまうケースも考えられるため、注意が必
要である。広告を消す設定ができる場合は、消しておくのが
よい。
(4) アップロードできるファイルに制約がある
livedoorブログは2.5GBものディスクスペースが与えられ
るが、アップロードできるファイルの形式やサイズに制限が
ある。具体的には画像ファイルしかアップロードできない。
したがって、PDF ファイルや Excel ファイルなどはアップロ
ード不可であり、また、サイズも 500kB が上限となってい
る。月額 262 円の livedoor ブログ PRO サービスを利用すれ
ば、上の制限は解除される(ただしファイルのサイズは
100MB が上限となる)。
一通りの投稿が終わったら完成!早速公開しよう。
8. 投稿者の設定をしよう
livedoor ブログでは、複数の投稿者を設定できる。例えば
事務所の職員などに日々の更新作業を依頼する場合、その職
員を投稿者としてメンバー登録しておけばよい。
そのためには、
まずその投稿者もlivedoor ID を取得して、
ブログを開設しておく必要がある。その後、
「ブログの設定/
管理」の「メンバーの追加/管理」の画面で、
「新しくメンバ
ーを追加する」をクリックして、投稿者として設定したいメ
ンバーの livedoor ID を追加すればよい。
(5) 独自ドメインの設定はできない
いかにホームページのデザインからブログ色を消しても、
アドレスには「blog」という文字が残る。また、サービスプ
ロバイダーの社名もアドレスに残るため、本格的なビジネス
サイトとしての利用や、名刺にアドレスを印刷することに抵
抗を感じる人もいるだろう。
しかし無料ブログサービスでは独自ドメインを設定するこ
とはできない(livedoor ブログ PRO サービスでは可能)。
9. 無料ブログサービスの利用で注意すべきこと
無料であるがゆえに、いくつかの制約がある。それらを十
分に理解した上で利用してほしい。
(1) 商用利用が禁止されている場合がある
Yahoo!ブログでは、その「ガイドライン」により、
「商業
目的や広告目的で利用すること」が禁止されている。
http://blogs.yahoo.co.jp/FRONT/guideline.html
一方、livedoor ブログでは、その利用規約により「弊社が、
過度若しくは不適切と判断する商用目的の宣伝・広告行為」
が禁止されている。
http://cms.blog.livedoor.com/rule.html?blog_id=1049482
マンション管理士事務所のホームページとしては、前者の
利用は不可だが、後者は利用可と考えてよいだろう。
(2) コンテンツの無償利用を承諾させられる場合がある
livedoor ブログでは、利用規約に以下の規定がある。ブログ
に投稿した記事は、ライブドア社に無償利用されることにな
るので注意が必要である。
第8条 (ウェブログの公開について)
利用者が著作したウェブログとそれに付随するコメント及
びトラックバックは当該ウェブログを著作した利用者に著
作権が発生するものとします。但し、宣伝、利用促進、出
版等を目的としウェブログサービスの著作物を使用する場
合、利用者は弊社に対し、当該著作物を著作権法の規定に
基づき無償利用することを期間無制限で非独占的に許諾
7
ただし、頭の中で結果をイメージしながらテキストで表を
作るのは結構面倒な作業である。実際の作業ではホームペー
ジ・ビルダーなどのソフトを使って表を作成した後に、その
ソースをブログに貼り付けるのが便利である。
<!--コメント文--> コメント
<div> ブロック要素
HTML 文書をいくつかのブロックに分割し、
そのブロック
内に適用する書式をスタイルシートで定めるために使う。一
般に id または class 属性と一緒に使われる。
III. HTML と CSS の基礎を知ろう
1. HTML の基礎を覚えよう
HTML は Hyper Text Markup Language の略語。ホーム
ページ用の記述言語。実態は HTML タグの付いたテキスト
ファイルである。ブラウザでホームページのソースを表示さ
せると見ることができる。なお、HTML と CSS についての
詳細は巻末の参考文献を参照してほしい。
(1) ホームページの基本的な構造
どのホームページも以下の構造を持っている。<html>は、
このファイルが HTML 文書であることを表す。そして、
<head>と</head>の間はタイトルなどを記述する部分で、
<body>∼</body>の間の部分が本文である。ただし、<html>
や<body>は省略しても、大半のブラウザは正しく表示してく
れる。
2. スタイルシート(CSS)の基礎を覚えよう
Cascading Style Sheet の略語。ホームページの「見栄え」
を定義するための技術。昔は HTML 文書の中に文字の大き
さや色、レイアウトなどの情報を記述するのが一般的だった
が、今はスタイルシートという別のファイルにそれらを記述
する方法に変わりつつある。
具体的には HTML のヘッダー部分に次の行を追加して、
スタイルシートを記述したファイルを指定する。
<link rel="stylesheet" href="./スタイルシートのファイル
名.css" type="text/css" />
このスタイルシートを使った書式の指定方法には、大きく
分けて 3 つの方法がある。
<html>
<head>
ヘッダー部分
</head>
<body>
(1) タグ要素を指定した使い方
例: HTML タグで指定された部分全体にスタイルを指定して
いるケース
スタイルシート
body{
margin:0;
padding:0;
color:#444;
background:url(/images/side.gif);
text-align:center;
}
本文
</body>
</html>
(2) 覚えておくと便利なタグ
以下のタグの中で、<title>だけがヘッダー部分に使うタグ
で、残りはすべて本文の部分で使うタグである。<title>以外
はブログで投稿する際にも使うことができるので、覚えてお
くと便利である。
h1,h2,h3{margin:0;padding:0;}
<title> タイトル(Title)
<h1>, <h2>, …, <h6> 見出し(Heading)
<p> 段落(Paragraph)
<br>または<br /> 改行(Break)
<b> 太字(Bold)
<strong> 強調(Strong) (IE では太字)
<em> 強調(Emphasis) (IE では斜体)
<u> 下線(Under-line)
<a href="http://www.acme.com/"> アンカー(Anchor)
新しいウィンドウを開きたい場合は、
「target」オプション
を使う。
<a href=”http://www.acme.com/” target=”_blank”>
メールアドレスの場合は「mailto:」を加える
<a href="mailto:foo@acme.com"> ()
<blockquote> 引用(Blockquote) (IE では前後が改行、左右に
隙間)
<table></table> 表(Table)
表作成のタグの使い方をマスターするのは難しいが、下の
URL の例で覚えるとよい。
http://www.tohoho-web.com/html/table.htm
(2) クラスを指定した使い方
例: <div>で指定されたブロック領域をクラスでスタイルを
指定しているケース
HTML 文書
<div class=”title>
マンション管理でお困りのことは信頼と実績の当事務所
へ!
</div>
<div class=”main”>
マンションライフについて疑問、不安があったら気軽に当
事務所に御相談ください。
</div>
スタイルシート
.title{
font-size:medium;
color:#fff;
font-weight:bold;
padding:5px 10px;
8
background:#3d5286;
IV. Movable Type を利用したホームページ作成
}
1. Movable Type とは
Movable Type はブログを開設するツールだが、デザイン
上の柔軟性が高いので、一見ブログには見えないホームペー
ジを自由に構築することができる。商用目的の場合はソフト
ウェアのライセンス料が発生するものの、無料ブログサービ
スに見られるような制約がないのがメリットである。
.main{
color:#333;
font-size:small;
padding:10px 0px 20px;
}
(3) ID を指定した使い方
例: <div>で指定されたブロック領域を ID でスタイルを指定
しているケース
HTML 文書
<div id="banner">
<h1 class="blogtitle">
マンション管理士・行政書士川原一守事務所(見本)
</h1>
<div class="description">
管理組合のためのマンション管理コンサルタント
</div>
</div>
作成例
プロバイダーが提供するサービスの制約にとらわれない自
由なデザインが可能。
スタイルシート
#banner,#subbanner{
color:#fff;
width:773px;
height:100px;
text-align:left;
margin:0 auto;
font-weight:normal;
background:url(/images/title.gif)
repeat-x;
}
フォームメールやカウンターなどの設置も自由
(4) スタイルシートの属性と値の例
上の例で現れる属性と値について、ごく一部を紹介する。
詳細については、巻末の参考資料で紹介している「とほほの
WWW 入門」を参照してほしい。
font-size: 文字サイズ
xx-large, x-large, large, medium, small, x-small, xx-small
font-weight: 文字の太さ
bold(太字) または normal
color: 文字色
red, green, white, #000000∼ffffff, #000∼#fff
padding: 上 右 下 左
px(ピクセル)
background: 背景色
2. 必要なソフト
Movable Type
(非商用目的の「限定個人ライセンス」は無償、商用目的だと
26,250 円(1 サーバー・5 ユーザー))
FTP クライアント
(例えばフリーウェアの「FFFTP」)
(http://www2.biglobe.ne.jp/~sota/ffftp.html)
UTF-8 コード対応のテキストエディター
(例えばフリーウェアの「TeraPad」)
(http://www5f.biglobe.ne.jp/~t-susumu/)
3. あると便利なソフト
画像加工ソフト (Adobe Photoshop 等)
9
アイコン作成ツール (例えばフリーウェアの「@icon 変
換」)(http://www.towofu.net/soft/)
V. 独自ドメインの取得方法
1. 独自ドメインを取得しよう
独自ドメインの取得作業は概ね以下の手順となる。ここで
は詳しい説明は省略する。詳しくは「参考情報」の説明を見
てほしい。
4. Movable Type を設置しよう
Movable Type の設置作業は概ね以下の手順となる。ここ
では詳しい説明は省略する。詳しくは「参考情報」の説明を
見てほしい。
(1) 空きドメインの検索
(2) ユーザー登録
(3) 料金の振込み
(4) 独自ドメイン取得
(5) レンタルサーバーの利用
(6) DNS 設定
(7) サーバー設定
(1) ソフトウェアのダウンロード
(2) 設定ファイルの変更
(3) サーバーへのアップロード
(4) ファイル権限の設定
(5) サーバー環境のチェック
(6) システムの初期化
(7) Movable Type の起動
(8) 投稿者とパスワードの変更
(9) ウェブログの設定
VI. SEO(検索エンジン最適化) 対策の方法
1. SEO 対策とは
Google や Yahoo!などの検索サイトで、検索結果の上位に
来るようにするためのノウハウ。ただし、これが行き過ぎて
検索エンジンを騙すようなテクニックを用いると、ブラック
リストに載り、検索結果から除外されることもあるので、正
しい知識をつけた上で行ってほしい。
5. Movable Type の管理画面
Movable Type にログインした直後に管理画面は下のよう
なものである。複数のブログを管理している場合は、それら
がすべてこの画面上にリストアップされる。
2. SEO 対策の実際
以下、SEO 対策として有効な主なものを紹介する。
(1) フレームを使わない
フレームを使ったホームページとは、下の例のように上下
または左右に画面が分割されたものである。画面の一部はど
のページでも同じものが使えるという利便性があり、一時期
この技術を使用するサイトが多数あった。
6. Movable Type の新規投稿画面
「エントリーの投稿」
ボタンを押すと、
新規の投稿ができる。
しかし、このようなフレームを使用すると検索エンジンに
的確に情報を収集されないばかりでなく、
「SEO スパム」の
中にこのようなフレームを利用した手法があるため、SEO 対
策としては大変不利になる。また、閲覧者がフレーム内のペ
ージに直接辿り着いてしまう場合もあるため、なるべくフレ
ームは使わないほうがよい。
設定変更などは、左側のメニューから選択して行う。
(2) タイトルを入れる
検索エンジンは<title>タグに記載された情報を重視する。
10
ところが、ホームページ・ビルダーなどで立ち上げたサイト
には、<title>タグに記載のないものが多い。忘れずに記入す
ることが大事である。
(8) そしてひたすらコンテンツの充実に努めること
(9) コンテンツが充実してきたら、Yahoo!に推薦しよう
http://add.yahoo.co.jp/docs/include.html
(3) H1 タグを使う
<h1>タグに記載された情報も検索エンジンには重視され
るが、これもホームページ・ビルダーなどで立ち上げたサイ
トには、使われていないものが多い。
営利目的のサイトの場合、Yahoo! への推薦は 52,500 円以
上の審査料が発生する。また、審査料を支払っても必ず登録
が保証されるわけではない。
3. 自分で立ち上げるのが面倒なら
(1) パソコンに詳しい友人や知人に作ってもらう
(2) 業者に作成を依頼する
(4) ヘッダー部分に、keywords と description を入れる
トップページのヘッダー部分(<head>と</head>の間の部
分)に、例えば下のような記述を追加する。
<meta name="keywords" content="マンション管理士,神
奈川県" />
<meta name="description" content="メールでの無料相談
に応じるマンション管理士。マンション管理に関する情報
満載!管理組合役員さん必見のサイト。" />
特に description に記述した文章は、検索結果の画面でそ
のまま表示されるので、ホームページについての簡潔な紹介
文を記述することが大事である。
専門業者に作成を依頼する場合は、ホームページ開設後の
メインテナンスを容易にするために、必ず Movable Type で
の作成を指示すること。
この場合、
独自ドメインの取得から、
Movable Type のライセンス料、フルカスタマイズのホーム
ページ構築、インストール代行等をすべて含めて 15∼20 万
円程度の費用がかかる。ただし、これはホームページに掲載
するコンテンツをすべて自分で用意できる場合であり、コン
テンツの作成に関して専門家に相談を行えば、さらにコンサ
ル料が加算されることになる。
ただし、業者に立上げを依頼しても、その後の更新作業は
自分の仕事である。それも業者に依頼するのであれば、記事
を追加・修正するたびに、手数料が発生することになる。
(5) キーワードの出現率に注意する
ホームページに記事を掲載するときには、タイトルや本文
のキーワードの出現率を意識するのがよい。あるキーワード
で検索した際に、そのキーワードの出現率の高いホームペー
ジのほうが重視される。
例えば、下の 2 つの例では Yahoo!でも Google でも次のよ
うな言葉に分解されて認識されている。
|マンション|管理|士|内藤|正裕|の|ページ|
|マンション|管理|士|行政|書|士|川原|一守|事務所|
したがって、
「マンション管理士」という言葉で検索した場
合に、前者のホームページは出現率が 3/7=43%と高いが、後
者では 2/9=33%と低く、後者のほうが不利になる。
Yahoo!と Google が文章をどのように分解するかは、下記
の URL で確認することができるので、参考にしてほしい。
http://www.su-jine.com/sujine_seo_words.php
VIII. おわりに
ホームページは自己 PR の場である。単にホームページを
作っただけでは仕事の依頼は来ない。以前はこのような自己
PR の場は、新聞・雑誌への投稿や、書籍の執筆、テレビ出
演、講演会の講師などに限られていたが、インターネットの
利用が一般化した今では、ホームページを立ち上げることに
よって、誰でも簡単に自己 PR の場が持てるようになった。
しかしそれは同時に、せっかく立上げた自分のホームペー
ジが、インターネット上の膨大な情報の中で埋没してしまう
ことにもなり兼ねない。適正な管理がされていないマンショ
ンと同様に、更新のないホームページもやがてスラム化して
いく。そうならないためには、ホームページを立上げたら終
わりというわけではなく、その後コンテンツをいかに充実さ
せていくかという日頃の努力が必要になる。
いずれにしても、ホームページがマンション管理士にとっ
て有効な営業ツールのひとつであることは間違いない。自分
という「商品」の価値を高めつつ、その良さをどのように売
り込むかということを常に念頭に置きながら、ホームページ
を活用されることをお祈りする。
VII. ホームページを開設するときのポイント
1. ホームページを開設する前に
(1) 何をホームページの目玉とするか考えよう
(2) 自分をどのようにアピールするか考えよう
(3) 写りの良い写真を用意しよう
(4) 人のホームページをお手本としよう
2. ホームページを開設したら
(1) Google にトップページの URL を登録しよう
http://www.google.co.jp/addurl/
(2) 友人や知人、所属団体等のホームページからリンクして
もらおう
(3) トラックバックを活用しよう
(4) 名刺をいただいたら電子メールを送ってホームページを
紹介しよう
(5) 定期的な更新を怠らないこと
(6) 掲示板にはこまめにレスを付けること
(7) メールでの問い合わせには丁寧な対応を心掛けること
謝辞
この資料を作成するにあたっては、神奈川県マンション管
理士会会長 川原一守氏のご快諾を得て、
下記のホームページ
のコンテンツの一部を利用させていただきました。厚く御礼
を申しあげます。
「マンション管理士・行政書士川原一守事務所」
http://www5e.biglobe.ne.jp/~kawahara/mankantop.htm
11
サイトマップ
サイトマップはそのホームページのすべてのコンテンツ
を一覧表にしたものである。これがあれば、サイトを訪問し
た閲覧者がコンテンツの在りかを容易に知ることができる。
(用語集)
CSS
Cascading Style Sheet のこと。ホームページの「見栄え」
を定義するための技術。昔は HTML 文書の中に文字の大き
さや色、レイアウトなどの情報を記述していたが、今はスタ
イルシートという別のファイルにそれらを記述して、HTML
文書の中で呼び出す形に変わりつつある。
独自ドメイン
「www.○○○.com」のように、世界中で自分だけに与え
られる専用の URL アドレスのこと。最近は年間 990 円とい
う格安料金で取得できるようになり、個人でも気軽に独自ド
メインを持てるようになった。
FTP
File Transfer Protocol の略語。作成した HTML ファイル
をウェブサーバー上にアップロードしたり、ダウンロードし
たりするための方法。Windows のコマンドプロンプトでも
可能だが、FTP クライアントソフトを利用するのが便利。
トラックバック
ブログが持つ特長で、他のブログの記事にコメントなどを
行う場合、元の記事に自分のブログへのリンクを追加するこ
とができる機能。通常のリンクは自分のホームページの中に
相手のホームページへのリンクを置くが、トラックバックは
逆に相手のホームページの中に自分のホームページへのリン
クを置くもの。これにより、ブログの読者は関連する話題を
提供するブログを容易に見つけることができる。
HTML
Hyper Text Markup Language の略語。ホームページ用
の記述言語。
実態はHTMLタグの付いたテキストファイル。
ブラウザでホームページのソースを表示させると見ることが
できる。
URL
Uniform Resource Locator の略語。ホームページのアド
レスのこと。
Movable Type
Six Apart 社の共同設立者である Trott 夫妻が開発したブ
ログ作成ツール。自分でソフトをサーバーにインストールで
きるので、カスタマイズの柔軟性が高いことが特長。ホーム
ページのカテゴリー分けやデザイン変更が容易に行えるため、
一見ブログのように見えないビジネスサイトを構築すること
も可能。
SEO 対策
サーチエンジン最適化対策。Google や Yahoo!などの検索
サイトで、
検索結果の上位に来るようにするためのノウハウ。
ただし、検索エンジンを騙すようなテクニックを用いること
は「SEO スパム」と呼ばれる行為となり、検索結果から除外
される場合があるので、正しい知識をつけた上で行うことが
必要である。
アクセス解析
アクセス解析とは、そのホームページにどの程度のアクセ
ス数があったのか、どのページのコンテンツが読まれている
のか、閲覧者がどこのサイトから訪問したのかなどの、解析
を行うもの。カウンターはそのアクセス数を表示したもので
あるが、最近はあまり流行らないようである。
アクセス解析には、閲覧者がインターネット上で行った行
動を記録する意味があり、その情報の取扱いに関してはプラ
イバシーの保護に対する十分な配慮が必要である。閲覧者に
不安を与えないように、
「個人情報の取扱い」
などのページで、
プライバシー保護に関する考え方を公表しておくのがよい。
12
フォームメール
フォームメールは、ホームページ上に氏名やメールアドレ
ス、コメントの入力フィールドがあって、送信ボタンを押す
と、ホームページの管理者宛にメールが届く仕掛けである。
単にメールを送信するだけでなく、送信者宛に自動応答する
機能や、送信データをサーバー上に蓄積する機能を持ったも
のもある。
ブログ
Web log(ウェブログ)の略。日記形式のホームページの総称。
HTML やプログラムに関する知識がまったく無くても、
イン
ターネットの掲示板に書き込む感覚で簡単にホームページが
立ち上げられることから、
多くの個人サイトが誕生している。
ホームページの更新や維持管理が容易なことから、最近では
ブログ作成ツールを利用したビジネスサイトを立ち上げてい
る企業も多くなりつつある。
無料のブログサービスとしては、
2GB のディスクスペースが利用できる Yahoo!ブログや、
2.5GBのディスクスペースが利用できるlivedoorブログなど
がある。
レンタルサーバー
自前のサーバーを立上げずに、業者が維持管理するサーバ
ーを借り受けてインターネット上のサイトを立ち上げるもの。
サーバー用のコンピュータ 1 台を丸ごと借り上げる場合と、
サーバーのディスクスペースの一部を借り受ける場合がある。
無料でレンタルサーバーを提供するサービスも数多くあるが、
広告表示がされるなど、制約も多い。広告表示のない有料サ
ービスも低価格化が進み、現時点では年間 2,400 円で 1GB
のディスクスペースが利用可能なものもある。
(参考情報)
1. 独自ドメインの取得方法
例えばバリュードメイン(http://www.value-domain.com/)
を利用すれば、年間 990 円(税込)で取得可能。
具体的な取得方法は以下の通り。
(1) 下記のドメイン登録ページで、空きアドレスを検索。
http://www.value-domain.com/regdom.php
(2) 下記のユーザー登録ページに必要な情報を入力して、ユ
ーザー登録。
http://www.value-domain.com/signup.php
(3) 下記の入金方法に従って、銀行振込みやクレジットカー
ドで必要額を入金。
http://www.value-domain.com/howto/index.php?action
=payment
(4) 下記のドメイン登録ページで、空きアドレスを検索し、
「取得するにはここをクリックしてください」をクリッ
ク。
http://www.value-domain.com/regdom.php
(5) 必要な情報を入力して、登録。実際にそのドメインが使
えるようになるのは 24∼48 時間後になる。
2. レンタルサーバーの利用方法
バリュードメインで独自ドメインを取得した場合、そこが
提供しているエクスリアのレンタルサーバーを利用すれば、
広告付きだと 50MB のディスクスペースが無料で使用可能
である。広告なしの場合は 1,000MB のディスクスペースが
年間 2,400 円(税込)となる。
(1) 下記のサーバーアカウントの登録・管理・購入ページに
ログインして、
「無料ウェブアカウントを取得」の「取得
するにはここをクリックして下さい」をクリック。
http://www.value-domain.com/web.php
(2) 登録したいユーザー名とサーバー名を選択し登録ボタン
をクリックして、登録完了。
(3) 広告なしにするには、まず必要な費用を入金。400 円/月、
1,050 円/3 ヶ月、1,800 円/6 ヶ月、2,400 円/年の 4 通り
のプランがある。
(4) 上のサーバーアカウントの登録・管理・購入ページにロ
グインして、
「変更できるウェブアカウント」の「購入」
をクリック。
(5) プランを選択して購入。
3. DNS の設定方法
取得したドメインを使えるようにするには、そのホームペ
ージやメールボックスが、どのサーバーに存在するかという
情報を、DNS(Domain Name System)と呼ばれるサーバー上
に登録する必要がある。
(1) バリュードメイン(http://www.value-domain.com/)にロ
グイン。
(2) 「DNS レコード/URL 転送の変更」をクリック。
(3) 変更したいドメインを選んで「変更」ボタン。
(4) 「自動設定」のところで、自分のサーバーを選択して、
「変
更」ボタンを押す。
4. サーバーへの登録方法
取得したドメインにアクセスがあった際に、DNS で指定
13
されたサーバー上のどのディレクトリを開くかを設定する必
要がある。
(1) 下記のサーバーアカウントの登録・管理・購入ページに
ログインして、
「サーバー設定」の「ウェブ」のところを
クリック。
http://www.value-domain.com/web.php
(2) 「ドメイン情報入力」の「Main(public_html/):」の欄に
取得したドメイン(www.○○○.com)を入力。
5. Movable Type の設置方法
Movable Type の入手と設置に関する具体的な方法は以下
の通り。
(1) 下記の Type Key のページで、画面の指示に従って無料
のアカウントを新規に作成。
https://www.typekey.com/t/typekey/?lang=ja
(2) 取得した Type Key のアカウントを使って、Movable
Type のダウンロードページからログオン。
http://www.movabletype.jp/download-mt.html
(3) ダウンロードライセンス(26,500 円、1 サーバー・5 ユー
ザー)または個人限定ライセンス(無償)のページへ移動し
て、ZIP 形式でフル・パッケージをダウンロード。
(4) ダウンロードした ZIP ファイルを解凍する。
(5) mt.cfg を EUC 対応のテキストエディターで開いて、
Movable Type をインストールするディレクトリを指定
する。例えば
CGIPath http://www.hogehoge.com/mt/
(6) 上の例の場合、サーバーの public_html の下に「mt」と
いう名前のフォルダを作成する。
(7) 上のフォルダの中に、(4)で解凍して出来たフォルダの中
身をすべて FTP で転送する。
(8) *.cgi のファイルの権限をすべて「755」に設定する。
(9) mt フォルダの中に、
「db」という名前のフォルダを作成
して、権限を「777」に設定する。
(10) http://www.hogehoge.com/mt/mt-check.cgi にアクセス
する。
(11) 「準備が整いました!」と表示されれば OK。
(12) http://www.hogehoge.com/mt/mt-load.cgi を起動する。
(13) 正常に動作していることを確認したら、サーバー上から
mt-load.cgi を削除する。
(14) http://www.hogehoge.com/mt/mt.cgi を起動すれば、
Movable Type のログイン画面が表示される。
(15) 最初だけユーザー名「Melody」
、パスワード「Nelson」
でログイン。
(16) 「プロフィールの編集」で、ユーザー名とパスワードを
設定。次回からはこのユーザー名とパスワードでログイ
ンする。
(17) 「設定」をクリックして、ウェブログの名前を入力。エ
クスリアのサーバーの場合、他の設定は下記の通り。
ローカル・サイト・パス:
/virtual/UserID/public_html/www.acme.com
サイトの URL: http://www.acme.com/
ローカル・アーカイブ・パス:
/virtual/UserID/public_html/www.acme.com/archives
アーカイブの URL: http://www.acme.com/archives
(18) 「基本設定」の右にある「設定」をクリック。
(19) 「ウェブログの説明:」に、ホームページの名前の下に
(5) 「サイトの再構築」ボタンを押す。
表示する説明文を入力。その他はとりあえずデフォルト
の設定のままでよい。
(20) 「メインメニュー」に戻って、ホームページの名前と説
明の変更が反映されていることを確認。
(21) 「サイトの確認」ボタンを押すと、出来上がったホーム
ページが表示される。この段階ではまだエントリーは何
もない。
9. フォームメールの設置方法
注意が必要なのは、Movable Type の文字コードは UTF-8
なので、UTF-8 をサポートしたフォームメールでないと文字
化けを起こすことである。使えるフリーウェアとしては、例
えば Ezy-Mail がある。機能や設置方法などの詳細は下の
URL を見てほしい。
http://web-up.cside.biz/ezy-mail.shtml
6. カテゴリーの並び順を変える方法
Movable Type のカテゴリーの並びは、そのままだとアイ
ウエオ順である。自分で並び順を指定したい場合は、以下の
ようにする。
(1) カテゴリーのタイトルの先頭に、並べたい順番で 010、
020、030、
・・・のように数字を入れる。
(2) カテゴリーの説明に画面に表示したいカテゴリーの名前
を記入する。
(3) メインページのテンプレートの中にある 2 箇所の
<MTCategoryLabel> を <$MTCategoryDescription$>
に書き換える。
10. アクセス解析付きカウンターの設置方法
フリーウェアとしては、例えば dopvSTAR*がある。これ
をメインテンプレートや個別アーカイブ等のテンプレートの
適当な箇所に、設置すればよい。詳しくは、下記 URL を参
照のこと。Movable Type での設置方法も紹介されている。
http://tech.bayashi.net/ds/
(参考文献)
(1) ブログ「livedoor Blog」
(http://blog.livedoor.com/)
(2) HTML/CSS「とほほの WWW 入門」
(http://www.tohoho-web.com/www.htm)
(3) 独自ドメイン取得「バリュードメイン」
(http://www.value-domain.com/)
(4) Movable Type「Six Apart」
(http://www.sixapart.jp/movabletype/)
(5) SEO 対策「SEO 対策 Su-Jine」
(http://www.su-jine.com/)
7. アドレスバーにアイコンを表示する方法
最近はブラウザのアドレスバーにアイコンが表示されるホ
ームページが増えてきた。具体的には以下の方法で行う。
(1) ペイント等で 16x16、32x32、48x48 の 3 種類のビット
マップ画像を作成する
(2) @icon 変換(http://www.towofu.net/soft/)を使って、アイコ
ンに変換して、favorite.ico と名前を付ける
(3) FTP で index.html のあるディレクトリに転送
(4) うまく表示されない場合は、index.html のヘッダー部分
に下の行を追加する
<link rel="shortcut icon" href="favorite.ico" />
(5) それでもうまく表示されない場合は、IE のキャッシュを
クリアする
8. サイトマップの設置方法
Movable Type では、例えば以下の方法でサイトマップを
作ることができる。
(1) 「サイトマップ」という名前のテンプレートを新規に作
成する。
(2) ヘッダー部分はメインのものをそのまま流用し、Body の
部分に下記を記述する。
<h2>サイトマップ</h2>
<MTCategories>
<a name="<$MTCategoryLabel$>"></a>
<h3><$MTCategoryDescription$></h3>
<blockquote>
<MTEntries>
<a
href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
<br />
</MTEntries><br />
</blockquote>
</MTCategories>
(3) 出力ファイル名を「sitemap.php」とする
(4) index.html の適当な場所に上の「sitemap.php」へのリン
クを置く
14