使い勝手が良い無料のホームページ作成サービス「FC2ホームページ」。今回はこのFC2で、オリジナル小説サイトを作ってみたいと思います。今回作るのは、サイトの玄関でもある「インデックス」ページ。インデックスページを作ったあと、個別小説ページを作り、さらに名前変換機能を追加します。各ページの作り方は以下の記事をご覧ください。
▼関連記事
①FC2で作った小説サイトにインデックスページを作る(この記事)
②FC2で作った小説サイトに個別小説ページを作る
③FC2で作ったオリジナル小説サイトに名前変換機能を追加する方法
目次
1、まずはFC2ホームページに申し込む
FC2ホームページを利用するには、まず「FC2ID」を取得しなくてはなりません。FC2 ID未取得の方は、FC2のトップページから「新規登録」から申し込みを行ってください。
登録したメールアドレスに仮登録通知が届いたら、メール内のリンクから新規登録画面にアクセス。このページでプロフィールを設定します。その後、本登録メールが届けば、FC2の登録作業は完了。
1ー2、FC2ホームページを開設しよう
次は、FC2ホームページの開設作業です。まずFC2のトップページを開き、「ホームページ」の項にある「サービス追加」をクリック。
プラン選択画面が開くので、ここでFC2ホームページのプランを選びます。オリジナル小説サイトなら、最初は「一般・無料」プランでかまいません。
新規登録画面が開いたら、アカウント名を決めてます。アカウント名はサイトURLにも使用されるので、今回はシンプルな「originalnovelsite」にしてみました。アカウントが決まったら、サイトのカテゴリー等、必要項目を埋めましょう。利用規約の同意ボタンにチェックを入れたら、ホームページの新規登録は完了です。「ホームページを作成する」という名前の赤ボタンを押せば、サイト名とURLが表示された「ホームページ管理画面」が出てきます。
2、FC2ホームページを作り込んでいこう!
ではここから、実際にサイト本体を作り込んでいきます。先ほどの「ホームページ管理画面」の下部に「ファイルを作成・アップロード」のボタンがあるので、まずはここをクリック。
すると、FC2ホームページの「ファイルマネージャー」ページが開きます。
今後、ホームページのデザイン変更、小説の投稿などは、すべてこのページから行っていきます。
3、CSSファイルを作る
作成したサイトの初期インデックスページには、FC2テンプレートが使用されています。試しに「index.html」をプレビューしてみてください。「準備中」という文字とともに、ブログレイアウトのページが表示されましたよね。
こうしたブログレイアウトは、小説サイトに向きません。というわけで、今回は読みやすさに特化した、非常にシンプルなシングルページ(もちろんレスポンシブ対応済み)の小説サイトに作り変えていこうと思います。まずはCSSファイルを作り、このインデックスデザインから変更していきましょう。
FC2は、CSSをファイルのヘッダーに<style></style>を書き、この中に直接CSSを記述する方法を採っています。しかし、これだとページが増えたときの管理が大変なので、今回は別途CSSファイルを作り、それを各ページにリンクさせていきたいと思います。まずは、CSSファイルを作るため、画面中央にある「CSS/JSファイルを作成」をクリック。
新規画面(空欄)が開きますので、そこに以下のCSSを追加してください。
【CSS】
body{ background: #fff; color: #333; width: 80%; margin:0 auto; padding: 5em 0px; line-height: 25px; } .main { background-color: #ffffff; font-size: 100%; line-height: 140%; padding: 10px; } h1 { color: #333; font-size: 150%; font-weight: bold; margin: 0px; } h2 { color: #333; font-size: 90%; font-weight: normal; margin: 0px; padding: 5px; } h3 { color: #333; font-size: 110%; font-weight: bold; margin: 40px 0px 10px 0px; } h4{ color: #333; font-size: 90%; font-weight: bold; margin: 20px 0px 5px 0px; } .memo { color: #333; line-height: 150%; } a { text-decoration: none; border-bottom:1px dotted #ccc; } a:link { color: #333; } a:hover { color: #bbb; } ul,li { list-style-type: none; padding-bottom:5px; }
CSSコードを追加したら、「名前をつけて保存」。ファイル名は「main.css」にしてください。
右上の閉じるボタンを押し、ファイルマネージャーページに戻ります。ページを再読み込みしたら、いま作った「main.css」ファイルが追加されているはずです。
「main.css」が表示されないときは、ブラウザのキャッシュをクリアしてください。
4、インデックスページを作る
CSSファイルを作ったら、次はインデックスページの作成に取りかかります。今回作るサイトはシングルページなので、インデックスページに以下の要素を入れます。
- サイトタイトル
- サイトの説明(ディスクリプション)
- 更新情報
- 長編小説メニュー
- 短編小説メニュー
- リンクの案内
- ブックマーク
2-1、「index.html」にCSSファイルを読み込む
ホームページのデザインを変更するときは、ソース表示で作業を行っていきます。まずは、「index.html 」ファイルのソース表示アイコンをクリック。すると、「index.html 」ページが表示され、ソースコードがズラーっと出てきます。このソースコード構造は以下のようになっています。
■インデックスページ構造(デフォルトの場合)
<!DOCTYPE html>
<html>
<head>
(メタデータ)
<style>
(CSS)
</style>
<script>
(jQuery)
</script>
</head>
<body id="top">
(HTML)
</body>
</html>
CSSとjQueryのコードは使用しないので、<Style></style>と、<script></script>で囲まれている部分は削除します。すると、コードが以下のようになるので、<head></head>の中に、CSSファイルを読み込むコードを追加。
<!DOCTYPE html>
<html>
<head>
(メタデータ)
<link rel="stylesheet" type="text/css" href="ここにCSSファイルのURL/main.css" />
</head>
<body id="top">
(HTML)
</body>
</html>
CSSファイルのURLは、プレビューで確認できます。「main.css」をプレビューし、ブラウザのツールバーに表示されたURLをそのまま記入してください。当サイトであれば、ここは「https://originalnovelsite.web.fc2.com/main.css」になります。
2-2、コンテンツを追加する
CSSファイルを読み込んだら、次はコンテンツの要素を追加していきます。まずは、<body id=”top”></body> の中にあるコードをすべて削除し、代わりに以下のHTMLコードを追加してください。(※長編・短編小説の箇所は、具体的なイメージを掴みやすいよう、青空文庫のコンテンツを使用しています)
<div id="header">
<h1>オリジナル小説サイト</h1>
<h2>ここはオリジナル小説を掲載しているサイトです。</h2>
</div>
<div class="main">
<h3>更新履歴</h3>
<div class="memo">
<p>
2017.10.24 長編に 「魔都」 8<br>
2017.10.23 長編に 「魔都」 7<br>
2017.10.22 長編に 「魔都」 6<br>
2017.10.21 長編に 「魔都」 5<br>
2017.10.20 短編に 「黄泉から」<br>
</p>
</div>
<h3>長編</h3>
<h4>新西遊記</h4>
<ul>
<li>
<a href="#">1</a>-<a href="#">2</a>-<a href="#">3</a><br>
</li>
</ul>
<h4>魔都</h4>
<ul>
<li>
<a href="#">1</a>-<a href="#">2</a>-<a href="#">3</a>-<a href="#">4</a>-<a href="#">5</a>-<a href="#">6</a>-<a href="#">7</a>-<a href="#">8</a><br>
</li>
</ul>
<h3>短編</h3>
<h4>久生十蘭</h4>
<ul>
<li><a href="#">ユモレスク</a></li>
<li><a href="#">予言</a></li>
<li><a href="#">野萩 (1</a>-<a href="#">2)</a></li>
<li><a href="#">金狼</a></li>
<li><a href="#">奥の海 (1</a>-<a href="#">2)</a></li>
<li><a href="#">黄泉から (1</a>-<a href="#">2</a>-<a href="#">3)</a></li>
</ul>
<h4>中島 敦</h4>
<ul>
<li><a href="#">李陵</a></li>
<li><a href="#">悟浄歎異</a></li>
<li><a href="#">光と風と夢</a></li>
</ul>
<h4>谷崎潤一郎</h4>
<ul>
<li><a href="#">吉野葛</a> (<a href="#">1</a>-<a href="#">2</a>-<a href="#">3</a>-<a href="#">4</a>-<a href="#">5</a>-<a href="#">6</a>)</li>
</ul>
<h3>リンクについて</h3>
<p><a href="#">オリジナル小説サイト</a><br>
当サイトはリンクフリーです。</p>
<h3>ブックマーク</h3>
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
<a href="#">リンク4</a>
<a href="#">リンク5</a>
</div>
これで、最低限のコンテンツのみを掲載した、シンプルなインデックスページの完成です。インデックスページをプレビューし、以下のデザインになっていれば成功。
【完成図】
▼サンプルページ(オリジナル小説サイトのインデックス)
一応、全体のコードも載せておきますね。レイアウトが崩れる場合は、コードを追加する場所を間違えていないかチェックしてください。
■「index.html」の全体コード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>オリジナル小説サイト</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<!-- アイコンフォントの利用方法 http://fortawesome.github.io/Font-Awesome/ -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://originalnovelsite.web.fc2.com/main.css" />
</head>
<body id="top">
<div id="header">
<h1>オリジナル小説サイト</h1>
<h2>ここはオリジナル小説を掲載しているサイトです。</h2>
</div>
<div class="main">
<h3>更新履歴</h3>
<div class="memo">
<p>
2017.10.24 長編に 「魔都」 8<br>
2017.10.23 長編に 「魔都」 7<br>
2017.10.22 長編に 「魔都」 6<br>
2017.10.21 長編に 「魔都」 5<br>
2017.10.20 短編に 「黄泉から」<br>
</p>
</div>
<h3>長編</h3>
<h4>新西遊記</h4>
<ul>
<li>
<a href="#">1</a>-<a href="#">2</a>-<a href="#">3</a><br>
</li>
</ul>
<h4>魔都</h4>
<ul>
<li>
<a href="#">1</a>-<a href="#">2</a>-<a href="#">3</a>-<a href="#">4</a>-<a href="#">5</a>-<a href="#">6</a>-<a href="#">7</a>-<a href="#">8</a><br>
</li>
</ul>
<h3>短編</h3>
<h4>久生十蘭</h4>
<ul>
<li><a href="#">ユモレスク</a></li>
<li><a href="#">予言</a></li>
<li><a href="#">野萩 (1</a>-<a href="#">2)</a></li>
<li><a href="#">金狼</a></li>
<li><a href="#">奥の海 (1</a>-<a href="#">2)</a></li>
<li><a href="#">黄泉から (1</a>-<a href="#">2</a>-<a href="#">3)</a></li>
</ul>
<h4>中島 敦</h4>
<ul>
<li><a href="#">李陵</a></li>
<li><a href="#">悟浄歎異</a></li>
<li><a href="#">光と風と夢</a></li>
</ul>
<h4>谷崎潤一郎</h4>
<ul>
<li><a href="#">吉野葛</a> (<a href="#">1</a>-<a href="#">2</a>-<a href="#">3</a>-<a href="#">4</a>-<a href="#">5</a>-<a href="#">6</a>)</li>
</ul>
<h3>リンクについて</h3>
<p><a href="#">オリジナル小説サイト</a><br>
当サイトはリンクフリーです。</p>
<h3>ブックマーク</h3>
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
<a href="#">リンク4</a>
<a href="#">リンク5</a>
</div>
</body>
</html>
このサイトはまだ製作途中なので、リンクをクリックしても何も起こりません。次回は、小説ページを作り、インデックスページに繋げていきたいと思います。