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

メニューを表示

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

テンプレート

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

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

マニュアルの読み方Manual

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

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

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

確認事項・注意事項など

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

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

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

キャプチャ

【1】サイト名部分の編集

<header id="header" role="banner">
<div class="inner">
<h1>Lorem ipsum dolor amet consectetur</h1>
<h2><a href="index.html">Sample Company</a></h2>
</div>
</header>

【2】ヘッダーナビゲーションメニュー部分の編集

※liが入れ子になっている部分がプルダウンになっています。

<div class="panel">
<ul>
<li><a href="subpage.html"><strong>当社の経営理念</strong><span>Concept</span></a></li>
<li>
<a href="subpage.html"><strong>お客様の声</strong><span>Customer</span></a>
<ul class="sub-menu">
<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>
</li>
<li>
<a href="subpage.html"><strong>採用情報</strong><span>Recruit</span></a>
<ul class="sub-menu">
<li><a href="subpage.html">2010年度採用情報</a></li>
<li><a href="subpage.html">2011年度採用情報</a></li>
<li><a href="subpage.html">2012年度採用情報</a></li>
</ul>
</li>
<li><a href="subpage.html"><strong>ごあいさつ</strong><span>Greeting</span></a></li>
<li><a href="subpage.html"><strong>お問い合わせ</strong><span>Contact</span></a></li>
<li><a href="subpage.html"><strong>会社概要</strong><span>Company</span></a></li>
</ul>
</div>

【3】メインイメージ部分の編集

<div id="mainImg">
<img src="images/banners/mainImg.jpg">
</div>

【4】画像つきコンテンツ部分の編集

<div id="content">
<section>
<h2 class="title"><span>当社のビジネスを紹介します</span></h2>
<ul class="post">
<li>
<img src="images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま#8230; </p>
</li>
<li>
<img src="images/banners/eyecatch2.jpg"><h3><a href="subpage.html">会員数10万人突破記念</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま#8230; </p>
</li>
<li>
<img src="images/banners/eyecatch3.jpg"><h3><a href="subpage.html">ecoキャンペーン</a></h3><p>最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま#8230; </p>
</li>
<li>
<img src="images/banners/eyecatch4.jpg"><h3><a href="subpage.html">新講座を開講しました</a></h3><p>新講座を開講しましたホームページサンプル株式会社では最新を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま#8230; </p>
</li>
</ul>
</section>
</div>

【5】サイドメニュー部分の編集

<aside id="sidebar">
<section class="widgetInfo">
<div class="newsTitle">
<h3 class="title"><span>お知らせ</span></h3>
<p><a href="subpage.html">一覧</a>
</div>
<div class="post news">
<p><a href="subpage.html"><time>2012/11/30</time><span>環境への取り組み</span></a>
<p><a href="subpage.html"><time>2012/11/15</time><span>新サービスを開始</span></a>
<p><a href="subpage.html"><time>2012/11/02</time><span>リニューアル</span></a>
<p><a href="subpage.html"><time>2012/10/30</time><span>環境への取り組み</span></a>
<p><a href="subpage.html"><time>2012/09/13</time><span>新講座を開講しました</span></a>
</div>
</section>
<section class="widget">
<h3><span>新講座を開講しました</span></h3>
<ul>
<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>
</section>
</aside>

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

<p id="copyright">Copyright &copy; Sample Company All rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a>

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

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

キャプチャ

【1】サイト名部分の編集

<header id="header" role="banner">
<div class="inner">
<h1>Lorem ipsum dolor amet consectetur</h1>
<h2><a href="index.html">Sample Company</a></h2>
</div>
</header>

【2】ヘッダーナビゲーションメニュー部分の編集

※liが入れ子になっている部分がプルダウンになっています。

<div class="panel">
<ul>
<li><a href="subpage.html"><strong>当社の経営理念</strong><span>Concept</span></a></li>
<li>
<a href="subpage.html"><strong>お客様の声</strong><span>Customer</span></a>
<ul class="sub-menu">
<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>
</li>
<li>
<a href="subpage.html"><strong>採用情報</strong><span>Recruit</span></a>
<ul class="sub-menu">
<li><a href="subpage.html">2010年度採用情報</a></li>
<li><a href="subpage.html">2011年度採用情報</a></li>
<li><a href="subpage.html">2012年度採用情報</a></li>
</ul>
</li>
<li><a href="subpage.html"><strong>ごあいさつ</strong><span>Greeting</span></a></li>
<li><a href="subpage.html"><strong>お問い合わせ</strong><span>Contact</span></a></li>
<li><a href="subpage.html"><strong>会社概要</strong><span>Company</span></a></li>
</ul>
</div>

【3】メインイメージ部分の編集

<div id="mainImg">
<img src="images/banners/mainImg.jpg">
</div>

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

<div id="content">
<section>
<article class="content">
<header>
<h2 class="title first"><span>あいさつ</span></h2>
</header>
<div class="post">
<p><img src="images/banners/sample1.jpg" alt="" title="sample1" width="231" height="143" class="alignleft size-full wp-image-9" />ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
<p>革新的な技術で世の中を革新的な技術で世の中を動かす企業を目指します。革新的な技術で世の中を革新的な技術で世の中を動かす企業を目指します。</p>
<h3>ホームページサンプル株式会社</h3>
<p><img src="images/banners/sample2.jpg" alt="" title="sample2" width="231" height="143" class="alignright size-full wp-image-10" />ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では。</p>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では。</p>
<table class="statsDay">
<tbody>
<tr>
<th>会社名</th>
<td>ホームページサンプル株式会社(英語表記 Homepage sample Inc.)</td>
</tr>
<tr>
<th>設立</th>
<td>平成10年1月10日</td>
</tr>
<tr>
<th>住所</th>
<td>東京本社:〒012-3456 見本県見本市サンプル1−2<br />海外拠点:〒012-3456 見本県見本市サンプル1−2</td>
</tr>
<tr>
<th>電話番号/FAX</th>
<td>TEL:0123-XXX-XXXX / FAX:0123-XXX-XXXX</td>
</tr>
<tr>
<th>事業内容</th>
<td>IT・マーケティング・福祉など</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
</div><!– / content –>

【5】サイドメニュー部分の編集

<aside id="sidebar">
<section class="widgetInfo">
<div class="newsTitle">
<h3 class="title"><span>お知らせ</span></h3>
<p><a href="subpage.html">一覧</a>
</div>
<div class="post news">
<p><a href="subpage.html"><time>2012/11/30</time><span>環境への取り組み</span></a>
<p><a href="subpage.html"><time>2012/11/15</time><span>新サービスを開始</span></a>
<p><a href="subpage.html"><time>2012/11/02</time><span>リニューアル</span></a>
<p><a href="subpage.html"><time>2012/10/30</time><span>環境への取り組み</span></a>
<p><a href="subpage.html"><time>2012/09/13</time><span>新講座を開講しました</span></a>
</div>
</section>
<section class="widget">
<h3><span>新講座を開講しました</span></h3>
<ul>
<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>
</section>
</aside>

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

<p id="copyright">Copyright &copy; Sample Company All rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a>

関連ページRelated page

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