写真ギャラリーサイトのSample Gallery

About当テンプレートについて

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

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

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

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

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

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

当テンプレートの使い方

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

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

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

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

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

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

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

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

ロゴ画像について

ロゴ画像は背景画像に直接書き込まれています。baseフォルダにロゴなしの背景画像のみが入っていますので、あなたのサイト名を画像ソフトでのせて下さい。現状のサンプルロゴの配置バランスから変更してしまうと、メニューの写真がうまく重ならなくなるので注意して下さい。

写真を使ったメニューについて

css3を使ったアニメーションになっています。サイズや配置バランスなどはcssフォルダのstyle-menu.cssで行なって下さい。各端末サイズごとの再設定がいくつかあります。

※IE9以下はアニメーションが使えないので、ロゴの下に横並びに１列表示されます。
このIE9以下用の設定は、冒頭のhead内に入っています（<!--[if lt IE 10]>〜）。うっかり削除しないよう注意して下さい。

補足：iPhoneX(縦画面)で見た場合にメニュー写真の両サイドから若干ロゴがはみ出ちゃいますが、それもありかと思ってそのままにしました。iPhoneX以外でも、極端な画面サイズで見た場合は、ロゴとメニュー画像のバランスが崩れます。どうしてもロゴを隠したいなら、cssフォルダのstyle-menu.cssにブレイクポイントを追加して設定を加えて下さい。

ロゴ画像、メニュー写真画像、ギャラリー用画像など、配置する画像はできるだけ圧縮しておいて下さい

全体の容量が大きいと読み込むのに時間がかかり、閲覧する環境によってアニメーションにガタつきが出ます。きれいに見える範囲でできるだけ圧縮をかけ、容量を軽くしておいて下さい。
ギャラリーページなどで止むを得ず全体の容量が大きくなりすぎる場合は、１ページ完結でなく、各ページ振り分ける方法に変更するといいと思います。

メニューのリンク先アドレスについて

ページ内リンクを使っています。
通常のリンクは、<a href="about.html">などですが、ページ内でリンクを使う場合、例えば、「About(当サイトについて)」メニューのリンク指定は、「a href="#about"」となっています。これは同じページ内の「id="about"」にジャンプさせる指定です。
※「id(html用)」と「#(css用)」は同じ事を指します。

各ブロックごとの色分け設定は

contentsのスタイルに半角スペースを加えて、
<div class="contents bg1"〜
など指定します。当ブロックがbg1指定をしたカラーになります。

一番下のContactではbg2（背景画像入りタイプ）を指定しました。
<div class="contents bg2"〜

画像や色の変更はcssフォルダのstyle.cssで行なって下さい。

Linkリンク

Contactコンタクト

sample-mail@sample.mail（※例です）

実際にメールアドレスを書いてしまうと、迷惑メールがたくさん届き出す可能性があるので、
それがNGな場合は画像で作っておくか、フォームなどを置いて下さい。

GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。