個人サイト向け無料ホームページテンプレート tp

会社概要

見出し	GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。

会社概要（※角丸ボックスを使わない場合のサンプル）

見出し	GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。

当テンプレートについて

当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です

当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。
古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（各を丸くする加工やグラデーションなどの加工等）のでご注意下さい。

各デバイスごとのレイアウトチェックは

最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。

注意：cssはリアルタイムで反映されますが、javascript(js)はブラウザを再読み込みさせないと反映されないので、レイアウトが切り替わったらブラウザを再読み込みさせる事をおすすめします。javascriptは小さい端末用の開閉ブロックなどに使われています。

各デバイス用のスタイル変更は

cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。

cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。
media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能ですが、変更した場合、htmlの下部のjavascriptのウィンドウサイズの条件指定も合わせて変更しなくてはならないものもあります。

スマホ環境（※幅480以下の環境）でのみ

メインメニューが折りたたみ式（３本バーアイコン化）になります。バーのスタイル設定もstyle.cssで行う事ができます。

画像ベースは

「base」フォルダに入っています。
写真の元素材を当社運営のPHOTO-CHIPSやDECORUTOで配布している場合もございます。

角丸のボックスは使わない事もできます。

class="box"の指定がなければこのブロックのように背景に直接テキストがのります。

当テンプレートの使い方

注意：当テンプレートにはメニューが「２箇所」入っています

パソコンなどの大きな端末「menubar（幅481px以上）」向けと、スマホなどの小さな端末「menubar-s（幅480px以下）」向けがそれぞれ入っています。大きな端末向けは編集ソフトで見れると思いますが、小さな端末向けは見えないと思いますのでhtml側で編集して下さい。小さな端末向けパーツはhtmlの上の方にあります。

注意：当テンプレートにはロゴ画像が２つ入っています

上のメニュー同様、ロゴ画像も２種類あります。大きな端末向けはlogo.pngで小さい端末向けはlogo_s.pngです。両方準備して下さい。

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

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

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

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

続いて、その下の行の
content="キーワード１,キーワード２,～～～"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。

■h1ロゴのaltタグも変更しましょう。
html側に
alt="SAMPLE LOGO"
となっている箇所があるので、この「SAMPLE LOGO」もあなたのサイト名に変更しましょう。

トップページのスライドショーについて

css3を使ったスライドショーになっています。古いブラウザ（主にIE8以下）だと最後の１枚だけが固定表示されるので考慮して準備して下さい。
設定は全てcssフォルダのslide.cssで行っています。説明もありますので変更したい人は調整してみて下さい。
css3スライドショーについての詳しい解説はこちら。

プレビューでチェックすると警告メッセージが出る場合(一部ブラウザ対象)

主にjavascript（jsファイル）ファイルによって出る警告ですが、WEB上では出ません。また、この警告が出ている間は効果を見る事ができないので、警告メッセージ内でクリックして解除してあげて下さい。これにより効果がちゃんと見れるようになります。