<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>初心者向けホームページテンプレート tp_beginner6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ここにサイト説明を入れます">
<meta name="keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">
<link rel="stylesheet" href="css/style.css">
<script src="js/fixmenu_pagetop.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('a[href^="#"]').click(function() {
var speed = 800;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</head>
<body>
<header>
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="SAMPLE COMPANY"></a></h1>
<nav id="menubar">
<ul>
<li><a href="#new">What's New</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div id="container">
<div id="contents">
<section id="new">
<h2>What's New</h2>
<dl>
<dt>2020/09/27</dt>
<dd>初心者向け無料ホームページテンプレートtp_beginner6公開。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
</dl>
</section>
<!--/#new-->
<section id="company">
<h2>Company</h2>
<h3>会社概要</h3>
<table class="ta1">
<caption>見出しが必要であればここを使います</caption>
<tr>
<th>見出し</th>
<td>ここに説明など入れて下さい。サンプルテキスト。</td>
</tr>
<tr>
<th>見出し</th>
<td>ここに説明など入れて下さい。サンプルテキスト。</td>
</tr>
<tr>
<th>見出し</th>
<td>ここに説明など入れて下さい。サンプルテキスト。</td>
</tr>
<tr>
<th>見出し</th>
<td>ここに説明など入れて下さい。サンプルテキスト。</td>
</tr>
<tr>
<th>見出し</th>
<td>ここに説明など入れて下さい。サンプルテキスト。</td>
</tr>
<tr>
<th>見出し</th>
<td>ここに説明など入れて下さい。サンプルテキスト。</td>
</tr>
</table>
<h2>当テンプレートについて</h2>
<h3>当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です</h3>
<p>当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。<br>
古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（角を丸くする設定など）のでご注意下さい。</p>
<h3>各デバイスごとのレイアウトチェックは</h3>
<p>最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。</p>
<h3>各デバイス用のスタイル変更は</h3>
<p>cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。<br>
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。<br>
media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能です。</p>
<h2>当テンプレートの使い方</h2>
<h3>初心者向けマニュアル公開中</h3>
<p>テンプレートの編集方法、画像加工、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。<br>
<a href="https://template-party.com/file/" target="_blank">初心者向けマニュアルはこちら。</a></p>
<h3>titleタグ、copyright、metaタグ、他の設定</h3>
<p><strong class="color1">■titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。</strong><br>
まず、htmlソースが見れる状態にして、上から６行目あたりにある、<br>
<span class="look"><title>初心者向けホームページテンプレート tp_beginner6</title></span><br>
を編集しましょう。<br>
あなたのホームページ名が「SAMPLE COMPANY」だとすれば、<br>
<span class="look"><title>SAMPLE COMPANY</title></span><br>
とすればＯＫです。</p>
<p><strong class="color1">■copyrightを変更しましょう。</strong><br>
続いてhtmlの下の方にある、<br>
<span class="look">Copyright© SAMPLE COMPANY All Rights Reserved.</span><br>
の「SAMPLE COMPANY」部分もあなたのサイト名に変更します。</p>
<p><strong class="color1">■metaタグを変更しましょう。</strong><br>
htmlソースの上の方に、<br>
<span class="look">content="ここにサイト説明を入れます"</span><br>
という部分がありますので、あなたのサイト説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。</p>
<p>続いて、その下の行の<br>
<span class="look">content="キーワード１,キーワード２,～～～"</span><br>
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。</p>
<p><strong class="color1">■ロゴ画像のalt指定と、ロゴ画像本体も変更しましょう。</strong><br>
html側に<br>
<span class="look"><img src="images/logo.png" alt="SAMPLE COMPANY"></span><br>
となっている箇所があるので、ここのalt指定(SAMPLE COMPANY)もあなたのサイト名に変更しましょう。</p>
<p>ロゴ画像本体については、baseフォルダに文字なしの土台画像「logo.png」が入っているので、画像ソフトなど使ってあなたのサイト名を入れて、imagesフォルダに上書きしましょう。画像ソフトを使った画像の加工方法も<a href="https://template-party.com/file/" target="_blank">初心者向けマニュアル</a>で公開中です。<br>
このロゴ画像、HPで見るサイズよりかなり大きく感じると思いますが、高解像度の端末でピンボケさせない為に適当に大きくしてあります。</p>
<p>HPで見る場合のロゴのサイズは、cssフォルダのstyle.cssの<br>
<spna class="look">/*ヘッダー（ロゴが入った最上段のブロック）</spna><br>
のブロックで設定されている、<br>
<span class="look">header #logo img</span><br>
にあるwidthの値で変更可能です。css下の方に小さな端末用の設定がある場合もあるのでそちらも確認して下さい。</p>
<h3>リンクの指定方法</h3>
<p>当テンプレートは１枚のhtmlファイルで完結しています。メインメニューのリンクは、同一ページ内に対して行う必要があります。<br>
同一ページ内にリンクを設定したい場合、まず、リンク先の対象ブロックの先頭にid値をつけてあげます。</p>
<p>このテンプレートであれば、Companyのブロック冒頭に、<br>
<span class="look"><section <span class="color1">id="company"</span>></span><br>
とつけていますが、それです。idは同じ名前を付けられないので注意して下さい。</p>
<p>メニューの方は、<br>
<span class="look"><a href="<span class="color1">#company</span>">Company</a></span><br>
として下さい。ここの「#」と「id」は同じ意味で、メニューをクリックすると、id="company"とついた所に移動します。
</p>
<h3>最上部の大きなメイン画像を入れ替えたい場合（※tp_beginner6_photo1〜tp_beginner6_photo4の場合）</h3>
<p>入れ替えたい画像を用意し、画像ファイル名を「mainimg.jpg」にしてimagesフォルダに上書きして下さい。閲覧する画面サイズによって自動で切り取られますので、切り取られた際に配置がおかしく見えないような画像を使って下さい。</p>
<p>もし、画像の拡張子が「.jpg」になっていない場合、cssフォルダのstyle.cssの、<br>
<span class="look">header {</span><br>
の中にある、<br>
<span class="look">background: url(../images/mainimg.jpg)〜〜</span><br>
部分の「mainimg.jpg」部分を直接変更して下さい。
</p>
<h3>リストタグを使いたい場合の注意点</h3>
<p>そのままではリストマークが出ませんので、リストタグを使う場合は以下のようなスタイルを追加して下さい。</p>
<p><ul <span class="color1">class="disc"</span>><br>
<li>リストタグ</li><br>
<li>リストタグ</li><br>
<li>リストタグ</li><br>
</ul>
</p>
<p>↓出力例</p>
<ul class="disc">
<li>リストタグ</li>
<li>リストタグ</li>
<li>リストタグ</li>
</ul>
<ol>
<li>olタグはそのままででます。</li>
<li>olタグはそのままででます。</li>
<li>olタグはそのままででます。</li>
<li>olタグはそのままででます。</li>
</ol>
<h3>その他、テンプレートのカラーやデザイン変更などは</h3>
<p>cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。<br>
cssの解説は、「<span class="color1">/*</span>」と「<span class="color1">*/</span>」の間にコメントとして入れています。「<span class="color1">/*</span>」と「<span class="color1">*/</span>」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「<span class="color1">/*</span>」と「<span class="color1">*/</span>」含めて丸ごと削除して下さい。</p>
<h3>うまく編集できない場合は</h3>
<p><a href="https://template-party.com/bbs/">サポート掲示板</a>からご質問下さい。対応可能な範囲内でサポートしております。</p>
</section>
<!--/#company-->
<section id="service">
<h2>Service</h2>
<div class="list">
<img src="images/sample1.jpg" alt="">
<h4>ここの見出しのサイズは、cssフォルダのstyle.cssの「.list h4」で変更できます。</h4>
<p>左の画像の幅もstyle.cssの「.list img」のwidthの数字で変更できます。</p>
</div>
<div class="list">
<img src="images/sample2.jpg" alt="">
<h4>見出しを入れます。</h4>
<p>説明を入れます。</p>
</div>
<div class="list">
<img src="images/sample3.jpg" alt="">
<h4>見出しを入れます。</h4>
<p>説明を入れます。</p>
</div>
<div class="list">
<img src="images/sample4.jpg" alt="">
<h4>見出しを入れます。</h4>
<p>説明を入れます。</p>
</div>
<div class="list">
<img src="images/sample5.jpg" alt="">
<h4>見出しを入れます。</h4>
<p>説明を入れます。</p>
</div>
</section>
<!--/#service-->
<section id="contact">
<h2>Contact</h2>
<p class="c">お問い合わせは以下までお願い致します。</p>
<p class="c"><span class="big1">03-0000-0000</span><br>
定休日：毎週土日<br>
営業時間AM9:00〜PM6:00</p>
<p class="c"><img src="images/sample1.jpg" alt="" width="300"></p>
</section>
<!--/#contact-->
</div>
<!--/#contents-->
</div>
<!--/#container-->
<footer>
<small>Copyright© <a href="index.html">SAMPLE COMPANY</a> All Rights Reserved.</small>
<span class="pr">《<a href="https://template-party.com/" target="_blank">Web Design:Template-Party</a>》</span>
</footer>
<!--ページの上部に戻る「↑」ボタン-->
<p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>
</body>
</html>
