このテンプレートは、Template Partyにて無料配布している『ギャラリー・写真展示サイト向け無料ホームページテンプレート tp_photo7』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
■HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
■下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
» 過去ログ
当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。
古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（角を丸くする加工、グラデーション、アニメーションなどの加工等）のでご注意下さい。
最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。
cssフォルダのstyle.cssやstyle-opening.cssファイルで行って下さい。詳しい説明も入っています。
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。
media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能です。
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
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で行なって下さい。
当ブロックでは、lightbox2というjavascriptライブラリを使用しています。
※ポップアップウィンドウ以降の動作はlightboxの仕様です。弊社ではサポートしておりませんので予めご了承下さい。
サムネイル用の写真サイズはある程度大きければ適当で構いませんが、必ず「正方形」で準備して下さい。1pxでも縦横がずれると段落ちする場合があります。
ポップアップ用の大きな画像は自由サイズでOKです。
■画像を増やしたい場合
基本的にはご利用のテンプレートのhtml側のパーツをコピペして増やしてみて下さい。
以下の例のように大画像はaタグ内で読み込み、小画像はimgタグで普通に読み込まれています。
<a href="images_photo/3.jpg" data-lightbox="group1" data-title="タイトル">
<figure><img src="images_photo/3s.jpg" alt=""></figure>
</a>
■注意
拡張子が大文字だったり小文字だったり（「jpg」「JPG」）、異なっていたり（「jpg」「jpeg」）するとうまく動作しない場合があるので、実際の画像ファイル名とhtml側の表記を揃えておいて下さい。
異なるままにしておいた場合、あなたの環境で正常に見えていても、他の人の環境で画像が表示されないなど問題が出る可能性があります。
■タグの説明
data-lightbox="group1"は、ポップアップで表示した場合に次の画像へリンクでつないていくかの設定です。「group1」部分は好きに変更して頂いて構いませんが、ここを同じ名前で揃えておけば、画像の右半分にカーソルをのせた時に次の画像へのリンク用のアイコンが出ます。
data-title="タイトル"は、lightboxで暗転表示された際に写真下に表示されるテキストです。
よく分からない場合は実際に設定して動作を確認してみて下さい。
■別のページでlightboxを使う場合
htmlの下の方に、
<!--lightbox用jsファイルの読み込み-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js"></script>
のタグを追加して下さい。
■lightbox未搭載のテンプレートでlightboxを使いたい場合
htmlの下の方に、
<!--lightbox用jsファイルの読み込み-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js"></script>
のタグを追加。
続いてcssフォルダのstyle.css冒頭に、
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);
のタグを追加。これで準備は完了です。
あとは上に書いたようなlightbox専用のタグを使って作り込んでみて下さい。
sample-mail@sample.mail（※例です）
実際にメールアドレスを書いてしまうと、迷惑メールがたくさん届き出す可能性があるので、
それがNGな場合は画像で作っておくか、フォームなどを置いて下さい。
GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。
