FC2で作ったオリジナル小説サイトに個別小説ページを追加する

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

FC2でオリジナル小説サイトを作り、その過程を解説する記事です。前回はインデックスページを作成したので、今回は個別小説ページの作り方。

▼関連記事

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

SPONSORED LINK

1、個別小説ページを作る

今回は小説を掲載する「個別小説ページ」を作っていきます。といっても、インデックスページに比べると作り方は遥かに簡単です。

小説ページはインデックスページのHTMLファイルと同じ階層に置くのではなく、フォルダを作り、1つ下の階層に置きましょう。というわけで、まずはファイルマネージャー画面にある「ディレクトリを作成」ボタンをクリック。新規ディレクトリの名前は分かりやすく「novel」にしておきましょう。

FC2ホームページを作る小説ページ1

すると、ディレクトリ一覧の一番上に「novel」という名前のフォルダが表示されます。今度はこのnovelフォルダをクリック。「novel」のディレクトリが開くので、ここに小説の個別ページファイルを追加していきます。

FC2ホームページを作る小説ページ2

では、中央にある「HTMLファイルを作成」をクリックしましょう。

FC2ホームページを作る小説ページ3

新規画面が開きますので、まずは空欄のままで「名前を付けて保存」。このHTMLファイルは、一目で小説の内容が分かる名前にしておきましょう。今回は「新西遊記」という小説ページ(全2P)を追加するので、ファイル名は「shin_saiyuki1.html」にしました。

FC2ホームページを作る小説ページ4

名前をつけて保存し、閉じるボタンで先ほどの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>新西遊記(1)</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">
(1)
<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>という3つのタグを使って囲みます。以下のサンプルを参考にしてください。

【サンプル】

自分の運数うんすうを深いところで予知していたのかもしれない。

【HTML】

自分の<ruby>運数<rp>(</rp><rt>うんすう</rt><rp>)</rp></ruby>を深いところで予知していたのかもしれない。

今回は青空文庫にある久生十蘭「新西遊記」を2分割し、「shin_saiyuki1.html 」「shin_saiyuki2.html 」という2つの小説ページにしました。ファイルを作成したら、今度はこの小説ページファイルをインデックスページにリンクさせていきます。

2、小説ページをインデックスページに繋げる

novelディレクトリの1つ上の階層に戻り、前回作った「index.html」のソースエディタを開きましょう。この中にある「新西遊記」の項目に、「shin_saiyuki1.html 」「shin_saiyuki2.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と2の文字をクリックすると、それぞれの小説ページに飛ぶはずです。

こんな風に、どんどん小説ファイルを作成してインデックスページに繋げていきます。サイトを凝ったデザインにすると、どうしてもカスタマイズ欲が出てくるので、小説を書く・読むに特化させるなら、これくらいシンプルなデザインの方がいいのではないかと。

▼今回作ったサンプルページはこちら

オリジナル小説サイト|インデックス

オリジナル小説サイト|新西遊記(1)

オリジナル小説サイト|新西遊記(2)

SPONSORED LINK

あわせて読みたい



トップへ戻る