会社概要

当テンプレートの使い方

初心者向けマニュアル公開中

画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。

titleタグ、copyright、metaタグ、他の設定

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>不動産業者向け 無料ホームページテンプレート tp_fudosan16</title>
を編集しましょう。
あなたのホームページ名が「サンプル不動産」だとすれば、
<title>サンプル不動産</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© サンプル不動産 All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

h1ロゴのaltタグも変更しましょう。
html側に、
alt="サンプル不動産"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

アイコン画像について（Font Awesomeの解説）

imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
上部のメインメニューのアイコンもそうです。
Font Awesome 公式サイト
Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

上部のメインメニューについて

画面幅800px以上で横並びのメインメニューが出ます。（それ以下は開閉メニュー）
メニュー数は自由に変更できますが、現状より増やす場合は画面幅次第で段落ちするので注意して下さい。

トップページのスライドショーの解説

画像の追加方法
html側に既存のタグをコピペするだけでOKです。
例えば「4.jpg」という画像をスライドショーに１枚追加したい場合、現状では、
<div class="slide img1">
<img src="images/1.jpg" alt="">
</div>

<div class="slide">
<img src="images/2.jpg" alt="">
</div>

<div class="slide">
<img src="images/3.jpg" alt="">
</div>
ですが、3つ目のスライドブロックをコピペして画像ファイル名を入れ替えればOKです。
<div class="slide img1">
<img src="images/1.jpg" alt="">
</div>

<div class="slide">
<img src="images/2.jpg" alt="">
</div>

<div class="slide">
<img src="images/3.jpg" alt="">
</div>

<div class="slide">
<img src="images/4.jpg" alt="">
</div>

画像ごとにリンクも設定できます
通常の画像へのリンク設定と同じやり方でOKです。
<a href="index.html"><img src="images/1.jpg" alt=""></a>

速度の調整について
静止中の時間については、jsフォルダのmain.jsの「横スライドインタイプのスライドショー」の
}, 4000); // 4秒ごとにスライドを切り替える
の部分です。現状4秒になっています。

フェードにかける時間はcssフォルダのslide.cssの「.slide5 .slide {」ブロック内にある
transition: transform 0.7s ease;
の0.7sの部分です。ここを大きくすればゆっくりとフェードします。注意点ですが、この数値を変更する際は必ずjsフォルダのmain.jsの「横スライドインタイプのスライドショー」の最後の700の数値も変更して下さい。「1s = 1000」です。

「今月の注目物件」について

画像ブロックの総数は、「最低4セット」以上の「偶数」にして下さい。
801px以上で4列、800px以下だと2列になります。
スライドの速度はjsフォルダ内のmain.jsの「サムネイルの横スライドショー」の冒頭で変更できます。

トップページの「お知らせ」ブロックのアイコンについて

「その他」「賃貸物件」「売買物件」など、テキスト部分はhtml側で直接入力されていますので必要に応じて編集して下さい。

背景色は、cssフォルダのstyle.cssの、
#new dt span.icon-bg1
と、
#new dt span.icon-bg2
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、例えば「テナント」用のアイコンを追加したいなら、まず上記の「#new dt span.icon-bg2」ブロックをコピペし、.icon-bg2部分を.icon-bg3などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg3">テナント</span>
などとすればOKです。

尚、あまり文字数が増えるとレイアウトが崩れるので注意して下さい。

「よく頂く質問」で使っている開閉ブロックについて

クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。例：class="sample openclose"

フォントサイズ（rem）について

cssフォルダのstyle.cssで、基準となるフォントサイズを「２箇所」記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOKです。

１つ目はstyle.cssの冒頭に記載されている以下。
font-size: 14px;
２つ目は下の方にある、画面幅800px以上の端末向けで、以下。
font-size: 18px;

h2タグの下線（↓これ）アニメーションをつけたくない場合は

cssフォルダのstyle.cssを開き、
main h2::after
のbackgroundの行をコピーし、
main h2::before
のbackgroundの行と置き換えて下さい。
これにより、アニメーションは実行されても同じ色が動くだけなので、表面上わからなくなります。

完全に消し去る方法もありますがが、これが一番簡単かと思います。