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

メニューを表示

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

テンプレート

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

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

マニュアルのもくじManual

マニュアルの読み方Manual

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

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

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

確認事項・注意事項など

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

index.htmlを編集しようManual

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

キャプチャ

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

<ul>
<li><a href="#header">TOP</a></li>
<li><a href="#sec01">VISION</a></li>
<li><a href="#sec02">MESSAGE</a></li>
<li><a href="#sec03">SERVICE</a></li>
<li><a href="#sec04">STORY</a></li>
<li><a href="#sec05">PROFILE</a></li>
</ul>

【2】メイン画像・社名・スローガン部分の編集

<img src="images/mainImg.jpg" alt=”">
<div id="slogan">
<h1>Vestibulum mauris</h1>
<h2>最新技術と自然との調和を目指す</h2>
</div>

【3】VISION部分の編集

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

【4】MESSAGE部分の編集

<div class="wrap">
<p class="bg"><img src="images/sec02_01.jpg" alt=""></p>
<div class="txt">
<div class="vMid">
<h2>MESSAGE</h2>
<p>ちかごろ世間で日本歴史の科学的研究ということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
</div>
</div>
</div>
<div id="sec02_02" class="wrap">
<p class="bg"><img src="images/sec02_02.jpg" alt=""></p>
<div class="txt">
<div class="vMid">
<h2>MESSAGE</h2>
<p>日本歴史の科学的研究ということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
</div>
</div>
</div>

【5】タイトル+丸い画像+文章 部分の編集

<li>
<h2>SERVICE</h2>
<img src="images/circleImg01.png" width="288" height="288" alt="">
<p>科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
</li>
<li>
<h2>MESSAGE</h2>
<img src="images/circleImg02.png" width="288" height="288" alt="">
<p>日本歴史の科学的研究ということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば意義であるならば。</p>
</li>
<li>
<h2>STORY</h2>
<img src="images/circleImg03.png" width="288" height="288" alt="">
<p>科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいう。</p>
</li>

【6】背景+2つの文章 部分の編集

<li>
<h2>STORY</h2>
<p>科学的研究というのが近代史学の学問的方法によるちかごろ世間で日本歴史の科学的研究ということがしきりに叫ばれている。研究という意義であるならば、研究という意義であるならばこれは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいうには及ばないはずである。</p>
</li>
<li>
<h2>SUCCESS</h2>
<p>ちかごろ世間で日本歴史の科学的研究ということがしきりに叫ばれているということがしきりに叫ばれている。科学的研究というのが近代史学の学問的方法による研究という意義であるならば、これは史学の学徒の間においては一般に行われていることであるから、今さらこと新しくいうには及ばないはずである。</p>
</li>

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

【7】会社情報部分の編集

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

<li>
<dl>
<dt>社名</dt>
<dd>Sample Company</dd>
<dt>代表取締役</dt>
<dd>見本 太郎</dd>
<dt>住所</dt>
<dd>見本県見本市仮区見本町1-3-5</dd>
<dt>電話番号</dt>
<dd>01234-567-8901</dd>
<dt>設立</dt>
<dd>20XX年5月5日</dd>
<dt>資本金</dt>
<dd>1,000,000円</dd>
<dt>主な取引先</dt>
<dd><p><a href="#" target="_blank">見本商事株式会社</a></p><p><a href="#" target="_blank">株式会社年中無休商事</a></p><p><a href="#" target="_blank">株式会社仮称</a></p></dd>
</dl>
</li>
<li>
<div id="map">
<!– GOOGLE MAP –>
ここにグーグルマップのコードをペースト
<!– // GOOGLE MAP –>
</div>
</li>

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

<footer id="footer">
Copyright(c) 20XX 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制作デザイン向けの無料写真素材/商用可能
ページトップへ戻る