Atelier Vktec

NEWSお知らせ

2023/05/15その他
tp_gallery1配布開始。
20XX/00/00作品
サンプルテキスト。サンプルテキスト。サンプルテキスト。
20XX/00/00作品
サンプルテキスト。サンプルテキスト。サンプルテキスト。
20XX/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
20XX/00/00その他
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

PLEASE READテンプレートのご利用前に必ずお読み下さい

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『ギャラリーサイト向け 無料ホームページテンプレート tp_gallery1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

当テンプレートの使い方

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

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

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

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

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

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

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

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

スライドショーについて

スライドショーには、vegasを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。

vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/

上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。

画像を入れ替える場合
imagesフォルダに「縦長画像」と「横長画像」がそれぞれ３枚ずつ入っています。
基本的には、縦長の画像が反映されますが、端末を横向きにした場合の画面幅が999px以下の場合にのみ、横長画像が反映されるようcssで指定しています。
設定内容を変更したい場合は、style.css内で設定している
.mainimg-yoko
や、
.mainimg-tate
をチェックして下さい。
画像サイズは自由で構いませんが、閲覧しているウィンドウサイズによりトリミングされますので、切り抜かれてもおかしくない画像をご用意下さい。

枚数を変更したい場合
枚数を変更する場合やファイル名を変更する場合は、jsフォルダのvegas.jsを開いて編集して下さい。枚数追加は、既存の画像読み込み行をコピペして画像ファイル名を入れ替えるだけでOKです。

vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある「vegas.min.css」の読み込みの１行。
2. htmlにある「スライドショー」のブロック。
3. html下部にある「jQueryの読み込み」のブロック。※vegas.jsファイルより先に読み込んで下さい。
4. その下の「スライドショー（vegas）」のブロック。
5. jsフォルダ内の「vegas.js」。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びvegas関連のファイルのバージョンを変更して動作するか確認してみて下さい。

背景グラデーションについて（※単色タイプもあります）

gallery1テンプレートの中には、ブロックの背景がグラデーションタイプになっているタイプがあります。

cssフォルダのstyle.cssの上の方にある、
背景グラデーション設定
とコメントがある部分が設定箇所です。
bg1〜bg3まで３タイプ作っていますので、お好きなブロックにclassで指定して下さい。

このグラデーションは、海外のグラデーションの生成サイトで作ったものです。
https://csshero.org/mesher/（MESHER）
このテンプレートを制作している時点では、ページの右側に色の選択肢ボックスがあり、削除したり変更、追加したりすることができます。
画面左側に出力されるグラデーションが表示されており、カーソルを上にもってくると、小さな丸い円が出て、グラデーションの場所をドラッグで移動することができます。
全てのグラデーションの基準となる背景色は、画面の右上の「Bg Color」という所です。デフォルトでは赤色になっているようです。

グラデーションが決まったら、画面右下にある「Export」ボタンを押し、別途出てきたページの右下にある「Copy to Clipboard」を押せばコピーできます。

画面の「高さ」が600px以下になった場合のみ開閉メニューになります

基本的にはメニューを表示するデザインになっていますが、小さな端末から横向きで見た場合などにメニューブロックが切れたり飛び出たりするので、そうならない為に画面の「高さ」が600px以下になった場合のみ、開閉メニューにしました。

メニューの数を増やすなどでここの数値の設定を変更したい場合は、cssフォルダのstyle.cssの、
@media screen and (max-height: 600px) {
と、jsフォルダのmain.jsの
var winBP = 600;
の600の数字を変更して下さい。

フォントについて（Google Fonts）

当テンプレート内で使っているフォントは、cssフォルダのstyle.cssの冒頭でGoogle Fontsを読み込んでそれを使っています。
メニューやh2見出しには「Cinzel」を、それ以外の日本語フォントは「Noto Serif JP」です。
フォントを変更したい場合はGoogle Fontsマニュアルをご覧下さい。

アイコン画像について（Font Awesomeの解説）

imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。

「NEWS（お知らせ）」ブロックのアイコンについて

「その他」「作品」など、テキスト部分はhtml側で直接入力されていますので必要に応じて編集して下さい。
アイコン用の文字数が増えすぎるとレイアウトが崩れます。ご注意下さい。

背景色は、cssフォルダのstyle.cssの、
#new dt span
や、
#new dt span.icon-bg1
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、上記の「#new dt span.icon-bg1」ブロックをコピペし、.icon-bg1部分を.icon-bg2などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg2">〜〜〜</span>
などとすればOKです。

lightboxの使い方

サムネイル画像をクリックすると、画面が暗転してポップアップが開きます。
海外で配布されているプログラムなので、カスタマイズなどには当サイトでは対応していません。ご自身でGoogle検索などかけてみて下さい。

画像を増やしたい場合
基本的にはご利用のテンプレートのhtml側のパーツをコピペして増やしてみて下さい。
以下のタグのようにポップアップで大きく表示される画像はaタグ内で読み込み、サムネイル画像（小さな画像）はimgタグで読み込まれています。
このテンプレートではどちらの画像も同じ画像を使っていますが、それぞれ別の画像を配置して頂いても構いません。

<a href="sample_photo/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/1.jpg" alt="">
</a>

グループ
data-lightbox="group1"
は、ポップアップで表示した場合に次の画像へ繋ぐグループの設定です。
「group1」部分は好きに変更して頂いて構いません。
同じグループ名がついている場合に次の画像へのリンク矢印が出ます。グループごとに見て欲しい場合はこのグループ名を変更しておくといいでしょう。

<a href="sample_photo/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/1.jpg" alt="">
</a>

ポップアップ時のコメント
data-title="タイトルをここに入れます"
は、lightboxで暗転表示された際に写真下に表示されるテキストです。
よく分からない場合は実際に設定して動作を確認してみて下さい。不要ならタグごと削除してもらえばOKです。

<a href="sample_photo/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/1.jpg" alt="">
</a>

ACCESSギャラリーへのアクセス

Google Mapで地図を埋め込みたい場合はマニュアルをご覧下さい。

大見出しが必要ならここを使います
住所 ここに説明など入れて下さい。サンプルテキスト。
電話番号 ここに説明など入れて下さい。サンプルテキスト。
メールアドレス ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。