無料HTMLテンプレート
Wiki形式・かわいい・1列
情報をページ単位で整理する、攻略情報・用語集・マニュアル向けのテンプレートです。やわらかいピンクと丸みのある形で組んだ、親しみやすいデザインです。
このデザインについて
形式：Wiki形式
情報をページ単位で整理する、攻略情報・用語集・マニュアル向けのテンプレートです。メニューの絞り込み検索、読んでいる位置を示す目次、見出しをクリックして並べ替えられる表、情報ボックス、注釈など、調べものをしやすくする部品を入れています。
スタイル：かわいい
やわらかいピンクと丸みのある形で組んだ、親しみやすいデザインです。お店・趣味・子ども向けの教室など、やさしい雰囲気を出したいサイトに向いています。文字の色は背景との差を確保して、読みやすさを保っています。
カラム：1列
本文を中央に1列で置くレイアウトです。パソコンでもスマートフォンと同じ流れで読めます。プロフィールやお知らせなどの補足は、本文の下にまとめて並べます。
入っているページと部品
- キーワードで絞り込めるメニュー
- 読んでいる位置を示す目次と、並べ替えできる表
- 情報ボックス・注釈・関連ページの部品
- スマートフォンでは、メニューをボタンで開閉する形に切り替わります
- ページの先頭へ戻るボタン
ファイルの構成
wiki-cute-1col/
├── index.html メインページ
├── page.html 記事ページ
├── css/
│ └── style.css スタイルシート
├── js/
│ └── main.js 動き（メニューの開閉など）
├── images/ 仮の画像（2点）
└── README.txt 使い方の説明使い方
- 「ZIPをダウンロード」を押して、ファイルを保存します。
- ZIPファイルを展開（解凍）し、中の
index.htmlをブラウザで開くと、見た目を確かめられます。 - テキストエディタで HTML を開き、文章・画像・リンク先をご自分のサイトの内容に書き換えます。
- 色や文字の形は、
css/style.cssの先頭にある「色・文字・形の設定」でまとめて変えられます。 - 公開するときは、各ページの
<head>にページの説明（meta description）などを足してください。
