株式会社メタフェイズ

テンプレート編集方法

ロゴの編集

<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>要素を削除してください。

お問い合わせ

Webサイト制作やWebビジネスに関するお悩みがある方はお気軽にご相談ください。

お問い合わせはこちら

会社案内

社内で検討・回覧したい方向けに、弊社の会社概要や最新の制作実績を掲載した資料を、PDFでご覧いただけます。

ダウンロードページヘリンク

ホワイトペーパー

最新のプロジェクトや過去の7,000サイト以上の実績と経験で獲得したWebサイト制作におけるノウハウの一部をホワイトペーパーとして公開しています。

ダウンロードページヘリンク