商用利用可能な無料ホームページテンプレート・無料WordPressテーマ

メニューを表示

テンプレートNo.001タイプのマニュアルManual

テンプレート

テンプレートNo.001タイプのカスタマイズ方法マニュアルです。このタイプと同レイアウトのテンプレートは、ほぼこちらのマニュアルと同じ操作方法となります。

このマニュアルが使用
できるテンプレート
Manual
001002003004005006007008009
010011012019020021061062063
073074075085086087

マニュアルの読み方Manual

青色の文字で示している部分はサイトの「テキスト(文章・文字)」にあたる部分です。自分のサイトの内容に合わせて編集を行なって下さい。

赤色の文字で示している部分はサイトの「画像」にあたる部分です。画像を変更される場合にはこの部分を編集して下さい。サンプルの画像をそのまま使用する場合には変更の必要はありません。

緑色の文字で示している部分はサイトの「リンク」にあたる部分です。作成したページにリンクするためにはこの部分を編集する必要があります。

確認事項・注意事項など

スマートフォン・タブレット端末向けのレイアウトは下記のマニュアルに従って作成して頂きますと、自動的に作成されます。個別にカスタマイズを行う必要はありません。カスタマイズが完了したらサーバーにアップロードして各端末でご確認下さい。

STEP.1 index.htmlを編集しようManual

サイトのトップページになる「index.html」のカスタマイズ方法です。

キャプチャ

【1】h1部分の編集

<h1>ホームページサンプル株式会社のサイトです</h1>

【2】サイト名部分の編集(「header」部分)

<!– ロゴ –>
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="60" height="60" alt="Sample site" /><p>Company Name<span>Your Company Slogan</span></p></a>
</div>
<!– / ロゴ –>

【3】連絡先部分の編集(「header」部分)

<!– 電話番号+受付時間 –>
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!– / 電話番号+受付時間 –>

【4】ヘッダーメニュー部分の編集

<!– メインナビゲーション –>
<nav id="mainNav">
<a class="menu" id="menu"><span>MENU</span></a>
<div class="panel">
<ul>
<li class="active"><a href="index.html"><strong>トップページ</strong><span>Top</span></a></li>
<li><a href="subpage.html"><strong>ごあいさつ</strong><span>Greeting</span></a></li>
<li><a href="subpage.html"><strong>サービス概要</strong><span>Service</span></a></li>
<li><a href="subpage.html"><strong>弊社の取り組み</strong><span>Approach</span></a></li>
<li><a href="subpage.html"><strong>会社情報</strong><span>Company</span></a></li>
<li class="last"><a href="subpage.html"><strong>お問い合わせ</strong><span>Contact</span></a></li>
</ul>
</div>
</nav>
<!– / メインナビゲーション –>

【5】メイン画像部分の編集

<!– メイン画像 –>
<div id="mainBanner">
<img src="images/mainImg.jpg" alt="">
<div class="slogan">
<h2>自然との調和を目指す企業です</h2>
<p>ホームページサンプルは自然との調和を目指します。<br>革新的な技術で世の中を動かす企業を目指します。</p>
</div>
</div>
<!– / メイン画像 –>

【6】3カラム部分の編集

<!– 3カラム –>
<section class="gridWrapper">
<article class="grid">
<div class="box">
<img src="images/top_m1.jpg" width="260" height="113" alt="">
<h3>自然との調和を目指す企業です</h3>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p class="readmore"><a href="subpage.html">詳細を確認する</a></p>
</div>
</article>
<article class="grid">
<div class="box">
<img src="images/top_m2.jpg" width="260" height="113" alt="">
<h3>自然との調和を目指す企業です</h3>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p class="readmore"><a href="subpage.html">詳細を確認する</a></p>
</div>
</article>
<article class="grid">
<div class="box">
<img src="images/top_m3.jpg" width="260" height="113" alt="">
<h3>自然との調和を目指す企業です</h3>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p class="readmore"><a href="subpage.html">詳細を確認する</a></p>
</div>
</article>
</section>
<!– / 3カラム –>

【7】サイト名部分の編集(「footer」部分)

<!– ロゴ –>
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="45" height="45" alt="Sample site"><p>Company Name<br><span>Your Company Slogan</span></p></a>
</div>
<!– / ロゴ –>

【8】連絡先部分の編集(「footer」部分)

<!– 電話番号+受付時間 –>
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!– / 電話番号+受付時間 –>

【9】フッターナビゲーション部分の編集

<!– 右側 ナビゲーション –>
<ul class="footnav">
<li><a href="subpage.html">eco・環境事業</a></li>
<li><a href="subpage.html">コンピュータ事業</a></li>
<li><a href="subpage.html">飲食店事業</a></li>
<li><a href="subpage.html">介護・医療事業</a></li>
<li><a href="subpage.html">ごあいさつ</a></li>
<li><a href="subpage.html">サービス概要</a></li>
<li><a href="subpage.html">会社情報</a></li>
<li><a href="subpage.html">お問い合わせ</a></li>
<li><a href="subpage.html">サイトマップ</a></li>
</ul>
<!– / 右側 ナビゲーション –>

【10】コピーライト部分の編集

<address>Copyright(c) 2013 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a></address>

STEP.2 subpage.htmlを編集しようManual

サイトの下層ページになる「subpage.html」のカスタマイズ方法です。このsubpage.htmlを複製して必要なページを作成して下さい。作成したページに各ページからリンクを掲載してサイトを作成して下さい。

キャプチャ

【1】h1部分の編集

<h1>ホームページサンプル株式会社のサイトです</h1>

