当テンプレートの使い方
初心者向けマニュアル公開中
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
titleタグ、copyright、metaタグ等の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>初心者向けホームページテンプレート tp_beginner8</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE 株式会社」だとすれば、
<title>SAMPLE 株式会社</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© サイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
自作の画像ロゴに置き換えたい場合
baseフォルダのlogo.pngにあなたのサイト名をのせてimagesフォルダに上書きして下さい。ロゴが置き換わります。
ロゴの作り方についても初心者向けマニュアル(画像加工ソフト「Pixlr Editor」で画像を編集する（9:58）)で解説しています。
ロゴの画像幅は、cssフォルダのstyle.cssの、
#logo img {
の中にあるwidthの値で変更できます。
スライドショーの画像について
AI出力されたものを梱包していますのでそのまま再利用頂いても構いませんが著作は当サイトにあります。
このテンプレートの公開時点では、AIサイトによると「著作は作り出した人のもの」（＝当サイト）という規約になっているようです。
他の写真に入れ替えたい場合は、当サイトの姉妹サイトPhoto Chips(フリー写真サイト)をご活用下さい。
トップページのスライドショー（slick）の解説
トップページのスライドショーには、slickを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
slickのスタイルは、cssフォルダのstyle.cssで設定しています。それ以外に、jsフォルダのslick.jsにも設定があります。スライドの速度はこのslick.js内の「autoplaySpeed」で調整できます。
他、slickには様々なオプションもあるので気になる人、カスタマイズしたい場合は「slick オプション」などでGoogle検索してみて下さい。
画像の追加方法
html側に既存のタグをコピペするだけでOKです。
例えば「4.jpg」という画像をスライドショーに１枚追加したい場合、現状では、
<aside class="mainimg-slick">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
</aside>
ですが、これに１行加えるだけです。
<aside class="mainimg-slick">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
</aside>
画像ごとにリンクも設定できます
通常の画像へのリンク設定と同じやり方でOKです。
<div><a href="about.html"><img src="images/1.jpg" alt=""></a></div>
slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryの読み込み」のタグ。※slick.jsより上の行で読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick.js」。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びslick関連のファイルのバージョンを変更して動作するか確認してみて下さい。
スライドショーでなく、固定画像にしたい場合。
1. htmlのスライドショー画像のうち、残したい画像以外を削除。
2. html下部にある、「スライドショー（slick）」のブロックを削除。
3. jsフォルダのslick.jsファイルも合わせて削除しておきます。
4. 上記の作業までで固定画像になりますが、関連スタイルを削除しておきたいなら、cssフォルダのstyle.cssの、
/*スライドショー（slickを使用）
からのブロックを全部削除して下さい。
アクセントカラーの変更
画面の一番上部に入っている横長の線のカラーがこのテンプレートのアクセントカラーになります。この色の変更は、cssフォルダのstyle.cssの冒頭にある、
--primary-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というのもありますが、こちらは設定された要素のフォントサイズに対して相対的なサイズを持ちます。例えば、h2要素のフォントサイズが16pxで、その要素のmarginを1emに設定した場合、marginは16pxになります。
remやemは文字サイズ(font-size)の設定以外にmarginやpaddingなどの余白調整にも使えます。端末サイズによって文字サイズも変わるり、余白も自動的にリサイズされる為、固定されているpx指定よりも柔軟性があって便利です。
その他、テンプレートのカラーやデザイン変更などは
cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。
cssの解説は、「/*」と「*/」の間にコメントとして入れています。「/*」と「*/」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「/*」と「*/」含めて丸ごと削除して下さい。
うまく編集できない場合は
サポート掲示板からご質問下さい。対応可能な範囲内でサポートしております。