マンション概要
| どんなところ | １４階建てを中心として、５８４世帯、約２０００人が暮らす集合団地 |
|---|---|
| 周辺 | 加古川駅で降りてJRの高架線沿いに東へ徒歩15分程度という近距離に、14階建てを中心とした7棟の高層住宅群（管理棟は別に1棟）がそびえ立つ。南側には国道2号、北側にはJR山陽本線が走る。 |
| 利便性 | 行政機関、公共施設、各種医療施設、幼小中高など各種学校園にも近く、加古川市役所まで徒歩約10分、近隣には多くの医療施設もあり、加古川市中央病院へは徒歩20分、加古川市立氷丘南小学校・加古川市立氷丘南幼稚園へは徒歩約15分、加古川市立氷丘中学校へは徒歩約20分、また駅周辺の商業エリアにも近く、大手百貨店のヤマトヤシキや駅前ベルデモールなど気軽にショッピングが楽しめる。 |
| 開発 | 1983年（昭和58年）11月、当時は国鉄（現JR西日本）高砂線がすぐ前を走っていたが、すでに2年前に廃止は決まっており、翌1984年12月1日をもって同線は廃止され、線路跡は鶴林新道という市の道路となった。 |
| 命名 | 加古川グリーンシティと名付けられたこの住宅団地最初の棟が完成したのは1985年6月、翌1986年までには、ほぼ現在の棟むねが完成し入居が開始される。これは加古川市内では初期に属する団地である。 |
| 現在 | ２００５年(平成１７年)１２月に法人格を取得し「団地管理組合法人加古川グリーンシティ」と称する。 |
当テンプレートについて
当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です
当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。
古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（角を丸くする加工やグラデーションなどの加工等）のでご注意下さい。
各デバイスごとのレイアウトチェックは
最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。
各デバイス用のスタイル変更は
cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。
media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能です。
小さい端末（※幅900px以下）の環境でのみ
メインメニューが折りたたみ式（３本バーアイコン化）になります。バーのスタイル設定もstyle.cssで行う事ができます。
画像ベースは
「base」フォルダに入っていますのでご自由にご活用下さい。
写真の元素材を当社運営のPHOTO-CHIPSやDECORUTOで配布している場合もございます。
当テンプレートの使い方
初心者向けマニュアル公開中
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
注意：当テンプレートにはメインメニューが「２箇所」入っています
パソコンなどの大きな端末「menubar（幅901px以上）」向けと、タブレットやスマホなどの小さな端末「menubar-s（幅900px以下）」向けがそれぞれ入っています。大きな端末向けは編集ソフトで見れると思いますが、小さな端末向けは見えないと思いますのでhtml側で編集して下さい。
titleタグ、copyright、metaタグ、他の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>道の駅・物産館イメージ 無料ホームページテンプレート tp_bussan1</title>
を編集しましょう。
あなたのホームページ名が「さんぷる道の駅」だとすれば、
<title>さんぷる道の駅</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© さんぷる道の駅 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
続いて、その下の行の
content="キーワード１,キーワード２,～～～"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="さんぷる道の駅"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
上部のロゴ画像について
文字なしの土台画像がbaseフォルダに入っていますのでそれにサイト名をのせてimagesフォルダに上書きして下さい。ヘッダー用ロゴはlogo.pngで、フッター用ロゴはlogo_footer.pngです。画像の大きさは自由に変更してもらっても構いませんがある程度大きくしておいた方が高解像度の端末で鮮明に見えます。
ロゴサイズ変更は
cssフォルダのstyle.cssの「header h1」のwidthの数字で変更できます。各端末サイズごとに設定がある場合があるので注意して下さい。
トップページのパララックス効果について
トップページで写真が動くアニメーション効果は「jquery.inview.js」を使っています。
※「jquery.inview.js」は別途ダウンロードが必要です。
テンプレートのダウンロード直後の状態ではアニメーションは動きません。必ずマニュアルをご覧下さい。設定は簡単です。
このパララックス効果はIE10以上で動作します。
それ以下だと挙動がおかしくなる(微妙に動いたり見えなかったりする)ので、一通りリセット(固定表示)しています。リセットスタイルは各ページのheadタグ内に入っています。
上部のメインメニューの動作について
メインメニューは画面上部に到達した際に固定表示されます。通常通りスクロールさせたい場合は、htmlの上の方にある
<script src="js/fixmenu.js"></script>
の1行を削除してください。
古いブラウザだと不具合が出る可能性があるので、IE8以下では固定されないようにhead内でスタイル指定しています。
上部のメインメニューの文字数に注意
現在の最大文字数（全角５文字）より増えた場合、ブラウザ幅によってはメニューが段落ちします。注意して下さい。
現在ページ表示中のメニューについて
例えば、上部メインメニューの「施設のご案内」を開いた際にメニュー色がつきますが、その設定の説明です。
通常は、
<li><a href="">メニュー名</a></li>
のようになっていますがこれを、
<li class="current"><a href="">メニュー名</a></li>
とする事で色がつきます。自動で色がつくわけではないのでご注意下さい。
各メニューのアイコン画像について
それぞれメニューにclass指定を加えて背景アイコンを指定しています。アイコン画像はcssフォルダのstyle.cssの
/*メインメニュー
ブロックで設定しています。小さな端末の再設定もあるので変更する際は注意して下さい。
ヘッダー右上の各国言語メニューについて
現在２個配置していますが必要に応じて増減できます。
左右のブロックを入れ替えたい場合
cssフォルダのstyle.cssの、
.mainの「float: right;」を「float: left;」に、
.subの「float: left;」を「float: right;」にする。
スクロール中に出る「↑」アイコンについて
fixmenu_pagetop.jsで動作の制御を、cssフォルダのstyle.css内の
/*PAGE TOP（↑）設定
でボタンデザインを設定しています。
ボタンの出現ポイントは、現在350pxの場所になっています。変更したい場合はfixmenu_pagetop.jsの34行目あたりにある、
offsettop = 350;
の350を変更して下さい。
スマホなどの小さな端末からボタンクリックでPC画面を表示させたい方へ
レスポンシブデザインだと、スマホやタブレットなどの小さな端末から見た場合はそれ専用のレイアウトに変わりますが、あえてPC画面も見せたいユーザーの為にtipsを公開しました。
プレビューでチェックすると警告メッセージが出る場合(一部ブラウザ対象)
主にjavascript（jsファイル）ファイルによって出る警告ですが、WEB上では出ません。また、この警告が出ている間は効果を見る事ができないので、警告メッセージ内でクリックして解除してあげて下さい。これにより効果がちゃんと見れるようになります。
