===========================================
 個人サイト テンプレート  readme
===========================================


■ まず何をすればいいか

1. index.html をダブルクリックしてブラウザで開いてみてください。
   サイトの入口が表示されます。
   「ENTER」を押すとトップページへ、そこから各ページへ移動できます。

2. 一通り見て回ったら、index.html をメモ帳などのテキストエディタで開いて、
   「あなたのサイト名」の部分を自分のサイト名に書き換えてみてください。
   上書き保存してブラウザを再読み込みすると、変わっているはずです。

   これがサイト作りの基本の流れです。あとはこの繰り返しになります。


■ 中身の説明

site01/
├─ index.html ............ 入口ページ。一番最初に表示されるページです
├─ top.html .............. トップページ。メニュー・更新履歴・自己紹介
├─ style.css ............. 見た目を決めているファイル（★ここを触ると色や字が変わります）
├─ html5reset-1.6.1.css .. 下準備のファイル。触らなくて大丈夫です
├─ top.png ............... 「ページの上へ戻る」ボタンの画像
├─ tag.html .............. よく使うタグの一覧（★書く時に開いておくと便利です）
├─ readme.txt ............ このファイル
│
├─ novel/ ................ 小説
│   ├─ novel.html ........ 小説の目次
│   ├─ y26/ .............. 読み切り（1話完結のもの）
│   │   ├─ y260101.html
│   │   └─ y260215.html
│   └─ s01/ .............. シリーズ（続きもの）1本目
│       ├─ s01_01.html
│       ├─ s01_02.html
│       └─ s01_03.html
│
├─ illust/ ............... イラスト
│   ├─ illust.html ....... イラストの目次
│   ├─ i2601/ ............ 2026年1月のログ（画像もこの中に入れます）
│   └─ i2602/ ............ 2026年2月のログ
│
├─ essay/ ................ 文章・考察
│   ├─ essay.html ........ 文章の目次
│   └─ es26/ ............. 2026年の記事
│
└─ link/ ................. リンク集
    ├─ link.html
    └─ banner.png ........ 自分のサイトのバナー画像


■ ファイル名の付け方について

このテンプレートでは、こういう決まりで名前を付けています。

  y260101.html   →  y（読み切り）＋ 26（年）01（月）01（日）
  s01_02.html    →  s01（シリーズ1本目）＋ 02（第2話）
  i2601_01.html  →  i（イラスト）＋ 2601（2026年1月）＋ 01（そのページ番号）

決まりは何でも構いません。大事なのは「自分の中で統一されていること」だけです。
あとから見返した時に自分が分かればそれで十分です。


■ ページを増やしたい時

新しく小説を1本追加する場合を例にすると、こうなります。

1. novel/y26/ の中の y260101.html をコピーして、名前を新しく付け直す
2. 中身のタイトルと本文を書き換える
3. novel/novel.html を開いて、目次にリンクを1行足す

ゼロから書くのではなく「今あるものをコピーして書き換える」のが一番早くて確実です。


■ タグの書き方が分からなくなったら

tag.html をブラウザで開いてください。
このテンプレートで使えるタグを、「コード」と「実際の表示」の両方で並べてあります。
コピーボタンが付いているので、貼り付けて文字を書き換えるだけで使えます。

このページはサイトを作る人向けの控えです。
サーバーにアップする時は、readme.txt と一緒に消してしまって構いません。


■ 見た目を変えたい時

style.css を開いてください。
変えたくなりそうな場所には【★】マークが付けてあります。
まずは【★】の行だけを触ってみてください。

特によく使うのはこのあたりです。

  ・サイト全体の文字色  →  body の中の color
  ・本文のフォント      →  body の中の font-family
  ・リンクの下線の色    →  a:link の中の text-decoration-color
  ・サイトのテーマカラー →  #0073a8 をまとめて別の色に置き換える
  ・サイトの横幅        →  .base の中の max-width

うまくいかなくなったら、元のファイルをもう一度コピーし直せば戻せます。
触る前にフォルダごとコピーを取っておくと安心です。


■ 画像について

illust/ の中に入っている sample_01.png などは、灰色の仮画像です。
自分の画像に差し替えて使ってください。

差し替える時は、
  ・同じ名前にして上書きする（HTMLを書き換えなくて済みます）
  ・別の名前で入れて、HTMLの <img src="ここ"> を書き換える
のどちらでも構いません。


■ 入っていないもの

以下はこのテンプレートには含めていません。必要な方はご自身で追加してください。

  ・favicon（タブに出る小さいアイコン）
  ・OGP（SNSにリンクを貼った時に出るカード）
  ・robots.txt（検索エンジンへの指示。検索避けをしたい場合は特に、
    ご自身で調べてから設置することをおすすめします）
  ・パスワード制限などの非公開設定
  ・アクセス解析、拍手、カウンターなどの外部ツール


■ 使い方について

自由に改変して使ってください。
このテンプレートを元にサイトを作ったことの報告や表記は不要です。
