初心者向けヒント Ver.2.1

テンプレートの使い方

はじめに

・自作品の小説等。
 ※今回はサンプル用に、著作権フリーの青空文庫から作品を引用します。
・テキストエディタ(メモ帳でも可)。サンプルではTera Padを使用。
・サイト公開するためのレンタルサーバー。おすすめはXdomainを使用。

……これだけあれば、ホームページを公開できます。手順を簡単に説明していきますので、とりあえず初めてみましょう。

無料レンタルサーバーと、FTPソフト、テキストエディタ、テンプレートを用意する。

まだサーバーを持っていない場合Xdomainで新規登録してください。メールアドレスがあれば、すぐに利用できるようになります。

つぎに作品等をアップするためのFTP用のフリーソフトFFFTPを入手します。FC2の公式サイトに詳細がありますので、こちらを参考にして準備してください。ブラウザで直接アップロードするより、管理が簡単でおすすめです。

テキストエディタTera Padはベクターから入手してください。

インデックスページにあるテンプレートで使いたいものをDownload(ダウンロード)してください。見本は画像から入れます。ダウンロードしたZIPファイルをダブルクリックして解凍します。うまくできない場合は、解凍用のフリーソフトをベクターから入手してください。

小説ページのテンプレートを修正する。

使いたいテンプレートを選んで、それぞれファイル名をつけます。複数枚必要な場合は、コピーして貼り付けて、修正しましょう。(例:コピー〜novel.html⇒novel2.html)

テキストエディタ(TeraPad)をひらいて、修正するhtmlファイルをドロップ&ドラッグします。もしくは【ファイル】⇒【開く】で該当するファイルを選択してください。
以下、ソースが表示されますので、上からそれぞれ赤い下線部分を修正します。

・<title>novel title</title>(あなたの作品名またはサイト名)

・<h1>作品タイトル(○○シリーズ)(章)</h1>

・<h2>h1作品タイトル(第○話)(その○)</h2>

・|| <a href="index.html">Home</a> || <a href="index.html">Index</a> || <a href="novel.html">Back</a> || <a href="novel.html">Next</a> || (リンク先)
※Homeはトップページ、Indexは小説タイトルページ、Backは前ページ、Nextは次ページです。該当するページがない場合は削除してください。

・Copyright(C)201x your neme All rights reserved.(発表した年とあなたの名前)

テキスト(小説)に改行タグをつける

ワープロソフトやテキストエディタ等で書いた作品の文章をコピーして、改行タグツールへ貼り付け、『つけちゃえ!』ボタンを押してください。すると下の欄に改行付きのテキストが表示されますから、今度はそれをコピーしてください。

開いたままのnovel.html等の<!--ここから下は見本につき、消去して使用してください。-->〜<!--見本ここまで-->のあいだに、貼り付けましょう。さきに見本部分を消去したのち、コピーでもOKです。
コピーが終わったら、編集の『上書き保存』で保存します。

※TeraPadに直接小説を書いたときは、検索の置換機能で改行タグを付けることができます。\n=改行の欄にチェックを入れて、検索する文字列に『\n』、置換後の文字列に『<br>』を入力して『すべて置換』してください。見本画像

インデックスページを修正して、ファイルをアップロードする。

インデックス(目次)ページも同じ要領で、リンク先や文章を修正してください。
※文字をインデントしてやや小さく見せたいときは(この文章ですね)、<h5>〜</h5>タグで囲んでください。

修正がすべて終わったら、いよいよサーバーにアップロードします。
FFFTPを起動させてサーバーとつながったら、ファイルをドロップ&ドラッグします。もしくは右クリックでローカル側からアップロード。.cssファイルも忘れないようにアップロードしましょう。これがないと、デザインがないまま公開されてしまいます。

