当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>シンプルで汎用的なレイアウトの無料ホームページテンプレート tp_grid1</title>
を編集しましょう。
あなたのホームページ名が「Croissant」だとすれば、
<title>Croissant</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。

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

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

h1ロゴのaltタグも変更しましょう。
html側に、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

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

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

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

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

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

メニューについて

メインメニューは開閉ブロックタイプになります。
もし大きな端末でメインメニューを表示させておきたい場合は、jsフォルダのmain.jsの冒頭にある、
const breakPoint = 9999; // ここがブレイクポイント指定箇所です
の、9999の数値を小さくして下さい。
※メインメニューのcssは設定されていないので、ご自身で設定して下さい。

動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

ul、ol要素

1. これはol要素です。サンプルテキスト。
2. これはol要素です。サンプルテキスト。
3. これはol要素です。サンプルテキスト。

• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。

サムネイル横スライドショー

右から左（rtl）、左から右（ltr）への２タイプ使えます。

背景画像がスライドアップするボックス

画像は縦長のものを準備して下さい。横長だと動きません。

イラスト素材入れてます

imagesフォルダ内に、ポイントで使えるイラスト集（illust.aiとillust.png）を梱包しています。自由にご活用下さい。