FC2ホームページでオリジナル小説サイトを作る

2017/10/29 ウェブ

FC2ホームページ_小説サイトインデックス01

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

 

▼関連記事

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

ADVERTISEMENT

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

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

 

FC2ホームページを作る１

 

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

１ー２、FC２ホームページを開設しよう

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

 

FC2ホームページを作る２

 

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

 

FC2ホームページを作る３

 

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

 

FC2ホームページを作る４

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

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

 

FC2ホームページを作る５

 

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

 

FC2ホームページを作る６２

 

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

３、CSSファイルを作る

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

 

FC2ホームページを作る６

 

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

 

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

 

FC2ホームページを作る７

 

新規画面（空欄）が開きますので、そこに以下の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ホームページを作る８

 

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

 

FC2ホームページを作る９

 

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

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

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

 

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

２－１、「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」になります。

２－２、コンテンツを追加する

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　長編に　「魔都」　８<br>
2017.10.23　長編に　「魔都」　７<br>
2017.10.22　長編に　「魔都」　６<br>
2017.10.21　長編に　「魔都」　５<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="#">リンク１</a>
<a href="#">リンク２</a>
<a href="#">リンク３</a>
<a href="#">リンク４</a>
<a href="#">リンク５</a>
</div>

 

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

 

【完成図】

FC2ホームページを作る１０

 

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

オリジナル小説サイト｜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　長編に　「魔都」　８<br>
2017.10.23　長編に　「魔都」　７<br>
2017.10.22　長編に　「魔都」　６<br>
2017.10.21　長編に　「魔都」　５<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="#">リンク１</a>
<a href="#">リンク２</a>
<a href="#">リンク３</a>
<a href="#">リンク４</a>
<a href="#">リンク５</a>
</div>
</body>
</html>

 

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

SPONSORED LINK

@hiroseyonaka

トップへ戻る