きちんと公開できているか、ブラウザでURL(http://〜)を開いてみましょう。できていたら、これで終わりです&ホームページの開設おめでとうございます!

参考までにこちらに、小説ページを作成しています。表示⇒ソース で参考にしてみてください。ちなみに検索避けのメタタグをいれています。
……ここまで解説を読んでも、方法がよくわからない場合は、初心者向けの解説サイト様も参考にしてください。初歩の初歩から学べます。

応用編:複数の作品を公開、作品目次ページ、背景画像を変更する

・作品によってちがうテンプレートを使いたい場合。
一番、簡単なのは、フォルダごとに分ける方法です。
別フォルダへリンクするときは、フォルダ名/novel.htmlと記述。上のフォルダへ戻るリンクの場合は、../index.htmlにしてください。
もうひとつの方法は、同じフォルダに.cssファイルを複数用意することです。もちろん、それぞれ名前を変えてアップロード。
デザインを変えたいページには、
<link rel="stylesheet" href="style2.css" type="text/css">
の赤線の部分を該当する.cssファイル名に修正してください。ページ単位でデザインを変えられます。

・小説作品目次専用のページを作る場合。
小説ページの本文を埋める欄を利用してください。
タイトルや章には、<h3>〜</h3>や<h4>〜</h4>を挟んで、その下にページごとのリンクを作成します。

・背景に好きな壁紙をつけたい場合。
.cssファイルを開いて、bodyタグの欄にある
background-image:url(背景画像url.gif);
に背景画像のURLを記入してください(例:(bg01.gif)等)
サンプルはこちら。.cssファイルも変更しています。

・手入力が面倒だったら、HTML入力支援のフリーソフトを使ってみましょう。操作を覚えれば、リンクもすぐに修正できるようになります。

・タイトル背景画像の大きさを指定しているテンプレートに、別の画像を使用したい場合。
フリーソフトJTrimを使って、任意の大きさに切り取ることができます。詳細はこちらを参考にしてください。
テンプレートに入っているタイトル背景用画像と同じ名前にして、そこへ直接上書き保存します。あとはアップロードすればOK。

補足。即バックされる小説(テキスト)サイトとは?

即バックとは、ページを開いた瞬間、ブラウザの戻るボタンを押してしまうようなサイトのこと。
つまり肝心の本文を読む前に、訪問者が逃げてしまうような状況を指します。
これって、メインの文章が読まれないわけですから、とてももったいないと思いません?
よくある例は……。

背景と文字色が合っていない。
(真っ黒背景に真っ白文字。その逆も案外、まぶしくて不評です。真っ赤とショッキングピンクとかはもってのほか。最良は背景が薄灰色に文字が濃灰色。)

文字が小さい。
(目次やメニューならいいけど、長文を読むには適度の大きさが必要。ちなみにこのテンプレートは文字サイズの指定はしていません。これよりワンサイズ小さい10ptもけっこう疲れます。)

行間が狭い&横幅100%。
(びっしり詰まった長文にならないよう、スタイルシートで行間と左右のマージンを空けましょう。)

背景の壁紙がど派手&文字に重なる。
(特によく見かけるのが、スクロールすると固定写真背景に文字が重なるタイプ。大きな壁紙やタイル壁紙を使いたいときは、このテンプレートのように、本文ブロックの囲みのみに背景色を入れる方法があります。)

などなど……。
デザイン性を考えると、ついつい文字を小さめにしたり、本文の背景に壁紙が重なりがちですが、テキストサイトの主役はなんであるのかを、心の片隅に入れてページ作りをしていきましょう。
せっかくがんばって書いた作品が読まれないのは、とっても悲しいですものね(;^_^A

さらに補足。

慣れてきてもっとカスタマイズしてみたくなったら、Vector:ダウンロード Windows > インターネット&通信 > HTML作成でフリーソフトをいろいろ探してみてください。WYSIWYG編集機能が付いていないソフト(テンプレートに使うとソースが変わってしまうためきれいに表示できない可能性が高いです)がおすすめです。
ちなみに当サイトはHTML Project2を使って作成しています。

あとブログを利用する場合、FC2ブログでは小説専用のテンプレートも配布されていますので、そちらを利用すれば読みやすくなります。
2015年12月追記。
FC2ブログは予告無しで凍結されることがあります。移転したくても専用のテンプレートがないと、引越先ブログでうまく表示できなくなるので、おすすめしません。無料レンタルブログは広告がとても多く、とくにスマフォ向けのデザインが崩れる可能性が高いです。
小説サイトは、ホームページサイトで運営するほうが、安定しているのでおすすめです。HTMLファイルをそのままアップロードするだけでいいので、サイト移転も簡単にできます。

Copyright(C)2011- sunny All rights reserved. designed by flower&clover