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

メニューを表示

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

テンプレート

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

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

マニュアルのもくじManual

マニュアルの読み方Manual

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

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

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

確認事項・注意事項など

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

index.htmlを編集しようManual

「index.html」のカスタマイズ方法です。

キャプチャ

【1】ロゴ・ナビゲーションメニュー部分の編集

<div id="headerWrap">
<h1><img src="images/logo.png" width="142" height="80" alt="logo"></h1>
<nav id="mainnav">
<p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
<div class="panel">
<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#sec01">MESSAGE</a></li>
<li><a href="#sec02">GALLERY</a></li>
<li><a href="#sec03">PROJECT</a></li>
<li><a href="#sec04">BRAND</a></li>
<li><a href="#sec05">COMPANY</a></li>
</ul>
</div>
</nav>
</div>

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

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

【3】MESSAGE部分の編集

<header>
<h2><span>Message</span></h2>
</header>
<div class="innerS">
ちかごろ世間で日本歴史の科学的研究ということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいうには及ばないはずである。上にいったようなことがらについては、曖昧あいまいな態度をとり、または真実でない知識を強いて注入していたことも、明かな事実である。
</div>

【4】GALLERY部分の編集

<header>
<h2><span>Gallery</span></h2>
</header>
<ul id="gallery">
<li><img src="images/photo01.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo02.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo03.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo04.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo05.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo06.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo07.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo08.jpg" width="426" height="418" alt=""></li>
<li><img src="images/photo09.jpg" width="426" height="418" alt=""></li>
</ul>

【5】PROJECT部分の編集

<header>
<h2><span>Project</span></h2>
</header>
<div class="innerS">
<img src="images/imgProject.jpg" width="726" height="333" alt="">
<p>ちかごろ世間で日本歴史の今さらこと新しくいうには科学的研究ということがしきりに叫ばれているということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいうには及ばないはずである。科学的研究というのが近代史学の学問的方法によるちかごろ世間で日本歴史の科学的研究及ばないはずである。</p>
</div>

【6】横一面写真部分の編集

<img src="images/subImg.jpg" alt="">

【7】BRANDの編集

<header>
<h2><span>Brand</span></h2>
</header>
<div class="inner">
<ul class="col3">
<li>
<p class="img"><img src="images/logo01.png" width="170" height="106" alt=""></p>
<p>科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
</li>
<li>
<p class="img"><img src="images/logo02.png" width="170" height="106" alt=""></p>
<p>日本歴史の科学的研究ということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば意義であるならば。</p>
</li>
<li>
<p class="img"><img src="images/logo03.png" width="170" height="106" alt=""></p>
<p>科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
</li>
</ul>
</div>

【8】背景画像+ロゴ部分の編集

<div id="sec04_02">
<p><img src="images/logoBrand.png" width="340" height="107" alt=""></p>
</div>

※背景画像(bgSec04.jpg)は「css」フォルダ内の「style.css」で指定しています。

【9】会社概要+グーグルマップ、コピーライト部分の編集

<section id="sec05">
<header>
<h2><span>Company</span></h2>
</header>
<div class="innerS">
<ul class="col2">
<li>
<p>〒103-1234<br>見本県見本市仮区見本町1-3-5</p>
<p>TEL 01234-567-8901</p>
<p>e-Mail info@example.com</p>
<p>営業時間 10:00〜20:00(水曜定休)</p>
<p>※都合により休業する場合がございます</p>
<p id="sns">
<a href="#" target="_blank"><img src="images/iconFb.png" width="20" height="20" alt="FB"></a>
<a href="#" target="_blank"><img src="images/iconTw.png" width="20" height="20"
alt="twitter"></a>
<a href="#" target="_blank"><img src="images/iconInsta.png" width="20" height="20"
alt="Instagram"></a>
<a href="#" target="_blank"><img src="images/iconYouTube.png" width="20" height="20" alt="You Tube"></a>
</p>
</li>
<li>
<div id="map">
<!– GOOGLE MAP –>
グーグルマップの埋め込みコードを入力
<!– // GOOGLE MAP –>
</div>
</li>
</ul>
</div>
</section>

<footer id="footer">
Copyright(c) 2016 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com" target="_blank">http://f-tpl.com</a>
</footer>

グーグルマップ部分はグーグルマップで発行される埋め込みコードを入力して下さい。

関連ページRelated page

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