new_window arrow_01 arrow_02 arrow_03 arrow_04 arrow_05 arrow_06 arrow_07 arrow_08 arrow_09 menu close metaphase facebook instagram twitter tumblr logo_metaphase

テンプレート編集方法

ロゴの編集

<img src="images/common/head.png" srcset="
images/common/head.png 1x,
images/common/head@2x.png 2x" alt="metaphase Co.,Ltd.">

<img>内赤字部分に、リンク先のファイル名を指定してください。
@2xの画像は、Retinaディスプレイ対応のため2倍で書き出した画像を指定してください。
<alt>内赤字部分に画像の代替テキストを指定してください。

ヘッダーメニューの編集

<nav id="gnav">
<ul>
<li><a href="#anc_about" class="js_font02">About Us</a></li>
<li><a href="#anc_service" class="js_font02">Service</a></li>
<li><a href="#anc_company" class="js_font02">Company</a></li>
<li><a href="#anc_news" class="js_font02">News</a></li>
<li><a href="#anc_recruit" class="js_font02">Recruit</a></li>
</ul>
<div class="btnList">
<div><a href="#anc_contact" class="txt js_font02 m_bgType01">Contact</a></div>
</div><!-- /.btnList -->
<div class="m_copyBox">
<p class="copyright js_font01"><small><span class="mark">&copy; </span><span class="text">ABCDEFGHIJK All rights reserved.</span></small></p>
<div class="m_sns">
<p class="ic-i"><a href="https://www.instagram.com/?hl=ja" target="_blank"><i class="fab fa-instagram"></i></a></p>
<p class="ic-f"><a href="https://ja-jp.facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a></p>
<p class="ic-t"><a href="https://twitter.com/home" target="_blank"><i class="fab fa-twitter"></i></a></p>
</div><!-- /.m_sns -->
</div><!-- /.m_copyBox -->
<!-- /#gnav ==========--></nav>

赤字部分を編集してください。

フッターメニューの編集

<div class="nav">
<div class="footnav">
<p class="list"><a href="#anc_about" class="js_font02">About Us</a></p>
<p class="list"><a href="#anc_service" class="js_font02">Service</a></p>
<p class="list"><a href="#anc_company" class="js_font02">Company</a></p>
<p class="list"><a href="#anc_news" class="js_font02">News</a></p>
<p class="list"><a href="#anc_recruit" class="js_font02">Recruit</a></p>
</div><!-- /.footnav -->
<div class="footnav">
<p class="list"><a href="#anc_contact" class="js_font02">Contact</a></p>
<div class="smallcategory">
<p class="list"><a href="doc/dummy.pdf" target="_bkank" class="m_linkPdf">個人情報保護方針</a></p>
<p class="list"><a href="./">個人情報の取り扱いについて</a></p>
<p class="list"><a href="./">セキュリティポリシー</a></p>
</div>
</div><!-- /.footnav -->
</div><!-- /.nav -->

赤字部分を編集してください。

googlemapの編集

<!-- map掲載場所 開始 -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.34174594519!2d139.70362231567273!3d35.69320698019146!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cdbf1df24cf%3A0x9d8433d7a57748f3!2z5qCq5byP5Lya56S-44Oh44K_44OV44Kn44Kk44K6!5e0!3m2!1sja!2sjp!4v1590372610719!5m2!1sja!2sjp" width="600" height="665" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<!-- /map掲載場所 終了 -->

赤字部分にgoogleマップから取得した埋め込みタグを指定してください。

リンクの編集

(例)

<a href="#anc_about" class="js_font02">About Us</a>

赤字部分に、リンク先を指定してください。
この他にも「a href="XXXX"」で記述しているリンクは適宜変更してください。

コピーライトの編集

<p class="copyright js_font01">
<small>&copy; <span class="text">ABCDEFGHIJK All rights reserved.</span></small>
</p>

赤字部分を編集してください。

メタ情報の編集(タイトル、metaタグの変更)

