HTMLファイルの編集

この記事は、HTMLの知識を全くorほぼ持たない人を対象としています。 

FizのホームページはHTMLファイル、CSSファイル、Javascriptファイルによって構成されています。
このうち、文章やリンクなどの内容自体を記述しているのはHTMLファイルです。

つまり、ホームページの内容を改変したいのであれば、HTMLファイルの中身を書き換えればいいということです。

今回はホームページのLinksに新たなリンク先を追加する場合について解説します。

準備
今回、編集するのは「Links」なので、FFFTPの使い方の手順に従って「link.html」というファイルをダウンロードします。

ダウンロードしたファイルをメモ帳で開きます。
メモ帳を起動して「ファイル→開く」からファイルを選択するか、メモ帳のウィンドウにダウンロードしたファイルをドラッグ＆ドロップすると開きます。



編集部分を探す
次のステップは編集する部分を探すことです。

上の図のようにぐちゃぐちゃと文字列が並んでます。

この中から編集する部分を見つけるには例えば「Fizに関連する団体・施設などのリンク」という文字列を探し出せばいいわけです。

自力でもいいですしメモ帳のメニューの「編集→検索」から検索してもいいです。

そうして見つかったのが

<h1>Fizに関連する団体・施設などのリンク</h1>
<div class="contents_box">
    <p>
        <ul>
            <li><a href="http://www.ritsumei.jp/infostudents/index_j.html">立命館大学</a></li>
            <li><a href="http://www.souzoukan.jp/">しが県民芸術創造館</a></li>
            <li><a href="http://www.eonet.ne.jp/~angel-house/">京都こども文化会館</a></li>
            <li><a href="http://mixi.jp/view_community.pl?id=826498">Fizコミュニティ in mixi</a></li>
            <li><a href="http://fizlog.blogspot.com/">fiz-log</a>(団員向け)</li>
            (ここに新規項目を追加)
        </ul>
    </p>
</div>

という部分です。
今回の目的であるリンクの追加を達成するには、
赤字で(ここに新規項目を追加)と示した部分を編集すればいいってのはなんとなくで把握してください。



新規項目の追加
次は実際に新たに項目を追加します。
ここでちょっとしたコツ。
なにがどうなってるか良くわからん場合は既存の項目をまるごと写してみます。

<h1>Fizに関連する団体・施設などのリンク</h1>
<div class="contents_box">
    <p>
        <ul>
            <li><a href="http://www.ritsumei.jp/infostudents/index_j.html">立命館大学</a></li>
            <li><a href="http://www.souzoukan.jp/">しが県民芸術創造館</a></li>
            <li><a href="http://www.eonet.ne.jp/~angel-house/">京都こども文化会館</a></li>
            <li><a href="http://mixi.jp/view_community.pl?id=826498">Fizコミュニティ in mixi</a></li>
            <li><a href="http://fizlog.blogspot.com/">fiz-log</a>(団員向け)</li>
            <li><a href="http://fizlog.blogspot.com/">fiz-log</a>(団員向け)</li>
        </ul>
    </p>
</div>

こうするとFiz-logへのリンクが二つある状態となります。
これで赤字部分をいじっていけば新しいリンクが容易に追加できます。

<li><a href="http://fizlog.blogspot.com/">fiz-log</a>(団員向け)</li>

これのどこを改変すればいいか…見当をつけてみます。

<li><a href="リンク先のURL">リンクに表示するテキスト</a></li>

という構造になっているのです。
なので例としてGoogleを追加するとしたら、

<li><a href="http://www.google.co.jp/">Google</a></li>

とすればいいということ。

こんな感じで編集できたら、上書き保存します。

仕上げ
ここまで出来れば、FFFTPの使い方の手順に従って「link.html」というファイルをアップロードします。

アップロードして無事に編集できているかを確認してみます。

表示が正しいか、リンク先に正しく移動できるかを確認します。

無事、動作したなら更新完了です。



さらに詳しく…
今回は、表面的な部分をなぞって簡単な編集を行う場合の方法を紹介しました。

しっかり理解した上で編集したり画像を入れたり表を入れたり…といったことは、HTMLの「タグ」というものを理解する必要があります。

そういう場合は
HTMLタグリファレンス（ABC順）
HTMLタグ ［タグのカテゴリー一覧］ - TAG index Webサイト
といったサイトでタグを調べたり、「html 画像」といったキーワードでググるに限ります。

また、編集に用いるテキストエディタもメモ帳ではなく、より多機能なものをインストールして使用すれば、
HTMLタグの部分を色分けしてくれたり、入力中に候補を表示してくれたりと親切です。



最後に
ということで今回はごくごく簡単な内容をくそ真面目に解説してみました。

メンバー内で知識のある方はコメント欄でつっこみいれちゃってください。
記事の方も本筋を崩さない範囲で加筆・修正してもらって結構です。