Town

////

外国の街中の写真をメニューに固定した、2カラムのテンプレートです。
青系で少しクールな雰囲気にしてみました。
創作系の個人サイトを想定して作成していますが、その他の目的でもお使いいただけます。
お好きにカスタマイズしてお使いください。

レスポンシブデザインになっていますので、ブラウザの横幅が小さくなると、スマホ用の表示に切り替わります。
単純に、ブラウザの横幅を狭めても確認はできますが、
GoogleChromeをお使いの方は、ブラウザ上右クリック→検証→上部のスマホ・タブレットのアイコン(Toggle device toolber)をクリックすると、モバイル用のレイアウトを確認できます。

ご注意

利用規約に同意の上、ご利用ください。
このテンプレートで使用している画像については、画像のみでもお使いいただけます。
写真の差し替えはOKです。その際は、ページ最下部のMaterialの部分を変更ください。
例:Template@空蝉 Material@他サイト名

使い方

downloadボタンをクリックすると、zipファイルがダウンロードされます。

zipファイル内は、下記のファイルで構成されています。

ファイル名 内容
imgフォルダ 画像フォルダ。使用している画像はすべてここに入っています。
cssフォルダ
reset.css style.css

reset.cssは編集不要。
style.cssでデザインをすべて行っています。
デザインを編集したい場合はこのファイルを編集してください。
index.html 最初の画面。サイトの入り口にしています。
top.html トップページ。
main.html メインコンテンツのページ。
小説やイラストの展示のページとして作成していますが、別の用途でご使用の場合はご自由に変更ください。
story.html メインコンテンツの小説のページ。
illust.html メインコンテンツのイラストのページ。
sample.html 見出しなどのサンプルを載せています。
link.html リンク集のページ。

以下の部分を編集してください。

  1. <head></head>の中 <title>サイト名~<title>の部分
  2. <body></body>の中 <!-- ヘッダー --> <!-- メニュー --> <!-- コンテンツ --> <!-- フッター -->の記載の下に、
    それぞれの内容が記載されてありますので、必要に応じて編集してください。
  3. <footer></footer>の中サイト名等の部分

ヘッダー、メニュー、フッターの編集は、すべてのHTMLファイルで同じ編集が必要です。

動作確認環境

OS
Windows10
ブラウザ
Chrome(最新バージョン)
解像度
1920 x 1080

※IE非対応です

DOWNLOAD DEMO
このテンプレートがスキ!
いいねボタン
スポンサーリンク