## PROFILE

大見出しが必要ならここを使います
見出し | ここに説明など入れて下さい。サンプルテキスト。
見出し | ここに説明など入れて下さい。サンプルテキスト。
見出し | ここに説明など入れて下さい。サンプルテキスト。
見出し | ここに説明など入れて下さい。サンプルテキスト。
見出し | ここに説明など入れて下さい。サンプルテキスト。

## テンプレートのご利用前に必ずお読み下さい

### 利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『ギャラリー・ポートフォリオ向け 無料ホームページテンプレート tp_biz52_re（biz52のリメイク版）』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

### 当テンプレートの詳しい使い方は

こちらをご覧下さい。

## 無料CMS（Template Party CMS）のご案内

誰でも簡単にホームページを作れる無料CMS（ノーコードツール）を配布中です。
管理画面で使いたいパーツを選ぶと、自動で入力フォームが出現しますので、あとはテキスト入力＆画像をドラッグ＆ドロップするだけで、サイトが完成します。
もちろんWEB業者様のご利用も無料（※当サイトのテンプレがベースの場合）。クライアント向けにご活用下さい。

## 無料素材サイト（haconana）のご案内

写真・イラスト・動画のフリー素材サイトです。ユーザー登録を行うと、１日１点まで無料でDLできます。

## 当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>ギャラリー・ポートフォリオ向け 無料ホームページテンプレート tp_biz52_re</title>
を編集しましょう。
あなたのホームページ名が「サンプルギャラリー」だとすれば、
<title>サンプルギャラリー</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関連のファイルのバージョンを変更して動作するか確認してみて下さい。

## 左メニューについて

一番上のロゴ画像以外のアイコンも全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

メニューでは、html側に直接i要素を配置しています。お好みで入れ替えて下さい。

## トップページのスライドショーの解説

画像の追加方法
現状、３枚構成ですが４枚目を追加したい場合、３枚目のブロックをコピペし、slide3をslide4に変更。
続いて、cssフォルダのslide.cssを開き、3枚目画像のブロック（.slide3）をコピペして４枚目用に書き換えて下さい。
ウィンドウが横向きか縦向きかで異なる画像を配置したい場合や、拡大率を変更したい場合もslide.cssで調整できます。スライドの表示時間はjsフォルダのmain.js内の「スライドショー」ブロックで行います。

## トップページ以外の背景画像

html側のbody要素にidで個別に名前をつけて、そこで背景画像を指定しています。
背景画像は、cssフォルダのstyle.cssから「各ページの背景画像」でテキスト検索すると出てきます。
当ページだと、<body id="profile">となっているので、cssのbody#profile::beforeで指定している背景画像が読み込まれます。

文字を読みやすくするため、本来の背景画像より暗くなっています。この調整も同じブロック内にあります。0, 0, 0, 0.5と２箇所ある部分ですが、0,0,0は黒のことで0.5は色が50%出た状態です。もっと暗くしたければ70%や80%などにすればOK。

## ul、ol要素

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

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

《Web Design:Template-Party》