Elegant02

/////////

桜の写真を全面に使った1カラムのテンプレートです。
写真にあわせて、女性らしい繊細な雰囲気になっています。
最初の画面から、少しスクロールすると背景写真がぼやけ、さらにスクロールすると、メニューボタンがふんわりと表示されます。

創作系の個人サイトを想定して作成しておりますが、他の目的のサイトにも使っていただけます。
写真を他の写真に変えたり、イラストサイトであればイラストにしても良さそうです。

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

ご注意

利用規約に同意の上、ご利用ください。
写真を他の素材サイトのものと差替える場合は、フッターのクレジットを修正ください。

トップページの桜の写真以外の、デモサイトで使用している画像はサンプルです。
ダウンロードしたファイルには含まれませんので、ご自身で用意した画像をご使用ください。
また、pixivアイコンについても、同梱しておりません。 必要な場合は、公式サイトから、使用条件を確認の上、ダウンロードしてください。

使い方

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

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

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

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

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

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

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

動作確認環境

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

※IE非対応です

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