当テンプレートの使い方

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

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

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

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>アーティスト・ギャラリーサイト向け 無料ホームページテンプレート tp_gallery2</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"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

このテンプレートに使っているフォント（Sawarabi Mincho、Allura、Homemade Apple）について

cssフォルダのstyle.cssの冒頭でGoogle Fontsを読み込んでそれを指定しています。
サイトの基本フォントには「Sawarabi Mincho」を指定。
h2の英語の飾り文字やindex3.htmlのロゴ部分に「Allura（※アルファベット専用）」を指定。
トップページの署名の文字に「Homemade Apple（※アルファベット専用）」を指定しています。
Google Fontsの使い方解説はこちら。

トップページのロゴについて

index.html（文字を描き出すようなアニメーション）
index2.html（通常のpng画像のフェードイン）
index3.html（h2のアルファベットに使っているアニメーションと同じもの）
の３パターン用意していますので、ご要望に合うものをindex.htmlに変更してご利用下さい。（index.htmlをそのまま使用する場合はそのままでOK。）

index.htmlのロゴの解説

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

vivus 公式サイト：https://maxwellito.github.io/vivus/

ロゴアニメーションを置き換える方法はマニュアルをご覧下さい。※Illustratorが必要です。

トップページのメイン画像について

cssのclip-pathを使って不規則な四角形に切り抜いています。
ただ、画面のアスペクト比が1:2より狭くなる場合は、画面幅が狭くなりすぎるので画面幅いっぱいに表示されるようにしています。

もし全ての条件で画面幅100%で出しておきたい場合、cssフォルダのstyle.cssの、
#mainimg {
の中にある、
width: 70%;
の行を削除し、その下の、
clip-path:
の１行も削除して下さい。
さらにその下の、「/*画面のアスペクト比が1:2以下〜〜」というブロックも不要なので削除して頂く必要がありますが、こちらは残っていても問題は出ないと思います。

テキスト専用のフェードイン効果について

class="fade-in-text"を指定すると、この見出しのようなフェードイン効果になります。
アニメーションの速度などの調整は、cssフォルダのstyle.cssから「.char」でテキスト検索をかけて下さい。説明もコメントで書いています。また、jsフォルダのmain.js内にも設定箇所があります。
タイピングのようにカクカクと出現させる事も可能なので、お好みで調整して下さい。

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

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

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

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

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

開閉メニューについて

ページ左上のハンバーガーメニューをクリックした際のメニューについては、htmlの下の方にある、
<div id="menubar">
のブロックになります。必要に応じて編集して下さい。

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

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

写真の縦横サイズを予め揃えておくと綺麗に並びます。
枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スライドショーの設定は、jsフォルダのslick-thumbnail.jsで調整できます。

slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick-thumbnail.js」。

フッター(ページ下部)の地図

サンプル画像を配置していますが、自社の地図(GoogleMap)に置き換えたい場合は、こちらのマニュアルをご覧頂き、マップのiframeタグをテンプレートのhtml側の画像(img)タグと置き換えて下さい。

出現アニメーションについて

以下のような出現のアニメーションサンプルをsample_inview.htmlにまとめています。
好きなアニメーションに簡単に変更できますし、オリジナルのものを作る事もできます。

汎用開閉ブロックのサンプル

以下は「よく頂く質問」を仮定してサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"

ここに質問を書きます。クリックで回答が開きます。

ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。

ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。