Pajama

2020/05/03 2020/05/03
DEMO DOWNLOAD

ご依頼からの制作第2弾。
モチーフにパジャマ、パステルカラーでかわいく、とのことでしたので、ゆるくかわいい雰囲気を目指しました。
パジャマをどう使うかにかなり頭を悩ませた結果、背景にイラストを使っています。
雑貨のパッケージ風で、かわいく仕上がったかなと思っています。

パジャマ使いにくい・・・と思う方も、背景画像を消して、カラーのみにしたり、ドットやストライプにしたり、別の画像を並べたりしてもかわいいと思いますので、お好きにカスタマイズしてお使いください。

イラストと小説の両方を展示するサイト向けになっています。
名前変換、メールフォーム、メールの返事項目など、いろいろ入っていますので、必要に応じてお使いください。

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

ファイル構成

無題ドキュメント

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

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

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

reset.cssは編集不要。
style.cssでデザインをすべて行っています。
デザインを編集したい場合はこのファイルを編集してください。
index.html トップページ。
main.html 小説、イラストの目次ページ。別の用途でご使用の場合はご自由に変更ください。
novel.html 小説の個別ページ。
illust.html イラストの個別ページ。
memo.html タイトルと日付つきのメモ用ページ。メールのお返事などにも。
sample.html 見出しなどのサンプルを載せています。
link.html リンク集のページ。
mail.html メールフォームのページ。

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

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

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