当テンプレートの使い方
初心者向けマニュアル公開中
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
titleタグ、copyright、metaタグ、他の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>アーティスト(画家・作家・音楽家など)向け 無料ホームページテンプレート tp_artist1</title>
を編集しましょう。
あなたのホームページ名が「Artist Name」だとすれば、
<title>Artist Name</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Artist Name All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="Artist Name"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
アイコン画像について（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
や、
.new dt span.icon-bg2
のbackgroundでそれぞれ変更できます。
新しいアイコンを追加したい場合、上記の「.new dt span.icon-bg2」ブロックをコピペし、.icon-bg2部分を.icon-bg3などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg3">〜〜〜</span>
などとすればOKです。
尚、あまり文字数が増えるとレイアウトが崩れるので注意して下さい。
トップページの動画/スライドショーについて
いずれも、画面サイズに合わせて切り抜かれて表示されるので、縦横入れ替えてもおかしくないような映像・画像をご用意下さい。
どうしても縦横を切り替える必要がある場合は、こちらのマニュアルをご覧下さい。
また、動画の映像やスライドショーの画像は入れ替えられるかと思いますが、そのまま再利用頂いても問題ございません。
トップページが動画（.mp4）タイプの解説
tp_artist1_movie_beige、tp_artist1_movie_glass、tp_artist1_movie_navy、tp_artist1_movie_pink、tp_artist1_movie_purple、tp_artist1_movie_skyblue、tp_artist1_movie_yellowはmp4動画が配置されています。
スマホなどで撮影した動画の場合、拡張子が.movなどだと容量が大きかったり、レイアウトが崩れる可能性があるので、mp4形式に変更して下さい。
mp4動画に変換するマニュアル
準備されたmp4動画は、movie.mp4のファイル名にしてimagesフォルダに上書きすればそのまま置き換わります。
ファイル名を変更したい場合はindex.htmlのvideoタグ内の「movie.mp4」を書き換えて下さい。
トップページがスライドショー（vegas）タイプの解説
tp_artist1_slide_painter、tp_artist1_slide_photographer、tp_artist1_slide_pinkはvegasスライドショーが配置されています。
1.jpg、2.jpg、3.jpgと３枚の画像を準備してimagesフォルダに上書きして下さい。
ファイル名を変更したい場合は、js/vegas.jsのファイル名指定箇所を書き換えて下さい。
vegasについてはテンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/
上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。
画像を入れ替える場合や、枚数を変更したい場合。
画像を入れ替えたい場合は、imagesフォルダの1.jpg〜3.jpgを上書きして下さい。
枚数を変更する場合や画像ファイル名を変更する場合は、jsフォルダのvegas.jsを開いて編集して下さい。枚数追加は、既存の画像読み込み行をコピペして画像ファイル名を入れ替えるだけでOKです。
vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある「vegas.min.css」の読み込みの１行。
2. htmlにある「スライドショー」のブロック。
3. html下部にある「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
4. その下の「スライドショー（vegas）」のブロック。
5. jsフォルダ内の「vegas.js」。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びvegas関連のファイルのバージョンを変更して動作するか確認してみて下さい。
メニューについて
当テンプレートのメニューはデフォルトで閉じています。
開閉メニューを開いた際の下部のイラストは、css/style.cssの
#menubar {
の
background
の行で変更できます。
またはimagesフォルダにmenu_bg.pngを上書きすれば画像本体が入れ替わります。
出現アニメーションについて
以下のような出現のアニメーションサンプルをsample_inview.htmlにまとめています。
好きなアニメーションに簡単に変更できますし、オリジナルのものを作る事もできます。
フォントについて（Google Fonts）
当テンプレート内で使っているフォントは、cssフォルダのstyle.cssの冒頭でGoogle Fontsを読み込んでそれを使っています。
h2見出しの英語表記には「Comfortaa」を、それ以外の日本語フォントは「M PLUS Rounded 1c」です。
フォントを変更したい場合はGoogle Fontsマニュアルをご覧下さい。
アクセントカラーの変更
h2の文字色やフッターの背景色がこのテンプレートのアクセントカラーになります。この色の変更は、cssフォルダのstyle.cssの冒頭にある、
--primary-color:
の所のカラーコードで一括変更できます。
なお、tp_artist1_movie_glassのみ、
--secondary-color:
という指定もあります。これらの名前は任意で変更してもらって構いませんが、実際に割り当てる所に同じ名前を使うようにしておいて下さい。
フォントサイズについて
cssフォルダのstyle.css冒頭で、基準となるフォントサイズを「２箇所」記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOKです。
１つ目はstyle.cssの冒頭に記載されている以下。
font-size: 13px;
２つ目はその数行下にある、画面幅900px以上の端末向けで、以下。
font-size: 16px;
上記以外のフォントサイズは、ほとんどが「rem」の単位がついていますが、これは、上のpxのサイズに「相対的」に出しているサイズになります。
900px未満だと、1remは、13px
900px以上だと、1remは、16px
となります。
例えば、2remとある場合、900px未満だと13(px)×2(rem)=26pxとなり、900px以上だと16(px)×2(rem)=32pxとなります。
小数点（例えば1.4remなど）がついていても問題ないので、適当にremを変更してお好みのサイズにしてみて下さい。
rem以外にたまにemというのもありますが、こちらは設定された要素のフォントサイズに対して相対的なサイズを持ちます。例えば、基準サイズが16pxである場合のh2要素のフォントサイズが2rem(=32px)である場合、その要素のmarginを1emに設定した場合、marginは32pxになります。もしmarginを1emでなく1remにしていた場合はmarginは16pxになります。
remやemは文字サイズ(font-size)の設定以外にmarginやpaddingなどの余白調整にも使えます。端末サイズによって文字サイズも変わり、余白も自動的にリサイズされる為、固定されているpx指定よりも柔軟性があって便利です。
その他、テンプレートのカラーやデザイン変更などは
cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。
cssの解説は、「/*」と「*/」の間にコメントとして入れています。「/*」と「*/」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「/*」と「*/」含めて丸ごと削除して下さい。