初心者向けヒント Ver.2.1
テンプレートの使い方
注意
※HTML4.01テンプレート向けの解説です。
2017年以降作成しているテンプレートはHTML5ですので、エディタ(編集ソフト)が対応しているか確認してください。
(Windows OSのメモ帳や、下記で紹介しているTeraPadは使用できます。)
※旧デザインのため、テンプレートの修正箇所が若干異なりますが、基本は同じです。ご了承ください。
はじめに
・自作品の小説等。
※今回はサンプル用に、著作権フリーの青空文庫から作品を引用します。
・テキストエディタ(メモ帳でも可)。サンプルでは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ファイル名に修正してください。ページ単位でデザインを変えられます。
・背景に好きな壁紙をつけたい場合。
.cssファイルを開いて、bodyタグの欄にある
background-image:url(背景画像url.gif);
に背景画像のURLを記入してください(例:(bg01.gif)等)
サンプルはこちら。.cssファイルも変更しています。
・手入力が面倒だったら、HTML入力支援のフリーソフトを使ってみましょう。操作を覚えれば、リンクもすぐに修正できるようになります。
・画像を加工したいときは、ヒント集のページを参考にしてください。透過PNGも加工できます。
補足。即バックされる小説(テキスト)サイトとは?
即バックとは、ページを開いた瞬間、ブラウザの戻るボタンを押してしまうようなサイトのこと。
つまり肝心の本文を読む前に、訪問者が逃げてしまうような状況を指します。
これって、メインの文章が読まれないわけですから、とてももったいないと思いません?
よくある例は……。
背景と文字色が合っていない。
(真っ黒背景に真っ白文字。その逆も案外、まぶしくて不評です。真っ赤とショッキングピンクとかはもってのほか。最良は背景が薄灰色に文字が濃灰色。)
文字が小さい。
(目次やメニューならいいけど、長文を読むには適度の大きさが必要。ちなみにこのテンプレートは文字サイズの指定はしていません。これよりワンサイズ小さい10ptもけっこう疲れます。)
行間が狭い&横幅100%。
(びっしり詰まった長文にならないよう、スタイルシートで行間と左右のマージンを空けましょう。)
背景の壁紙がど派手&文字に重なる。
(特によく見かけるのが、スクロールすると固定写真背景に文字が重なるタイプ。大きな壁紙やタイル壁紙を使いたいときは、このテンプレートのように、本文ブロックの囲みのみに背景色を入れる方法があります。)
などなど……。
デザイン性を考えると、ついつい文字を小さめにしたり、本文の背景に壁紙が重なりがちですが、テキストサイトの主役はなんであるのかを、心の片隅に入れてページ作りをしていきましょう。
せっかくがんばって書いた作品が読まれないのは、とっても悲しいですものね(;^_^A
さらに補足。
ブログを利用する場合、FC2ブログでは小説専用のテンプレートも配布されていますので、そちらを利用すれば読みやすくなります。
2015年12月追記。
FC2ブログは予告無しで凍結されることがあります。移転したくても専用のテンプレートがないと、引越先ブログでうまく表示できなくなるので、おすすめしません。無料レンタルブログは広告がとても多く、とくにスマフォ向けのデザインが崩れる可能性が高いです。
小説サイトは、ホームページサイトで運営するほうが、安定しているのでおすすめです。HTMLファイルをそのままアップロードするだけでいいので、サイト移転も簡単にできます。
Copyright(C)2011- sunny All rights reserved. designed by flower&clover