TempNate - HTML・CSSテンプレート＆ホームページ作成素材の無料配布
FAQ（よくある質問と回答）
●テンプレート配布でよくあるご質問
ホームページビルダー１５で開いた際に文字化けする場合の対処法★
◆ライセンス登録サービスについて （design by の著作権表示削除サービス）
◆代行制作で使用したいです。著作権表示を外さない場合もライセンス申請は必要？
◆WordPressに対応しているテンプレートはどこにありますか？
TempNate（テンプネート）と読みます。当サイトではHTML/CSSデザインテンプレートを無料配布しています。
CSSテンプレートはサイト名や内容を変更するだけで、個人からグループ、企業サイトまで幅広く利用できます。
W3CによるWeb標準のチェックを通過した素材で、デザイン性・SEO（検索エンジン対策）の観点・カスタマイズ性などを考えて設計してあります。 実用的でシンプルなCSSデザインのため、アクセスアップ、SEOにも有効です。
カスタマイズ・商用利用は自由、使用報告は任意です。
はい。そのままダウンロードして利用いただけます。
メンバー登録をしていただいた方には、最新情報をメールさせていただく事があります。また、カスタマイズ制作などもうけたまわっておりますので、気軽にご連絡ください。
まずはテンプレートページに行っていただき、各テンプレートのページにある、DOWNLOADをクリックすれば、ZIPファイルがダウンロードできます。
ダウンロードしたファイルは、フリーソフトである解凍ソフトの Lhaca などをダウンロードして、ZIPファイルを解凍して下さい。ZIPファイルとは、圧縮されたファイルの事です。一括して容量を軽くするためにファイルを圧縮しています。デスクトップなどにダウンロードされますので、通常はダブルクリックすれば解凍できます。
ZIPファイルを解凍すれば、フォルダが出てきます。中身は「index.html」「style.css」「imgフォルダ」などです。
基本的には３つのファイルが入っています。
「index.html」 ・・・ ホームページのトップページにあたるファイルです。
「style.css」 ・・・ スタイルシート。こちらにて背景画像などを指定しています。このスタイルシート・ファイルを変更するだけで、ブログの様に手軽にデザインを変更する事ができます。
「imgフォルダ」 ・・・ 画像が入っているフォルダです。背景、ヘッダー、タイトルバーなどの画像が入っています。
各素材ごとに違いますが、トップ上画像のサイズは基本的に、横幅780px～縦幅100pxになります。
header.jpg ・・・ 780ピクセル × 120ピクセル （head-leaf・テンプレートの場合）
header.jpg ・・・ 750ピクセル × 80ピクセル （head-iblue・テンプレートの場合）
header.jpg ・・・ 800ピクセル × 100ピクセル （FineBiz・テンプレートの場合）
main_photo.jpg ・・・ 780ピクセル × 100ピクセル （Style・テンプレートの場合）
使用報告は任意です。ご連絡いただけるとうれしいです。
著作権表示のテキストの場所は自由です。文字の色も変えていただけます。
ただし、極端に小さな文字にする、背景と同じ色にして見えないようにするのは禁止です。どうかご了承ください。
また、TempNateのホームページテンプレートでは、企業やお店のホームページを低コストで運営したい！という方のために、「design by tempnate」の著作権表示を削除して、オリジナルのホームページとして運営できるサービスを開始しました。
ぜひ一度ご検討いただければ幸いです。
◆著作権表示の削除サービスについて
カスタマイズは自由です。「 design: TempNate 」という当サイトのテキストの著作権表示以外はすべてカスタマイズできます。
サイト名、タイトルなどすべてカスタマイズできます。コピーライト部分もあなたのサイト名にしてください。
ちなみに著作権表示のテキストの場所は自由です。文字の色も変えていただけます。極端に小さな文字にする、背景と同じ色にして見えないようにするのは禁止です。どうかご了承ください。
新しいページを作成する方法ですが、
例えば、用語集ページを追加して作成する場合、
index.htmlなどのファイルをコピーして、 word.html に名前を変更して、作成していってください。
ファイル名を変更する方法ですが、まずはファイルを選択して、マウスの右クリックをして、「名前を変更」をクリックすると、名前を編集できます。
基本的には、テンプレートが入っているフォルダの中にあるindexなどのファイルをコピーして、手作業で作成＆複製していただく形になります。
ビルダーなどのホームページソフトなどで、サイトのタイトル、本文内容などを変更して作成していってください。
次に、ページを作成いただいた後は、そのページにアクセスするためのリンクを、全ページに掲載しましょう。
これがないと、せっかく作ったページにアクセスができません。
トップページのサイドメニューなどに、新しくリンクを掲載する（メニュー項目を追加する）事で、用語集ページにアクセスできる様になります。
下記の様な感じです。↓
<div class="menulist">
<h2>サイトメニュー</h2>
<a href="index.html">ホーム</a>
<a href="profile.html">プロフィール</a>
<a href="customer.html">お客様の声</a>
<a href="nagare.html">施術の流れ</a>
<a href="ryoukinn2.html">施術料金</a>
<a href="access-map.html">アクセスマップ</a>
<a href="qa.html">Ｑ＆Ａ</a>
<a href="word.html">用語集</a>
</div>
新しくページを追加する際は、この様に、ページをコピーするなどして、作成していただいて、
トップページのサイドメニューなどから、新しく作成したページへのリンクを掲載してみてください。
少しでも参考になりましたら幸いです。
よろしくお願いいたします。
テンプレート素材の、index.html などで、# マークがあります。
これは、仮のリンク先のためのマークです。
こちらには、あなたのサイトのURLや、link.html などへのリンクに変えてください。
●編集前
<a href="#">リンクページ</a>
↓
●編集後
<a href="link.html">リンクページ</a>
本文で、テキスト情報を記載していく際に、きれいに改行する方法です。
改行するには、主に２つの方法があります。
1. <p> ～ </p> という、本文のタグを入れる2. <br /> を入れる基本的に、文章は、
<p> ～ </p>で囲んでいただければ、きれいに改行されます。
文章１つずつに入る感じです。
↓↓↓↓↓↓↓ サンプル
<p>この様に、文章１つ１つに入れてください。</p>
<p>これにより、改行されます。</p>ちなみに、
ホームページビルダーなどのソフトを使用すると、文章を入力すると、自動的に pタグを入れてくれます。
もし、手作業の場合は、本文の前に p を入れてください。
p がない状態ですと、改行するには、 br という改行タグが必要になります。
ですが、ブラウザのバージョンによっては、空白が大きくなってしまいますので、おすすめできません。
どうぞ、よろしくお願いいたします。
画像の掲載時の注意点です。
当サイトでテンプレート素材をダウンロードしていただき、その中の画像を、あなたが利用されているサーバーにアップ（転送）して、利用いただく形でしたら、問題ありません。
直リンクとは、TempNateのサーバーにアップしている、画像のURLアドレスを、そのまま使用されるという行為になります。
この場合は、私たちのサーバーに負荷がかかるので、禁止させていただいております。
どうぞよろしくお願いいたします。
「お問い合わせ」などのサブページを作る方法をご紹介します。
●ファイルの作成方法
まずは、index.html を編集して、トップページを完成させます。
完成した index.html をデスクトップなどに、コピーしておいて、ファイル名を 「mail」 などに変えます。
すると、新しく、mail.html ファイルができます。この時点では、中身は、「index」と同じです。
●コンテンツ中身の作成方法
次に、ダウンロードした素材のフォルダの中に、「contact」などのファイルがありますが、このファイルの、コンテンツ部分だけを使用したいので、メモ帳や、ホームページビルダーなどでファイルを開きます。
その中の、htmlソースの中に、
<!-- メインコンテンツ --!><!-- メインコンテンツ 終わり --!>というのがあります。
この部分をコピーして、先ほど作成した、mail.html の、
<!-- メインコンテンツ --!>から
<!-- メインコンテンツ 終わり --!>に貼り付けて、メインコンテンツの中身を入れ替えてください。
これで、mail.html が完成します。
この流れで、リンクページなどを作成してみてください。
サイドなどのエリアにバナー画像を配置する方法です。
当テンプレートのサイドエリアの形式は、２種類あります。menulist と menu_free です。
・メニューリスト版 （menulist）
・フリースペース版 （menu_free）
画像バナーを貼り付けたい場合は、
htmlソースの
<div class="menulist">
という所を、
<div class="menu_free">
にしてみてください。
メニューリストなどのリンクの形式は、背景に→の画像が出る形に指定しています。
こちらを表示したくない場合は、menu_free というフリースペースをコピーして、作成していってみてください。
●修正前
<div class="menulist">
<H2>関連団体のサイト</H2>
●修正後
<div class="menu_free">
<H2>関連団体のサイト</H2>
フリーエリアの menu_free にすることで、バナー画像が崩れずに表示されます。
少しでも参考になりましたら幸いです。
CSSでは、サイト全体を印刷しようとした時に、印刷プレビューをすると、きれいに表示されない場合があります。
例えば、IE8で、フッターがサイドバーの下に回り込んでしまうなどです。
■IE7や、Firefoxで印刷プレビューをきれいに表示したい場合
この場合は、
#container の width 指定を明記すると、印刷プレビューできれいに表示されます。
/*---------- コンテンツ ----------*/
#container {
width: 780px; ←こちらです
margin: 0px;
padding: 6px;
background-color: #ffffff;
}
お手数ですが、よろしくお願いいたします。
■IE8できれいに表示したい場合
この場合は、
#container に overflow: hidden; と width 指定を明記すると、印刷プレビューできれいに表示されます。
/*---------- コンテンツ ----------*/
#container {
width: 780px; ←こちらです
overflow: hidden; ←こちらです
margin: 0px;
padding: 6px;
background-color: #ffffff;
}
（注意： この方法では、Firefoxなどで、印刷プレビュー時に、1ページ目に、空白ができてしまう事があります）
お手数ですが、よろしくお願いいたします。
■フッターを印刷時に非表示にする
フッターが回り込んでしまうので、フッターを印刷時に表示しないようにする方法もあります。
この方法では、印刷用のスタイルシートを作成し、微調整しておきます。印刷のときは、そちらのスタイルシートが反映されるようにする、という設定です。
1. まず、 print.css というスタイルシートを新規作成します。
2. print.css は、 style.css の内容をそのままコピーして作成します。
3. print.css のフッター部分を変更します。これは、印刷時にフッター部分を表示しなくするため、 display:none; を使用します。
/*---------- フッター ----------*/
#footer {
display:none;
}
#footer a {
color: #333333;
font-size: 12px;
}
#footer a:hover {
color: #333333;
}
#credit {
display:none;
}
4. index.htmlの外部スタイルシート表示のlink rel の所に、以下のソースをのせます
5. これで、印刷プレビューをすると、印刷用のスタイルシート（ print.css ）が反映されて、フッターが表示されなくなります。
お手数ですが、参考にしてみてください。
●その他の設定については、下記サイトをご参照いただければ幸いです。
All About 印刷時専用のスタイルシートを作る
IE6で、サイドコンテンツの、最後の文字が改行されて、重複して表示される事があります。
１文字だけ表示されていて、変な感じです。
これは、これは、IE6にて、最後の文字が改行されて、重複して表示されるバグだそうです。
最後に、半角などのスペースを入れると解消されます。
（または、空白の画像を入れるなどの方法があります）
<h2>見出し１</h2>
<p>あいうえおかきくけこ </p>
↑ この様に、半角スペースを入れてみてください。
お手数ですが、よろしくお願いいたします。
Q. ホームページビルダー１５で開いた際に文字化けする場合の対処法★
ホームページビルダー１５などのバージョンによって、ファイルを開いた際に、文字化けする事があります。もし文字化けする場合は、スタイルシートのstyle.cssというファイルを開いて、Verdana というフォントを削除してみてください。
ダブルクリック、または、Windowsなどに付属されている「メモ帳」などのソフトで開いて、下記の様に修正してみてください。
●修正前 （２行目の font-family の Verdanaを削除前）
●修正後 （２行目の font-family の Verdanaを削除後）
この様に、Verdanaというフォントを削除してみてください。行っていただく事は、以上になります。
これにより、ホームページビルダー15以降で開いた際に文字化けされずに表示されます。
お手数ですが、よろしくお願いいたします。
ホームページビルダーを使用した際に、「正しくないパス名が指定されています。」といった表示が出てしまう場合があります。
「index.htnl」などのファイルを、一度デスクトップにコピー＆ペーストしてから、ホームページビルダーで上書きすると無事保存できます。
または、Windows Vistaをご利用の場合は、「プレビュー・ペイン」という機能をご利用の方で、フォルダから index.html を開いた場合は「正しくないパス名が指定されています。」といった表示が出てしまいます。
「プレビュー・ペイン」はファイルをクリックするだけで中身がわかる便利な機能なんですが、もしindex.htmlなどのファイルの中身がプレビュー表示されていると、上書き保存ができません。
フォルダの中の index.html 以外のファイルを選択状態にするなどして、プレビューを解除すれば、ホームページビルダーで上書き保存できます
Q. ホームページビルダー「ページ編集」でメニューがずれる件
ホームページビルダーでindex.htmlなどのファイルを「ページ編集」で開いた時に、メニューなどが下にずれてしまう場合があります。これは、（！）←のビックリマークを削除していただければ、下にずれないで表示されます。
この（！）マークは、コメントアウトという、HTMLというプログラミング言語の中に、わかりいやすい目印としてつけているものです。
なので、なくても構いませんので、メニュー部分にある（！）（！）の２つを削除してみてください。
●詳細について
ホームページビルダー（ホームページ作成ソフト）を利用する場合
ホームページビルダーを使用すれば、ホームページの編集が手軽に行えます。
ですが、ページが増えてくると、１ページごとの編集には手作業のため、時間が必要になります。
そこで、ホームページビルダーでは、外部のテンプレートを利用されている場合、「共通部分の登録」の代わりの方法としまして、HTMLの部分を一括置換えする方法があります。
これは「サイト内 置換」という方法です。この方法でテンプレートフォルダ内のファイルを一括で修正できます。
下記にて詳しく解説しておりますので、ご参照ください。
ホームページビルダーでヘッダーHTMLなどを一括置換する方法（応用編）
Q. ホームページビルダーで編集した際に左寄せで表示される件
ホームページビルダーでテンプレート素材を編集した際に、一番上の「DOCTYPE宣言」というHTMLソースが、短い状態で上書きで保存されてしまいます。↓ 上書きされる箇所（一番上のhtmlソース）
この様な形での保存になってしまった方は注意してみてください。これだと、センター配置になりません。
これは、HTMLソースを開いた時に、一番上のDOCTYPE宣言という、いわば使用するHTMLやXHTMLのバージョンを示すためのタグです。これが短い形で上書き保存されてしまいます。
この状態だと、Internet Explorerなどのブラウザで、ページのレイアウト表示が左寄りに表示されてしまいます。
ホームページビルダーでは、デフォルトでは下記のようなHTMLタグで保存される設定になっています。
なので、このDOCTYPE宣言の基本設定を変更していただく必要があります。そうしないと、毎回保存するたびに、すべてのページが上記タグの様な形で保存されてしまいます。
●ホームページビルダーのDOCTYPE設定を変更する方法
1. まず、ホームページビルダーにて、「ツール」→「オプション」の「ファイル」タブを表示してください。
2. 次に、その中の「DOCTYPEを出力する」にチェックを入れてください。
3. そして、DOCTYPEを下記に変更してください。
上記の方法では解決できない、という場合は、検索エンジンのGoogleにて、「ホームページビルダー DOCTYPE」のキーワードで検索で調べてみてください。いくつかの関連ページが表示されると思います。これらのページを一度参照してみてください。
●手打ちでDOCTYPEを変更する場合
メモ帳などの付属ソフトでファイルを開くことができます。また、ホームページビルダーでは「htmlソースを表示する」などから編集できます。
そして、下記のソースをすべてのページの一番上にコピー＆ペーストして、上書き保存してください。
以前から、同じ問い合わせがいくつかありましたが、これらの方法で解決できているとの事でした。
同じ症状で困っているといういう方は、ぜひ一度手直ししてみてください！
よろしくお願いいたします。
●詳細について
ホームページビルダー（ホームページ作成ソフト）を利用する場合
ホームページビルダーを使用されている方で、Valueシリーズなど、「会社情報」ページにある、表を削除したい時はありませんか？
消したくても、「Deleat」キーなどで削除できない所があります。
そこで今回は、マウスの右クリックで、表（テーブル）を削除する方法をご紹介いたします。
●手順
1. まず、削除したいページをホームページビルダーで開いてください
例えば、Valueシリーズなどの、「会社情報」ページにある、表を削除したい場合は、（profile.html）をホームページビルダーで開いてください
2. 削除したい表（テーブル）をクリックして選択してください
3. マウスを右クリックしてください
すると、「表の削除」という項目がありますので、クリックすると、表が削除できます
編集していて、「Deleat」キーなどで削除できない場合は、右クリックして削除できますので、ぜひ一度活用してみてください。
◆ライセンス登録サービスについて （design by の著作権表示削除サービス）
TempNateのホームページテンプレートでは、企業やお店のホームページを低コストで運営したい！という方のために、「design by tempnate」の著作権表示を削除して、オリジナルのホームページとして運営できるサービスを開始しました。さらに、知人のHPを代行で制作するため、テンプレートを使用したいという場合、知人のHPを格安で作成してあげる事ができます。
そして企業、個人、Web制作、SEOサービスなどを行っている事業者さまは、仕事、または副業として、ホームページ制作の代行ができます。
ライセンス登録をしていただいた方は、ホームページの下部にある、著作権表示を全ページ削除していただけます。独自のサイトとして、実用的にご利用いただけます。
メリットとしては、低コストで、オリジナルなホームページが作成できます。
サイトの利用の申請は、その都度、または毎月１回まとめてでも可能です。
詳しくは、下記をご覧ください。よろしくお願いいたします。
◆著作権表示削除サービスついて
★領収書についてですが、大変申し訳ありませんが、ネットでの領収証の発行は行っておりません。銀行などでお振込みいただいた際の振込明細書にて、記録が残りますので、そちらを領収書の代わりにしていただけます。
ご利用ありがとうございます。
２回目以降（２サイト目以降）は、
申請フォームからご連絡いただければ幸いです。
どうぞ、よろしくお願いいたします。
テンプレート素材の、メニューやサイドバー、背景、リンク文字、などのカラーを、ご希望の色に変更する、カスタマイズサービスになります。
例： 「会社のメインカラーが赤色で、イメージに合うテンプレートがなかった場合など」
★1テンプレートでの費用： 4,000円
下記の項目をコピーして、お問い合わせフォームに貼り付けて、ご連絡ください。どうぞよろしくお願いいたします。
-------------------------------------------------------
■[表題] カラー変更サービスの件について
●メッセージ： 「 」
●テンプレート名： 「 」
●希望する色： 「 」
●参考サイトURLなど： 「 」
◆代行制作で使用したいです。著作権表示を外さない場合もライセンス申請は必要？
ありがとうございます。大変恐縮ですが、金銭授与のある代行制作でご利用いただいた場合は、必ずライセンス申請（4,000円）をいただいております。
「design by tempnate」の著作テキストを削除しない代行制作の場合もライセンス申請（4,000円）をお願いします。
テンプレート素材の著作権表示削除サービス
ご了承いただければ幸いです！
また、できる限りのサポートをさせていただきたく思います ^ ^
●下記ページにも記載しております。
Web制作・事業者向けサービス - ホームページ制作の代行
不明な点などありましたら、ご連絡いただければ幸いです。
今後ともどうぞよろしくお願い致します！
ご自身でホームページが設置できない、または時間がない、ホームページ制作を格安で依頼したい、というご要望にはお答えさせていただいております。
希望されるユーザー様は、一度 格安ホームページ制作＆リニューアル代行サービス から、お気軽にご相談ください。宜しくお願いいたします。
◆WordPressに対応しているテンプレートはどこにありますか？
WordPress用のテンプレートですが、現在は無料で掲載はしておりません。お問い合わせいただきました方に、素材をWordPressテンプレート化して、お渡ししております。
ちなみに、無料でご利用いただける素材を、下記のサイトにて掲載しております。
一度お試しいただければ幸いです。
WP-TempNate
https://tempnate.com/wordpress/
もし、ご活用いただける場合は、
TempNateのお好きなテンプレートを、WordPress化してお渡しさせていただきます。素材名を教えていただければ幸いです。（「liquid wide build」など）
価格についてですが、有償（1点 5,000円）となっております。
こちらの素材を活用いただくことでサイトの管理＆更新や、記事の更新が容易になります。
一度ご検討いただければ幸いです。どうぞよろしくお願い致します。
当テンプレート素材をパートナーとして使用していただける場合は、お問い合わせからご連絡くださいませ。
内容を確認して、ご連絡させていただきます。どうぞよろしくお願いいたします。
●お問い合わせ例
アメブロの様な、ブログポータルの、ホームページ版サービスをやりたいので、テンプレートを使用したい！
こういった場合は、ライセンス料 （使用数による割引あり） が必要になります。どうぞ、ご検討いただければ幸いです。
[ よくある質問トップ ]
著作権表示を削除できます
W3Cについて
Web標準を考慮した素材です。