テンプレートのご利用前に必ずお読み下さい
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『おしゃれなポートフォリオ向け 無料ホームページテンプレート tp_portfolio2』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
このフレームで使用しているカラーセット
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>おしゃれなポートフォリオ向け 無料ホームページテンプレート tp_portfolio2</title>
を編集しましょう。
あなたのホームページ名が「lumière」だとすれば、
<title>lumière</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
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関連のファイルのバージョンを変更して動作するか確認してみて下さい。
イラスト、写真素材について
当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
メニューについて
cssフォルダのstyle.cssを開き、「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
画面幅900px未満で開閉メニューになります
900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
背景画像があるタイプのテンプレについて
背景画像は、cssフォルダのstyle.cssの冒頭にある「body」の「background」で指定しています。背景画像を使わない場合は、この行から、
url("../images/bg1.webp") no-repeat center top / 100%
の部分だけを削除して下さい。一番最後のセミコロン（;）まで削除すると崩れるので注意。
トップページにだけ背景画像をおきたい場合は
上で書いている背景画像部分「のみ」をbodyから削除した上で、以下のように独立させて下さい。
bodyタグにclass="home"がついている場合にだけ背景画像を適用する指示です。
body.home {
background: var(--bg-color) url("../images/bg1.webp") no-repeat center top / 100%;
}
※テンプレにより、bg1.webpでなく、bg1.pngなどの場合もあるので確認して下さい。
トップページのメイン画像ブロックの解説
cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
SVG枠について
このテンプレシリーズのうち、枠の形が不規則なタイプは、html側にsvgコードを置いて切り抜いています。Illustratorなどsvgコードが出せるソフトをお持ちなら自作もできます。自作する際のマニュアルはこちら。
見出しの左上の「●」の飾り
なんとなく入れましたが、出したくない人は、cssフォルダのstyle.cssから、
main h2::before
をテキスト検索を、ブロックごと削除して下さい。
Aboutブロックの解説
cssフォルダのstyle.cssを開き、「.list-grid1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
３列を階段上にレイアウトしています。きれいに横並びがいいなら、「2つ目のブロック」と「3つ目のブロック」の設定を削除し、.list-grid1の中にあるalign-items: start;（上部揃え）をalign-items: center;（天地中央揃え）にして下さい。
Worksブロックの解説
cssフォルダのstyle.cssを開き、「.list-mask1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
外枠は選べます
mask1〜mask7まであるので、好きなclassを使って下さい。
maskなし
mask1
mask2
mask3
mask4
mask5
mask6
mask7
Serviceブロックの解説
cssフォルダのstyle.cssを開き、「.list-flex1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
アイコンは、上で解説しているFont Awesomeです。
Instagramブロックの解説
cssフォルダのstyle.cssを開き、「.gallery」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
写真ブロックは、上で解説しているWorkdブロックと同じです。Instagramコーナーではmask指定をしていませんが、mask1〜7を指定できます。
Newsブロックの解説
cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
Contactブロックの解説
cssフォルダのstyle.cssを開き、「.contact」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
写真の枠は、角丸（border-radius）を使っています。写真そのまま出したければこの１行を削除すればOK。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
アイコンは、上で解説しているFont Awesomeです。
汎用ボタンの解説
ボタンは、style.cssの「.btn-grad1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
デフォルトのパララックス効果の変更（.inview）
ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.jsの冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。
補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。
オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。
装飾用の英字画像
以下のpngと、ai画像を梱包していますので自由に使って下さい。
このテンプレートはパーツの追加に対応しています
新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。
