FC2ホームページでオリジナル小説サイトを作ろう!その1,インデックス

FC2ホームページで小説サイトを作ろう

使い勝手が良い無料のホームページ作成サービス「FC2ホームページ」。今回はこのFC2で、オリジナル小説サイトを作ってみたいと思います。今回作るのは、サイトの玄関でもある「インデックス」ページ。インデックスページを作ったあと、個別小説ページを作り、さらに名前変換機能を追加します。各ページの作り方は以下の記事をご覧ください。

▼関連記事

①FC2で作った小説サイトにインデックスページを作る(この記事)
②FC2で作った小説サイトに個別小説ページを作る
③FC2で作ったオリジナル小説サイトに名前変換機能を追加する方法

SPONSORED LINK

1、まずはFC2ホームページに申し込む

FC2ホームページを利用するには、まず「FC2ID」を取得しなくてはなりません。FC2 ID未取得の方は、FC2のトップページから「新規登録」から申し込みを行ってください。

FC2ホームページを作る1

登録したメールアドレスに仮登録通知が届いたら、メール内のリンクから新規登録画面にアクセス。このページでプロフィールを設定します。その後、本登録メールが届けば、FC2の登録作業は完了。

1ー2、FC2ホームページを開設しよう

次は、FC2ホームページの開設作業です。まずFC2のトップページを開き、「ホームページ」の項にある「サービス追加」をクリック。

FC2ホームページを作る2

プラン選択画面が開くので、ここでFC2ホームページのプランを選びます。オリジナル小説サイトなら、最初は「一般・無料」プランでかまいません。

FC2ホームページを作る3

新規登録画面が開いたら、アカウント名を決めてます。アカウント名はサイトURLにも使用されるので、今回はシンプルな「originalnovelsite」にしてみました。アカウントが決まったら、サイトのカテゴリー等、必要項目を埋めましょう。利用規約の同意ボタンにチェックを入れたら、ホームページの新規登録は完了です。「ホームページを作成する」という名前の赤ボタンを押せば、サイト名とURLが表示された「ホームページ管理画面」が出てきます。

FC2ホームページを作る4

2、FC2ホームページを作り込んでいこう!

ではここから、実際にサイト本体を作り込んでいきます。先ほどの「ホームページ管理画面」の下部に「ファイルを作成・アップロード」のボタンがあるので、まずはここをクリック。

FC2ホームページを作る5

すると、FC2ホームページの「ファイルマネージャー」ページが開きます。

FC2ホームページを作る62

今後、ホームページのデザイン変更、小説の投稿などは、すべてこのページから行っていきます。

3、CSSファイルを作る

作成したサイトの初期インデックスページには、FC2テンプレートが使用されています。試しに「index.html」をプレビューしてみてください。「準備中」という文字とともに、ブログレイアウトのページが表示されましたよね。

FC2ホームページを作る6

こうしたブログレイアウトは、小説サイトに向きません。というわけで、今回は読みやすさに特化した、非常にシンプルなシングルページ(もちろんレスポンシブ対応済み)の小説サイトに作り変えていこうと思います。まずはCSSファイルを作り、このインデックスデザインから変更していきましょう。

FC2は、CSSをファイルのヘッダーに<style></style>を書き、この中に直接CSSを記述する方法を採っています。しかし、これだとページが増えたときの管理が大変なので、今回は別途CSSファイルを作り、それを各ページにリンクさせていきたいと思います。まずは、CSSファイルを作るため、画面中央にある「CSS/JSファイルを作成」をクリック。

FC2ホームページを作る7

新規画面(空欄)が開きますので、そこに以下の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」にしてください。

FC2ホームページを作る8

右上の閉じるボタンを押し、ファイルマネージャーページに戻ります。ページを再読み込みしたら、いま作った「main.css」ファイルが追加されているはずです。

FC2ホームページを作る9

「main.css」が表示されないときは、ブラウザのキャッシュをクリアしてください。

4、インデックスページを作る

CSSファイルを作ったら、次はインデックスページの作成に取りかかります。今回作るサイトはシングルページなので、インデックスページに以下の要素を入れます。

  1. サイトタイトル
  2. サイトの説明(ディスクリプション)
  3. 更新情報
  4. 長編小説メニュー
  5. 短編小説メニュー
  6. リンクの案内
  7. ブックマーク

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="#" target="_blank">オリジナル小説サイト</a><br>
当サイトはリンクフリーです。</p>
<h3>ブックマーク</h3>
<a href="#" target="_blank">リンク1</a>
<a href="#" target="_blank">リンク2</a>
<a href="#" target="_blank">リンク3</a>
<a href="#" target="_blank">リンク4</a>
<a href="#" target="_blank">リンク5</a>
</div>

これで、最低限のコンテンツのみを掲載した、シンプルなインデックスページの完成です。インデックスページをプレビューし、以下のデザインになっていれば成功。

【完成図】

FC2ホームページを作る10

【拡大】

FC2ホームページを作る11

▼サンプルページ(オリジナル小説サイトのインデックス)

オリジナル小説サイト|TOP

一応、全体のコードも載せておきますね。レイアウトが崩れる場合は、コードを追加する場所を間違えていないかチェックしてください。

■「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="#" target="_blank">オリジナル小説サイト</a><br>
当サイトはリンクフリーです。</p>
<h3>ブックマーク</h3>
<a href="#" target="_blank">リンク1</a>
<a href="#" target="_blank">リンク2</a>
<a href="#" target="_blank">リンク3</a>
<a href="#" target="_blank">リンク4</a>
<a href="#" target="_blank">リンク5</a>
</div>
</body>
</html>

このサイトはまだ製作途中なので、リンクをクリックしても何も起こりません。次回は、小説ページを作り、インデックスページに繋げていきたいと思います。

SPONSORED LINK

あわせて読みたい



トップへ戻る