union fan/テンプレート配布

同盟用テンプレート配布

気軽に同盟を開設できるよう、ホント～に簡単なテンプレートを作成しました。
シンプルすぎてガッカリすること請け合いだと思います(*´∇｀*)

シンプルすぎる分、カスタマイズでどうにでも変えることができるので、まずはダウンロードして色々いじってみてください。HTMLファイルとスタイルシートファイル（これでサイトのデザインが概ねできます）を用意しました。

ページトップに戻る

ダウンロード

ウィンドウズの場合はカーソルを上に乗せて右クリック、『対象をファイルに保存』を選択してください。マックの場合は･･･どうするんでしょう？(・・；)

ページトップに戻る

テンプレートのカスタマイズに必要なもの

テキストエディタ（メモ帳など）
確認用のブラウザ（インターネットエクスプローラーなど）
HTMLの知識（全くの初心者の方は少し勉強するとより分かりやすいはず）

【参考リンク：ホームページ作成初心者】

ページトップに戻る

解説【1】

ダウンロードができたら、まずは正常にページが表示されるか確認してください。
このように見えるはずです。【 ⇒サンプル確認】
なお、index.htmlとunion.cssは同じ階層に保存してくださいね。

もしindex.htmlとunion.cssを違うフォルダに保存する場合は、index.htmlの6行目を変更する必要があります。

ex）↓このようにファイルを保存した場合
（つまり、designという名前のフォルダにunion.cssを保存した場合）

index.html
└ design
　　└ union.css

↓下のように変更する必要があります。

よく分からなければ、相対パスについての勉強をすると理解が深まると思いますよ！
【参考リンク：All About 相対パスについての解説】

ページトップに戻る

解説【2】

では次に同盟の中身を作っていきましょう。
どんな同盟を作るか決めてありますか？

まずは同盟の名前を5行目と12行目と58行目に入力します。
“○○同盟”と入力してある箇所に、これから作る同盟の名前を入力しましょう。

ex）ロールキャベツ同盟という名前の同盟を作る場合
（昨日ロールキャベツ作ったので･･･もし存在したらゴメンナサイ）

<title>○○同盟</title>

<title>ロールキャベツ同盟</title>

5行目の<title>～</title>部分は、ブラウザ上部に反映されます。

<h1>○○同盟</h1>

<h1>ロールキャベツ同盟</h1>

12行目の<h1>～</h1>部分は、一番上の見出し部分に反映されます。
＜h1＞部分スクリーンショット

58行目の<div class="copy">～</div>部分は、ページ下部に反映されます。
　 200x-200xの部分は同盟を立ち上げた年～現在までの表示です。
　 2005年に立ち上げたばかりなら、“2005”という表記だけでいいと思います。
＜copy＞部分スクリーンショット

ページトップに戻る

解説【3】

次からは全部まとめて解説しちゃいます。
作りたい内容に合わせて、好きなように変更してください。

<h2>～</h2>部分は、★印がついている見出し部分に反映されます。
　全部で4ヶ所あるので、それぞれ好きな言葉に変更してください。

<h2>★○○同盟について</h2>

<h2>★ロールキャベツ同盟について</h2>

<div class="box">～</div>部分は、<h2>についての説明欄です。
　好きなようにいじりましょう。【 ⇒サンプル確認】

<div class="box">
同盟についての説明文などご自由に。<br />
リストにして表示する場合はこんな感じ。
<ul>
<li>1つめ。</li>
<li>2つめ。</li>
<li>3つめ。</li>
<li>4つめ。</li>
<li>5つめ。</li>
</ul>
</div>

<div class="box">
ロールキャベツ同盟はロールキャベツをこよなく愛する人のための同盟です。<br />
たとえばこんな症状に当てはまる方は、ロールキャベツの素晴らしさを共感しましょう。
<ul>
<li>ロールキャベツを作るのは面倒どころかすすんでやる。</li>
<li>何個でもペロリといける。むしろ人の分までペロリといける。</li>
<li>ロールキャベツを食べるために専用のナイフを購入した。</li>
<li>トマト味もコンソメ味もどっちでも来いだ。</li>
<li>こんな素晴らしい料理を考えた人は誰より素敵だ。</li>
</ul>
</div>