【2】サイト名部分の編集(「header」部分)

<!– ロゴ –>
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="60" height="60" alt="Sample site" /><p>Company Name<span>Your Company Slogan</span></p></a>
</div>
<!– / ロゴ –>

【3】連絡先部分の編集(「header」部分)

<!– 電話番号+受付時間 –>
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!– / 電話番号+受付時間 –>

【4】ヘッダーメニュー部分の編集

<!– メインナビゲーション –>
<nav id="mainNav">
<a class="menu" id="menu"><span>MENU</span></a>
<div class="panel">
<ul>
<li class="active"><a href="index.html"><strong>トップページ</strong><span>Top</span></a></li>
<li><a href="subpage.html"><strong>ごあいさつ</strong><span>Greeting</span></a></li>
<li><a href="subpage.html"><strong>サービス概要</strong><span>Service</span></a></li>
<li><a href="subpage.html"><strong>弊社の取り組み</strong><span>Approach</span></a></li>
<li><a href="subpage.html"><strong>会社情報</strong><span>Company</span></a></li>
<li class="last"><a href="subpage.html"><strong>お問い合わせ</strong><span>Contact</span></a></li>
</ul>
</div>
</nav>
<!– / メインナビゲーション –>

【5】メイン画像部分の編集

<!– メイン画像 –>
<div id="mainBanner">
<img src="images/mainImg2.jpg" width="709" height="140" alt="">
<div class="slogan">
<h2>自然との調和を目指す企業です</h2>
<p>革新的な技術で世の中を動かす企業を目指します。</p>
</div>
</div>
<!– / メイン画像 –>

【6】コンテンツ部分の編集

<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article>
<img src="images/sample1.jpg" width="217" height="140" alt="" class="alignright border" />
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。</p>
</article>
</section>

<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article>
<img src="images/sample2.jpg" width="217" height="140" alt="" class="alignleft border" />
<p>革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。</p>
</article>
</section>

【7】表(会社概要)部分の編集

<section class="content">
<h3 class="heading">会社概要</h3>
<article>
<table class="table">
<tr>
<th>会社名</th>
<td>ホームページサンプル株式会社(英語表記 Homepage sample Inc.)</td>
</tr>
<tr>
<th>設立</th>
<td>平成10年1月10日</td>
</tr>
<tr>
<th>事業内容</th>
<td>IT・マーケティング・福祉など</td>
</tr>
<tr>
<th>住所</th>
<td>〒012-3456 見本県見本市サンプル1-2</td>
</tr>
<tr>
<th>電話番号</th>
<td>0123-4567-89012</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>info@example.com</td>
</tr>
</table>
</article>
</section>

【8】写真ギャラリー部分の編集

<section class="content" id="gallery">
<h3 class="heading">写真ギャラリー</h3>
<article>
<figure class="grid"><a href="subpage.html"><img src="images/gallery1.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery2.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery3.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery4.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery5.jpg" width="217" height="140" alt=""></a></figure>
<figure class="grid"><a href="subpage.html"><img src="images/gallery6.jpg" width="217" height="140" alt=""></a></figure>
</article>
</section>

【9】左メニューリスト部分の編集

<h3 class="heading">革新的な技術</h3>
<article>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</article>

<h3 class="heading">ホームページサンプル</h3>
<article>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</article>

【10】左メニューサムネイル付き部分の編集

<h3 class="heading">ホームページサンプル</h3>
<article>
<ul class="list">
<li><a href="subpage.html"><img src="images/thumb1.jpg" width="42" height="42" alt=""></a>サンプル株式会社では最新技術と自然との調和を目指します。</li>
<li><a href="subpage.html"><img src="images/thumb2.jpg" width="42" height="42" alt=""></a>サンプル株式会社では最新技術と自然との調和を目指します。</li>
<li><a href="subpage.html"><img src="images/thumb3.jpg" width="42" height="42" alt=""></a>サンプル株式会社では最新技術と自然との調和を目指します。</li>
</ul>
</article>

【11】左メニューバナー部分の編集

<p><a href="subpage.html"><img src="images/side_banner.jpg" width="187" height="63" alt="" class="border" /></a></p>

【12】サイト名部分の編集(「footer」部分)

<!– ロゴ –>
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="45" height="45" alt="Sample site"><p>Company Name<br><span>Your Company Slogan</span></p></a>
</div>
<!– / ロゴ –>

【13】連絡先部分の編集(「footer」部分)

<!– 電話番号+受付時間 –>
<div class="info">
<p class="tel"><span>電話:</span> 012-3456-7890</p>
<p class="open">受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<!– / 電話番号+受付時間 –>

【14】フッターナビゲーション部分の編集

<!– 右側 ナビゲーション –>
<ul class="footnav">
<li><a href="subpage.html">eco・環境事業</a></li>
<li><a href="subpage.html">コンピュータ事業</a></li>
<li><a href="subpage.html">飲食店事業</a></li>
<li><a href="subpage.html">介護・医療事業</a></li>
<li><a href="subpage.html">ごあいさつ</a></li>
<li><a href="subpage.html">サービス概要</a></li>
<li><a href="subpage.html">会社情報</a></li>
<li><a href="subpage.html">お問い合わせ</a></li>
<li><a href="subpage.html">サイトマップ</a></li>
</ul>
<!– / 右側 ナビゲーション –>

【15】コピーライト部分の編集

<address>Copyright(c) 2013 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a></address>

関連ページRelated page

白背景専門の無料写真素材サイト PAKUTASO/ぱくたそ-WEB制作デザイン向けの無料写真素材/商用可能
ページトップへ戻る