当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>アーティスト(画家・作家・音楽家・芸能人など)向け 無料ホームページテンプレート tp_artist2</title>
を編集しましょう。
あなたのホームページ名が「Artist Web Site」だとすれば、
<title>Artist Web Site</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Artist Web Site All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="Artist Web Site"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
アイコン画像について（Font Awesomeの解説）
imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。
メニューについて
画面幅が900px未満で、メインメニューが開閉ブロックタイプになります。
この数値を変更したい場合は、jsフォルダのmain.jsの、
if(window.innerWidth < 900)
の、900の数値を変更して下さい。
通常はfixed表示ですが、画面の高さが500px以下になるとabsoluteになります
PCなどの大きな端末で見た場合は、メニューはスクロールしても動かないfixedになっていますが、スマホなどの小さな端末を横に倒した際に、メニューが切れてスクロールもできなくなるので、それを回避する為、500px以下の画面の高さになると、スクロールとともに移動するabsoluteに変更されます。
現状からメニュー数を増やす際は、ここのブレイクポイント（500pxという数値）を変更してスクロールできるようにして下さい。
設定箇所は、cssフォルダのstyle.cssの、
headerの設定内にある、
max-height:500px
の部分です。
背景画像入りブロックの解説
_movieタイプ以外は全て背景に画像が指定されています
<section>
を、
<section id="section2" class="section">
などに指定することで背景画像タイプになります。
class="section"は背景画像入りブロックには共通で入れるようにして下さい。
画像との紐付けはid部分です。
画像を入れ替えたい場合は、cssフォルダのstyle.cssの、「section」のブロックを読んでみて下さい。
色のついた画像上のボックスの設定も同じブロック内にあります。
閲覧端末の縦向き・横向きで画像を入れ替えるようになっています。
※「_abstract」と「_illust」と「_photo」タイプは縦長・横長で同じ画像を使う設定になっています。
imagesフォルダに入っている背景画像のファイル名の語尾に_portraitとついているものが縦長端末用に用意した画像です。
切り替えの指定はcssフォルダのstyle.cssの、sectionのブロック内にあります。
もし縦長でも横長でも同じ画像でいい場合は、
/*縦向き端末から見た場合に背景画像をチェンジする*/
からの十数行を削除すればOKです。
その際は_portraito画像は使われないのでimagesフォルダから削除してもらってOKです。
_movieタイプはファーストビューだけが動画になっています
全てが画像のタイプとはhtmlもcssも構成が異なるので、どちらを使いたいか決めてから、該当するテンプレートをDLして編集して下さい。
尚、当テンプレートで動画にできるのは最初のコーナーだけです。全部のセクションを動画にすることはできないのでご注意下さい。
_movieタイプも縦向き・横向きで動画を入れ替えられます。
こちらはcssではなく、html側に直接video要素として書かれています。それをcssで表示の切り替えを行っています。
こちらも１つの動画で共用したいなら、２つあるhtml内のvideo要素で読み込んでいる.mp4のファイル名を合わせておけばOKです。他の方法もありますが、縦画面でも横画面でも同じ動画を表示するというこの方法が簡単です。
画像だけを見せたい場合は
以下のブロックのように、section要素にno-bgcolorを追加すればOKです。
詳しくはhtml側を見て下さい。