<meta name="description" content="サイトの説明文です。検索結果一覧のタイトル下に表示されます。">
<meta name="keywords" content="サイトに関するキーワードをカンマ区切りで5個程度入力してください。">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="ブラウザのタイトルバー部分に表示され、また検索エンジンで検索された時にもタイトルとして表示されます。">
<meta property="og:description" content="サイトの説明文です。検索結果一覧のタイトル下に表示されます。">
<meta property="og:image" content="https://www.abcdefghijk.co.jp/images/common/ogimage.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:title" content="ブラウザのタイトルバー部分に表示され、また検索エンジンで検索された時にもタイトルとして表示されます。">
<meta name="twitter:description" content="サイトの説明文です。検索結果一覧のタイトル下に表示されます。">
<meta name="twitter:image:src" content="https://www.abcdefghijk.co.jp/images/common/ogimage.jpg">
<meta name="format-detection" content="telephone=no, email=no, address=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブラウザのタイトルバー部分に表示され、また検索エンジンで検索された時にもタイトルとして表示されます。</title>

赤字部分を編集してください。

メインエリアの編集

<section class="mvArea" id="floatPos">
<div class="mainWrap">
<div class="txtWrap">
<h2 class="m_copy js_font02">Good<br>Experience</h2>
<p class="txt">ユーザーにとって最も心地よく、<br>ビジネスにとって最も効果の高い<br class="m_pcHide">クリエイティブを。</p>
</div><!-- /.txtWrap -->
<div class="bg">
<img src="images/common/main.jpg" alt="">
</div><!-- /.bg -->
</div><!-- /.mainWrap -->
<div class="m_scrollTxt js_font01"><div class="inner"><pre>Good Experience</pre></div></div>
<div class="m_sns s_mv">
<p class="ic-i"><a href="https://www.instagram.com/?hl=ja" target="_blank"><i class="fab fa-instagram"></i></a></p>
<p class="ic-t"><a href="https://twitter.com/home" target="_blank"><i class="fab fa-twitter"></i></a></p>
<p class="ic-f"><a href="https://ja-jp.facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a></p>
</div><!-- /.m_sns -->
<div class="scroll">
<span class="txt js_font01">Scroll</span>
<span class="line"></span><!-- /.line -->
</div><!-- /.scroll -->
</section><!-- /.mvArea -->

赤字部分に、リンク先のファイル名を指定してください。

スクロールテキストの編集

<div class="m_scrollTxt js_font01"><div class="inner"><pre>Good Experience</pre></div></div>
<div class="m_scrollTxt s_75 js_font01"><div class="inner"><pre>Good Experience</pre></div></div>
<div class="m_scrollTxt s_50 js_font01"><div class="inner"><pre>Good Experience</pre></div></div>

赤字部分を編集してください。
不要な場合は削除してください。

Servicesのカラム編集

<div class="m_serviceSlide">
<ul class="slides">
<li>
<div class="list">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">エクスペリエンスデザイン</span><span class="main js_font02">Experience Design</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
</div><!-- /.txtWrap -->
<div class="bgWrap">
<span><img src="images/common/service01.jpg" alt="" width="420"></span>
</div><!-- /.bgWrap -->
</div><!-- /.list -->
</li>
<li>
<div class="list">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">サービスコンセプト</span><span class="main js_font02">Service Concept</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
</div><!-- /.txtWrap -->
<div class="bgWrap">
<span><img src="images/common/service02.jpg" alt="" width="420"></span>
</div><!-- /.bgWrap -->
</div><!-- /.list -->
</li>
<li>
<div class="list">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">リテンション</span><span class="main js_font02">Retention</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
</div><!-- /.txtWrap -->
<div class="bgWrap">
<span><img src="images/common/service03.jpg" alt="" width="420"></span>
</div><!-- /.bgWrap -->
</div><!-- /.list -->
</li>
<li>
<div class="list">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">プロダクトサービス</span><span class="main js_font02">Product Service</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
</div><!-- /.txtWrap -->
<div class="bgWrap">
<span><img src="images/common/service04.jpg" alt="" width="420"></span>
</div><!-- /.bgWrap -->
</div><!-- /.list -->
</li>
</ul>
</div><!-- /.m_serviceSlide -->

もっと見る

赤字部分を編集してください。
必要に応じて<li>~</li>要素を削除してください。

お問い合わせ

テンプレートのカスタマイズでお困りのお客様へは、
有料サポートを承っております。
まずはお問い合わせください。