FC2でオリジナル小説サイトを作り、その過程を解説する記事です。前回はインデックスページを作成したので、今回は個別小説ページの作り方。
▼関連記事
①FC2で作った小説サイトにインデックスページを作る
②FC2で作った小説サイトに個別小説ページを作る（この記事）
③FC2で作ったオリジナル小説サイトに名前変換機能を追加する方法
１、個別小説ページを作る
今回は小説を掲載する「個別小説ページ」を作っていきます。といっても、インデックスページに比べると作り方は遥かに簡単です。
小説ページはインデックスページのHTMLファイルと同じ階層に置くのではなく、フォルダを作り、１つ下の階層に置きましょう。というわけで、まずはファイルマネージャー画面にある「ディレクトリを作成」ボタンをクリック。新規ディレクトリの名前は分かりやすく「novel」にしておきましょう。
すると、ディレクトリ一覧の一番上に「novel」という名前のフォルダが表示されます。今度はこのnovelフォルダをクリック。「novel」のディレクトリが開くので、ここに小説の個別ページファイルを追加していきます。
では、中央にある「HTMLファイルを作成」をクリックしましょう。
新規画面が開きますので、まずは空欄のままで「名前を付けて保存」。このHTMLファイルは、一目で小説の内容が分かる名前にしておきましょう。今回は「新西遊記」という小説ページ（全２P）を追加するので、ファイル名は「shin_saiyuki1.html」にしました。
名前をつけて保存し、閉じるボタンで先ほどのnovelディレクトリページに戻ったら、今度はソースエディタボタンをクリック。いま作った「shinsaiyuki1.html」のソースコードが表示されます。デフォルトでは以下のような、シンプルなソースコードになっているかと思います。
【新規ページのソースコード】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>
このソースコードのヘッダーに前回作った「main.css」を読み込ませ、<title></title>の間にブラウザのタイトルバーに表示されるタイトルを追加。そして小説タイトルを<h1></1>で囲みます。あとは文章を追加し、その文章を<div></div>で囲めば個別小説ページは完成（私はここをmain_textというクラス名にしています）。以下が、カスタマイズ後のソースコードです。
【小説ページのソースコード（カスタマイズ後）】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>新西遊記（１）</title>
<link rel="stylesheet" type="text/css" href="https://originalnovelsite.web.fc2.com/main.css" />
</head>
<body>
<h1>新西遊記</h1>
<br>
<br>
<div class="main_text">
（１）
<br>
<br>
宇治<ruby><rb>黄檗山</rb><rp>（</rp><rt>おうばくさん</rt><rp>）</rp></ruby>の山口智海という二十六歳の学侶が<ruby><rb>西蔵</rb><rp>（</rp><rt>チベット</rt><rp>）</rp></ruby>へ行って西蔵訳の大蔵経（一切経または蔵経、仏教の典籍一切を分類編纂したもの）をとって来ようと思いたち、五百三十円の餞別を懐ろに、明治卅年の六月廿五日、神戸を発って印度のカルカッタに向った。<br>
（中略）
<br>
</div>
</body>
</html>
小説に使用した漢字にルビを振りたい場合は、その文字を<ruby></ruby>、<rp></rp>、<rt></ry>という３つのタグを使って囲みます。以下のサンプルを参考にしてください。
【サンプル】
【HTML】
自分の<ruby>運数<rp>（</rp><rt>うんすう</rt><rp>）</rp></ruby>を深いところで予知していたのかもしれない。
今回は青空文庫にある久生十蘭「新西遊記」を２分割し、「shin_saiyuki1.html 」「shin_saiyuki２.html 」という２つの小説ページにしました。ファイルを作成したら、今度はこの小説ページファイルをインデックスページにリンクさせていきます。
２、小説ページをインデックスページに繋げる
novelディレクトリの１つ上の階層に戻り、前回作った「index.html」のソースエディタを開きましょう。この中にある「新西遊記」の項目に、「shin_saiyuki1.html 」「shin_saiyuki２.html 」をリンクさせます（小説ページのURLは、ファイルのプレビューで確認できます）。
【ファイル変更前】
<h3>長編</h3>
<h4>新西遊記</h4>
<ul>
<li>
<a href="#">1</a>-<a href="#">2</a><br>
</li>
</ul>
【ファイル変更後】
<h3>長編</h3>
<h4>新西遊記</h4>
<ul>
<li>
<a href="https://originalnovelsite.web.fc2.com/novel/shin_saiyuki1.html">1</a>-<a href="https://originalnovelsite.web.fc2.com/novel/shin_saiyuki2.html">2</a><br>
</li>
</ul>
ソースを書き換えたら、ファイルを「上書き保存」。
ファイルマネージャー管理画面に戻り、一旦ブラウザのキャッシュをクリアしてから「自分のサイトを見る」をクリック。小説サイトを開き、新西遊記の後にある1と２の文字をクリックすると、それぞれの小説ページに飛ぶはずです。
こんな風に、どんどん小説ファイルを作成してインデックスページに繋げていきます。サイトを凝ったデザインにすると、どうしてもカスタマイズ欲が出てくるので、小説を書く・読むに特化させるなら、これくらいシンプルなデザインの方がいいのではないかと。
▼今回作ったサンプルページはこちら