会社概要

2021年10月「以前」に弊社テンプレートを利用した事のあるお客様へ

2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
※今後しばらく仕様の変更が入るかもしれません。

• モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
• IE10以前は考慮しておりません。Microsoft社のIEサポートが2022年6月で終了する為、IE11の動作チェックも近いうちに終了させて頂きます。
• floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。

当テンプレートの使い方

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

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

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以上で横並びのメインメニューが出ます。（それ以下は開閉メニュー）
メニュー数は自由に変更できます。※CSSの調整は不要です。

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

トップページのスライドショーには、slickを使用しています。
slick 公式サイト

slickのスタイルは、cssフォルダのslick.cssで設定しています。それ以外に、jsフォルダのslick.jsにも設定があります。スライドの速度はこのslick.js内の「autoplaySpeed」で調整できます。
他、slickには様々なオプションもあるので気になる人、カスタマイズしたい場合は「slick オプション」などでGoogle検索してみて下さい。

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

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

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

こちらのスライドショーにも、slickを使用しています。
slick 公式サイト

slickを使った場合、なぜか各ボックスの高さが確保できなくなったので、このコーナーだけ画像を均一にトリミングしてくれるobject-fitを使いました。同様の理由で、h4とpも高さを予め確保しています。
スタイル変更は、cssフォルダのslick.cssでできます。それ以外に、jsフォルダのslick.jsにも設定があります。

※「注目物件」のスライドの枚数は「6枚以上」の「偶数枚」にして下さい。
4枚だと全部表示されている状態なのでそもそもアニメーションされません。
奇数枚にすると、ちょっと不自然な動きに見える段階が出ます。どうしても奇数枚がいいなら、jsフォルダのslick.jsの
slidesToScroll: 2,
を、
slidesToScroll: 1,
にすれば1枚ずつスライドするので、問題は出ない思います。

同じ速度でなめらかアニメーションしたい場合
jsフォルダのslick.jsの、
autoplaySpeed: 4000,
を、
autoplaySpeed: 0,
に変更し、新たに以下の２行を追加すればOKです。「8000」は速度なのでお好みで変更して下さい。
speed: 8000,
cssEase: 'linear',

物件ボックス全体を囲むブロックを入れ忘れないで下さい

いずれも親のタグが必要になるのでセットで使うようにして下さい。
トップページの「今月の注目物件」であれば、
class="pickup"
トップページの「新着物件」であれば、
class="list-container"
が、ぞれぞれ親となるブロックに必要なスタイルです。

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

「その他」「賃貸物件」「売買物件」など、テキスト部分は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;

上記以外のフォントサイズは全て「rem」の単位がついていますが、これは、上のpxのサイズに「相対的」に出しているサイズになります。
例えば、800px未満の画面幅の時の基準サイズは「14px」なので、他の要素などで28pxで表示させたい場合は、
28px ÷ 14px = 2rem(28px)
となります。（cssの指定は、font-size: 2rem;　となる。）

10pxにしたい場合も同様です。この場合、
10px ÷ 14 = 0.7142...
と小数点が続いてしまいますが、厳密に出す必要はないので、適当に切り上げて、
font-size: 0.7rem;
あたりにしておけばOKです。

または計算などせず、「見た目」でremの数値を決めてしまってもいいでしょう。
実際このテンプレートのremは、厳密に割り出したわけじゃなく、雰囲気(何となく適当)で指定しています。

emや%などは継承の問題が発生しますがremだとこれが起きないので便利です。

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

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

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