ウェブサイトオープンの流れ2

最終更新日 2013/3/16

ウェブサイトを編集する準備が整ったので、編集を開始します。

編集の参考書には、Google 検索エンジン最適化スターター ガイドの日本語版（pdf）をお勧めします。

各ページ共通の部分を編集してから index.html を複製します。

編集内容は各サイトで様々なので、編集方法の参考として下さい。

index.html を右クリック／プログラムから開く／既定のプログラムの選択／その他のオプション／メモ帳を選択します。

上の画像のように、index.html がメモ帳で開かれます。

編集を開始します。

今回は、サンプルとして野球サークルのウェブサイトを作成したいと思います。

他のテーマのウェブサイトであっても、編集方法は同じです。

サイト名とサブタイトルを編集
<header>
<hgroup>
<h1>BaseBall Circle</h1><!-- サイト名を記入します。 -->
<h2>Sample大学の在学チーム</h2><!-- サブタイトルを記入します。 -->
</hgroup>
</header>

赤字が編集箇所です。

サイト名とサブタイトルとしていますが、より相応しい内容がある場合はそちらを選択して下さい。

メニューを編集
<nav class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="diary.html">DIARY</a></li>
<li><a href="member.html">MEMBER</a></li>
<li><a href="photo.html">PHOTO GALLERY</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>

赤字が編集箇所です。

メニューは 5つ用意していますが、増やすことも減らすこともできます。

メニューを増やす場合は、<li>～</li> の 1行をコピー＆ペーストで増やして下さい。

メニューを減らす場合は、<li>～</li> の 1行を削除して下さい。

フッターを編集
<footer>
<small>Copyright(C)2013 BaseBall Circle |

赤字が編集箇所です。

Copyright は著作権の部分です。

正確には「Copyright(C)2013 サイト名 All Rights Reserved.」というように記載するかと思いますが、スマートフォンで見た時に 2行にならないように短くしました。

HTML のコメントにも記載がございますが、Free Template の部分を編集すると利用規約違反となりますのでご注意下さい。

各ページ共通の部分を編集したら、ファイル／上書き保存をクリックします。

編集状況はブラウザで確認できます。

index.html を右クリック／プログラムから開く／ブラウザを選択します。

ブラウザをリロード（再読み込み）すると、新しく上書き保存した編集内容が表示されます。

これで各ページを作成する準備が整いました。