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

メニューを表示

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

テンプレート

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

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

マニュアルのもくじManual

マニュアルの読み方Manual

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

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

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

確認事項・注意事項など

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

index.htmlを編集しようManual

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

キャプチャ

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

<div id="sidebarWrap">
<h1><img src="images/logo.png" width="87" height="25" 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">BRAND</a></li>
<li><a href="#sec04">PROJECT</a></li>
<li><a href="#sec05">COMPANY</a></li>
</ul>
<ul id="sns">
<li><a href="#" target="_blank"><img src="images/iconFb.png" width="20" height="20" alt="FB"></a></li>
<li><a href="#" target="_blank"><img src="images/iconTw.png" width="20" height="20" alt="twitter"></a></li>
<li><a href="#" target="_blank"><img src="images/iconInsta.png" width="20" height="20" alt="Instagram"></a></li>
<li><a href="#" target="_blank"><img src="images/iconYouTube.png" width="20" height="20" alt="You Tube"></a></li>
</ul>
</div>
</nav>
</div>

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

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

【3】MESSAGE部分の編集

<section id="sec01">
<header>
<h2><span>MESSAGE</span></h2>
</header>
<div class="innerS">
ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル株式会社では最新技術と自然との調和を目な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。
</div>
</section>

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

<section id="sec02">
<header>
<h2><span>GALLERY</span></h2>
</header>
<ul id="gallery">
<li><img src="images/photo01.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo02.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo03.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo04.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo05.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo06.jpg" width="360" height="350" alt=""></li>
<li class="full"><img src="images/photo07.jpg" width="1080" height="695" alt=""></li>
<li><img src="images/photo08.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo09.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo10.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo11.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo12.jpg" width="360" height="350" alt=""></li>
<li><img src="images/photo13.jpg" width="360" height="350" alt=""></li>
</ul>
</section>

【5】BRAND部分の編集

<section id="sec03">
<header>
<h2><span>BRAND</span></h2>
</header>
<div class="inner">
<ul class="col4">
<li>
<p class="img"><img src="images/logo01.png" width="168" height="168" alt=""></p>
<p>ホームページサンプル株式会社では最動かす企業を目指します。</p>
</li>
<li>
<p class="img"><img src="images/logo02.png" width="168" height="168" alt=""></p>
<p>革新的な技術で世の中を動かす企業を目します。世の中を動かす。</p>
</li>
<li>
<p class="img"><img src="images/logo03.png" width="168" height="168" alt=""></p>
<p>株式会社では最動かす企業を目指しますージン企業を目指します。</p>
</li>
<li>
<p class="img"><img src="images/logo04.png" width="168" height="168" alt=""></p>
<p>株式会社では最動かす企業を指しますージサン企業を目指します。</p>
</li>
</ul>
</div>
</section>

【6】PROJECT部分の編集

<section id="sec04">
<header>
<h2><span>PROJECT</span></h2>
</header>
<div class="inner">
<div class="article">
<img src="images/photo14.jpg" width="370" height="224" alt="">
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な革新的な革新的な技術で世の中を技術で世の中を技術で世の中を動かす企業を目指します。</p>
<p>ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指し調和を目指し調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
</div>
<div class="article">
<img src="images/photo15.jpg" width="370" height="224" alt="">
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な革新的な革新的な技術で世の中を技術で世の中を技術で世の中を動かす企業を目指します。</p>
<p>ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指し調和を目指し調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
</div>
</div>
</section>

【7】COMPANY部分・フッターコピーライトの編集

<!– COMPANY –>
<section id="sec05">
<header>
<h2><span>COMPANY</span></h2>
</header>
<div class="inner">
<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>
</li>
<li>
<div id="map">
<!– GOOGLE MAP –>
グーグルマップの埋め込みコードを入力
<!– // GOOGLE MAP –>
</div>
</li>
</ul>
</div>
</section>
<!– // COMPANY –>

<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><!– ←クレジット表記を外す場合はシリアルキーが必要です http://f-tpl.com/credit/ –>
</footer>

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

関連ページRelated page

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