当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。

まず、htmlソースが見れる状態にして、
<title>伝統工芸サイト（和風レイアウト）向け 無料ホームページテンプレート tp_wa2</title>
を編集しましょう。
あなたのホームページ名が「日本伝統工芸館」だとすれば、
<title>日本伝統工芸館</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。

続いてhtmlの下の方にある、
Copyright© 日本伝統工芸館 All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。

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

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

h1ロゴのaltタグも変更しましょう

html側に、
alt="日本伝統工芸館"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

テンプレートの色変更について

全体のカラー変更は簡単にできます。

cssフォルダのstyle.cssを開き、冒頭の、
:root {
の中にある、
--primary-color:
〜〜〜
他数行の設定を変更すればサイト全体の色変更ができます。

※必要に応じて部分的なパーツカラーの調整が必要になる場合もあります。

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

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

Font Awesome 公式サイト
Font Awesome アイコン一覧（※バージョン6）

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

Font Awesomeを使う為に必要なタグ、ファイル類。

cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。

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

ロゴ画像について

画面幅が900px以上の場合は、縦長ロゴ（logo_tate.png）が表示され、900px未満の場合は横長ロゴ（logo_yoko.png）が表示されます。
logo_yoko.pngについては、英語ページのロゴにも使用されています。

トップページの背景画像について

cssフォルダのstyle.cssの最初の方にある、
/*トップページの背景画像*/
のブロックで背景画像を指定しています。背景画像が不要なら丸ごと削除して下さい。
置き換えたい場合は、imagesフォルダのbg1.pngをお好みの画像に置き換えて下さい。

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

縦長画像（mainimg_tate.jpg）と、横長画像（mainimg_yoko.jpg）がimagesフォルダに入っていますので、お手持ちの画像と置き換えて下さい。

画像はcssの背景画像として読み込まれており、画面幅900px以上とそれ未満とで画像が「縦長」or「横長」に切り替わります。

指定はcssフォルダのstyle.cssの、
/*メイン画像（アスペクト比2:1の横長）*/
と、
/*メイン画像（アスペクト比1:2の縦長）*/
のブロックです。

アスペクト比を変更したい場合

※「アバウトでいい」という場合はここまで厳密に計算しなくても「いい感じ」に調整すればOKです。縦横比率が違っても余白は発生しないようになっています。

アスペクト比が違う画像を準備した場合、上記のアスペクト比に自動的に切り抜かれますが変更したい場合の解説です。

/*メイン画像（アスペクト比2:1の横長）*/
の方は900px未満の小さな端末向けでアスペクト比2:1の横長画像になります。
このアスペクト比を変更したい場合は、
padding-top: 50%;
の数値を変更します。
例えばアスペクト比16:9なら、9 ÷ 16 = 0.5625なので、
padding-top: 56%;
にすればOKです。小数点はあってもなくても構いませんが、ほとんど意味はないので省きました。

/*メイン画像（アスペクト比1:2の縦長）*/
の方は、900px以上の大きな端末向けでアスペクト比1:2の縦長画像になります。
このアスペクト比を変更したい場合は、
width: 30vw;
や、
height: 60vw;
を変更します。
vwという単位は画面幅に対してのパーセンテージのような認識でOKです。30vwなら画面幅の30%という感じ。heightにもvwと使っていますが、これは画面幅に対して相対的に変形させる為に同じ単位を指定しています。（縦向きの単位はvhというのがあります）

アスペクト比を9:16にしたい場合、幅はそのままでいいなら、高さは（30vw ÷ 9）× 16＝53.33...vwになるので、
height: 53vw;
にすればOKです。

メニューについて

ドロップダウンメニューについて

「工芸品一覧」メニューにはドロップダウンメニューが設定されています。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

OKな例
<li><a href="">親となるメニュー</a>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
</li>

NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>

アンカーリンク（同一ページ内リンク）を使う場合の注意点

同一ページ内へのアンカーリンクの場合、list.htmlのメニューのように、
<a href="#link1">
など、通常のアンカーリンクのhtml指定をして下さい。

その他のページからは別ページへのアンカーリンクになる為、
<a href="list.html#link1">
などになっていますが、このタグをコピペでlist.htmlにそのまま使用すると、ブラウザはページをリロードしないため、メニューがスムース移動しません。スムースにならなくてもいいならこのコードを全htmlに共通で使ってももちろんOKです。

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

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

写真の縦横サイズを予め揃えておくと綺麗に並びます

枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スライドショーの設定は、jsフォルダのslick.jsで調整できます。

slickを使う為に必要なタグ、ファイル類

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

トップページの「お知らせ」ブロックのアイコンについて

アイコン内のテキストはhtml側で直接入力されていますので必要に応じて編集して下さい。

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

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

尚、あまり文字数が増えるとレイアウトが崩れるので注意して下さい。

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

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

テーブルレイアウト