パーツで作る自分だけのテンプレート
パーツで作る自分だけのテンプレートとは？
Webサイト制作でよく使うデザインや機能を、必要な部分だけ選んで組み込めるパーツ集のことです。
土台となるフレームに、見出し・ボタン・一覧・テーブル・フォームなどの様々なパーツを追加していくことで、自分好みのオリジナルテンプレートを作ることができます。
完成済みのHTMLテンプレートをそのまま使うのではなく、必要なパーツだけを組み合わせて作れるため、自由に調整しやすく、Web制作の時短にもつながります。
使い方
- 初めての場合は、「フレームを選ぶ」ボタンを押してスタートして下さい。
- フレームページに移動しますので、使いたいフレームを選んで下さい。
後で変更できるので、とりあえずでも構いませんが、次のステップのパーツのプレビューに影響があるので、ある程度イメージに近いフレームをおすすめします。
- フレームを選ぶと自動でパーツページに移動します。
使いたいパーツをどんどん選んでみましょう。
- パーツを選ぶと、ボタンの色が変わり、ウィンドウ右下のパネル（マイテンプレ構成）に選んだパーツが追加されます。
-
パネル内でパーツのドラッグ入れ替えもできます。
- 「プレビュー」ボタンを押すと、構築中のテンプレートをプレビューできます。
- 最後に「ZIPダウンロード」ボタンを押してテンプレートをDLして下さい。
「構成を保存」ボタンを押すと、設定ファイルのjsonをDLできます。後日、編集する可能性がある場合はDLしておいて下さい。jsonは最初のフレームorパーツ選択ボタンの下の「保存ファイルから続きを編集」からアップロードできます。
「プレビュー：」の横の「トップページ」と「下層ページ」をクリックで切り替えできます。選んだページがプレビュー時とDLファイルに適用されます。
パーツを使うメリット
必要な部分だけ使える
サイト全体を入れ替えなくても、必要な箇所だけ差し替えできます。メイン画像だけ変更したい、CTAだけ追加したい、FAQだけ入れたい、といった使い方にも向いています。
制作時間を短縮しやすい
よく使うデザインを毎回ゼロから作らずに済むため、Web制作の時短につながります。特に、LP制作や小規模な企業サイト、既存サイトの部分改修にも便利です。
自分好みに調整しやすい
HTML/CSSベースなので、色・余白・文字サイズ・画像などを自分で変更しやすいのも魅力です。cssにはコメントも入っているのでカスタマイズもしやすいと思います。
再利用しやすい
一度使い方を覚えれば、別のページや別案件でも流用しやすくなります。こうした再利用しやすい部品は、制作の現場では「UIパーツ」や「コンポーネント」と呼ばれることもありますが、Template Partyではわかりやすく「パーツ」としてまとめています。
色と画像を入れ替えるだけでも違った印象に
同じフレームを使った場合でも、画像とテーマカラーを変更するだけで違った印象になります。
theme.cssの冒頭で一括カラーチェンジができます。（以下は、例。）
もちろん、各パーツ単位で、直接カラーコード指定をしてもOK。
使いこなしアドバイス
アイコンを変更したい場合（Font Awesome）
html側にi要素で書かれているアイコンは、Font Awesomeです。変更したい場合は、こちらのマニュアルをご覧下さい。
デフォルトのパララックス効果の変更（.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」の行に設定したスタイルを追加して下さい。
section同士の隙間をリセットしたい場合
使うパーツによっては、セクション間の微妙な隙間が気になる場合があると思います。
その場合、1つ目のsectionに.mb0を追加して下さい。（すでにclassがあるなら半角スペースを入れて追加）
<section class="mb0">
別のフレームに変更したい場合
ある程度作った段階で別フレームにしたくなった場合は、元ファイルのバックアップをとった上で以下手順を行ってみて下さい。
- css/parts.cssとjs/parts.jsを、新しいフレームに上書き。（新しいフレームは、デフォルトでこれらの中身は空です）
- html側から、パーツでコピペしたhtmlブロックだけを新しいフレームにコピペしなおして下さい。基本的にはmain内と、その他はフッターブロックです。
- ご自身で準備された画像など、新しいフレームにないものも移動しておいて下さい。フォームも使っている場合は、フォームプログラム（form.php）も忘れず。
配布中のテンプレートにパーツを使う場合の注意点
パーツと相性の悪いテンプレートもあります。
サポート掲示板からご質問頂く事で解決する場合もありますが、100%対応できる保証はないのでご了承下さい。
フレームは使わず、パーツページに移動して下さい
パーツに移動したら、以下の「コード本体」のリンクボタンをクリックします。
クリックでパソコンに一時保存されますので、それを直接コードをお手元のテンプレに貼り付けて下さい。
jsボタンがあるパーツを使う場合、以下の点を確認して下さい。
1. htmlの下部にjQueryとinviewとmain.jsの読み込みがあるか
htmlを開き、下の方にjQueryとinviewとmain.jsの読み込みがあるか確認します。
2. 読み込みがない場合
読み込みがない場合は、以下を行って下さい。
- フレーム選択のページから「frame」をダウンロード。
- ダウンロードしたindex.htmlを開き、html下部のコードをコピー。
- 配布中のテンプレートのhtmlを開いてコピーしておいたコードを貼り付けて下さい。
- 最後に「frame」に入っているjsフォルダごとお手元のテンプレートに移動しておいて下さい。
3. jQueryの読み込みがあり、かつ、すでにmain.jsがお手元のテンプレートにある場合
main.jsを上書きしてしまうと不具合が出るので、その場合は以下を行って下さい。
- フレーム選択のページから「frame」をダウンロード。
- 解凍し、jsフォルダの中にあるmain.jsを別名（例えばmain-parts.js）に変更。
- 配布中のテンプレートのjsフォルダに移動。
- 配布中のテンプレートの下部にmain.jsの読み込みがあるので、その下にでもmain-parts.jsの読み込みを追加して下さい。
色、余白などが反映されない場合
コピペしたcssコードに、
var
で始まる行がないか確認して下さい。varがある場合、直接カラーコードもしくはpxなどのサイズ指定に変更して下さい。
例えば、
color: var(--accent-color);
とある場合は、
color: #ff0000;
に変更するなどです。
横幅いっぱいに使う汎用classの「.bleed-x-parts」
このclassも、パーツ専用のスタイルです。
パーツ専用の土台フレーム（またはパーツで作った完成テンプレート品）を選ばないと、使えないので注意して下さい。