特別寄稿「FC2を使って自分のホームページを作る」

FC2 を使って自分のホームページを作る
MS_takatsuki
SITA の勉強会では本年度の目標として、会員全員がホームページ作りに参加し会のホームページをよ
り充実させることを目指しています。ホームページを作るには、例えばホームページビルダーなどのソ
フトを用い、まず自分のパソコンの中でページを作りこれを適当な Web サーバーに転送するという方法
がよく使われます。ただ、この場合比較的高価なソフトを購入する必要があるのですこし敷居が高いの
が難点です。そこでここでは、ブログで有名な FC2 のホームページ作成機能を使いクラウド上で作成す
る方法を紹介します。容量が 1G バイト以下なら無料で使えるのでとりあえず作ってみましょう。以下は
7 月例会で紹介した使い方を簡単にまとめたものです。詳しい使用法は FC2 のホームページ内にマニュ
アルがあります。
１． FC２にアカウントを作りログインする
FC2 のホームページ（右図）
（http://fc2.com/）を開き ID を新規登録
する（すでにお持ちの方は必要ありませ
ん）。方法はここをクリックして開く登録
画面の指示に従えば簡単にできます。
登録が出来ればログインします。
２．管理画面を開く
ログインすると FC2ID ホームページ(右図)
が開くのでここ
（FC2 ホームページ管理画面）
をクリックして管理画面（次ページ）を開く
1
３．ファイルマネージャーを開く
ここ（ファイルを作成アップロー
ド）をクリック
出来れば作製前にここ（管理画面
の説明）を開き読んでおく
４．ファイルマネージャーにページ作成に必要なファイルを入れる
下図の説明欄にある方法でページ作成に必要なファイルや画像を入れる。このとき index.html ファ
イルは不可欠（ファイルマネージャー枠内を右クリックすると作製できる）
。また、画像ファイルを含
めファイル名は半角英数字のみが使用できる。
５． index.html ページを TynyMCE エディタで編集する
index.html ファイルを選択し、ツールバーの TynyMCE エディタで編集ボタンをクリックする →
次ページの TinyMCE エディタ画面が開く → エディタを使って Top（index）画面を作る。
このとき、全体のレイアウトは表を作り各セルに文字や画像を入れるとよい（ただし、このエディタ
ではセルの背景色を入れる機能はないので次項で説明する html 言語を使い編集する必要がある）
→
出来上がれば上書き保存し、エディター画面右上隅の閉じるをクリックしエディタを閉じる →
ファイルマネージャー画面（上図）の左上にある自分のホームページを見るをクリックし出来映えを
確認しておく
http://hokusetsusita.web.fc2.com/
このページは FC2 ホームページで試作中の、ホームページビルダーで作った SITA のホームページの
コピーです。どこまで同じようなものが出来るか試したものです。参考にして下さい。
2
６． html 言語で編集する
TinyMCE エディターの機能はとぼしく、例えばページの背景色や背景画像、表のセルの色などは編集
できません。このような機能を実現するにはホームページを記述する html 言語（ソースコード）を直接
編集する必要があります（これは結構難しく、適当な参考書を手にいれる必要があります）。ただ、背景
色、背景画像の挿入法については FC2 ホームページのマニュアル
http://help.fc2.com/web/manual/group83/1746/ja?nc=1
http://help.fc2.com/web/manual/group83/1766/ja?nc=1
に記載してあります。例示ページの背景画像の挿入個所は下図の赤線で囲った部分です。なおソースコ
ードの編集画面は Tiny エディターのツールボタン <> をクリックすると現れます。
3
セルの色を設定するには参考書を見て行いました。例示ページの SITA の会の説明部分（黄色部分）の
html ソースコードは下図の赤線で囲った部分です。
1 行目の#fdfddd はカラーコードですが、これは前ページの背景色挿入法に書いてあります（参考書には
もっとありますが、FC2 ホームページではこれだけしか使えません）
。
編集が終われば右下の OK をクリックしてエディター画面に戻ります。
７．ボタンやイラストの挿入
ロゴ（例えば
）やイラストなどは自分でパソコン内に用意する必要があります。そのため、
例えば google や Bing の画像検索などで探しダウンロードすればいいでしょう。このときファイル名は
半角英数字でないと駄目で日本語が使われている場合は名前を変更しておく必要があります。これらの
ファイルを第４項で説明したファイルマネージャーに入れておき、エディタの画像の挿入機能を使いペ
ージに貼り付けます。
4

Download Report