サイト名

心地よいひとときを、新しい空間で。

New Open

SCROLL

「home」ブロックについて

<!-- ここからhome -->
<header id="home" class="section">
<div class="contents">

<div id="logo-container">
<h1 class="logo"><img src="images/logo.png" alt="サイト名"></h1>
<p>心地よいひとときを、新しい空間で。</p>
<p class="kazari"><img src="images/new_open.png" alt="New Open"></p>
</div>

<div class="scroll-container">
<p>SCROLL</p>
<div class="scroll-line"><span></span></div>
</div>

</div>
</header>

主なスタイルは

cssフォルダのstyle.cssから「header」でテキスト検索してみて下さい。詳しい解説もあります。

大きな端末で見た場合に見える両サイドの大きな画像について

「images/bg_header.jpg」です。お好みで入れ替えて下さい。サイズは自由で構いませんが端末サイズで配置バランスがかわるのでおかしくないような写真を選んで下さい。

メインコンテンツの背景画像について

「images/1.jpg」です。必要時応じて入れ替えて下さい。

ロゴ画像

「images/logo.png」です。psdファイルも梱包していますのでテキストを打ち替えてそのままpngを上書きすれば入れ替わります。
ロゴ画像のalt="サイト名"の「サイト名」部分はあなたのサイト名に入れ替えて下さい。

ロゴ上の装飾テキスト画像

「images/new_open.png」です。こちらもpsdファイルがあるのでご活用下さい。
この画像のサイズや配置場所は、style.cssの「header .kazari」のブロックで編集できます。

ロゴの下の小さな説明文。謳い文句。

直接htmlにテキストとして記載されているので入れ替えて下さい。

一番下にある「SCROLL」

style.cssから「ヘッダー下部のSCROLLアニメーション」でテキスト検索して下さい。詳しい解説もあります。「SCROLL」部分は直接htmlにテキストで書かれています。