テンプレート編集方法
ロゴの編集
<img src="images/common/head.png" srcset="
images/common/head.png 1x,
images/common/head@2x.png 2x" alt="metaphase Co.,Ltd." class="off">
<img src="images/common/head_on.png" srcset="
images/common/head_on.png 1x,
images/common/head_on@2x.png 2x" alt="metaphase Co.,Ltd." class="on">
<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_colorHoverType01 m_bgFixedType01">Contact</a></div>
</div><!-- /.btnList -->
<div class="m_copyBox">
<p class="copyright js_font01"><small><span class="mark">© </span><span class="text">ABCDEFGHIJK All rights reserved.</span></small></p>
<div class="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><!-- /.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 -->
赤字部分を編集してください。
コピーの編集
<div class="txtWrap">
<h2 class="m_copy js_font02">Good<br>Experience</h2>
<p class="txt">ユーザーにとって最も心地よく、<br>ビジネスにとって最も効果の高い<br class="m_pcHide">クリエイティブを。</p>
</div><!-- /.txtWrap -->
赤字部分を編集してください。
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="400" 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>© <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>
赤字部分を編集してください。
メイン画像の編集
<div class="m_slide">
<ul class="slides">
<li class="slide"><img src="images/common/slide01.jpg" alt="" class="object_fit"></li>
<li class="slide"><img src="images/common/slide02.jpg" alt="" class="object_fit"></li>
<li class="slide"><img src="images/common/slide03.jpg" alt="" class="object_fit"></li>
<li class="slide"><img src="images/common/slide04.jpg" alt="" class="object_fit"></li>
</ul><!-- /.slides -->
</div><!-- /.m_slide -->
赤字部分に、リンク先のファイル名を指定してください。
Servicesのカラム編集
4カラムの場合
<!-- 4カラム レイアウト 開始 -->
<div class="m_serviceBox s_col4">
<div class="list">
<a href="#m_col4_01" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Experience<br>Design</span></h3>
<p class="txt">エクスペリエンスデザイン</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service01.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col4_01">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">エクスペリエンスデザイン</span><span class="main js_font02">Experience Design</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service01.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
<div class="list">
<a href="#m_col4_02" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Service<br>Concept</span></h3>
<p class="txt">サービスコンセプト</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service02.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col4_02">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">サービスコンセプト</span><span class="main js_font02">Service Concept</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service02.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
<div class="list">
<a href="#m_col4_03" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Retention</span></h3>
<p class="txt">リテンション</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service03.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col4_03">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">リテンション</span><span class="main js_font02">Retention</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service03.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
<div class="list">
<a href="#m_col4_04" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Product<br>Service</span></h3>
<p class="txt">プロダクトサービス</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service04.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col4_04">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">プロダクトサービス</span><span class="main js_font02">Product Service</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service04.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
</div><!-- /.m_serviceBox s_col4 -->
<!-- //4カラム レイアウト 終了 -->
3カラムの場合
<!-- 3カラム レイアウト 開始 -->
<div class="m_serviceBox s_col3">
<div class="list">
<a href="#m_col3_01" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Experience<br>Design</span></h3>
<p class="txt">エクスペリエンスデザイン</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service01.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col3_01">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">エクスペリエンスデザイン</span><span class="main js_font02">Experience Design</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service01.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
<div class="list">
<a href="#m_col3_02" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Service<br>Concept</span></h3>
<p class="txt">サービスコンセプト</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service02.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col3_02">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">サービスコンセプト</span><span class="main js_font02">Service Concept</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service02.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
<div class="list">
<a href="#m_col3_03" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Retention</span></h3>
<p class="txt">リテンション</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service03.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col3_03">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">リテンション</span><span class="main js_font02">Retention</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service03.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
</div><!-- /.m_serviceBox s_col3 -->
<!-- //3カラム レイアウト 終了 -->
2カラムの場合
<!-- 2カラム レイアウト 開始 -->
<div class="m_serviceBox s_col2">
<div class="list">
<a href="#m_col2_01" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Experience<br>Design</span></h3>
<p class="txt">エクスペリエンスデザイン</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service01.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col2_01">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">エクスペリエンスデザイン</span><span class="main js_font02">Experience Design</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service01.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
<div class="list">
<a href="#m_col2_02" class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Service<br>Concept</span></h3>
<p class="txt">サービスコンセプト</p>
</div><!-- /.txtWrap -->
<div class="linkWrap">
<p class="linktxt js_font02">View Detail</p>
</div><!-- /.linkWrap -->
<div class="bgWrap m_bgAlfaType01">
<span><img src="images/common/service02.jpg" alt=""></span>
</div><!-- /.bgWrap -->
</a><!-- /.inTxt -->
<div class="m_modal" id="m_col2_02">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">サービスコンセプト</span><span class="main js_font02">Service Concept</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service02.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
</div><!-- /.list -->
</div><!-- /.m_serviceBox s_col2 -->
<!-- //2カラム レイアウト 終了 -->
1カラムの場合
<!-- 1カラム レイアウト 開始 -->
<div class="m_serviceBox s_col1">
<div class="list">
<!-- sp用のテキスト 開始-->
<div class="js_modal_op inTxt">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="main js_font02">Experience <br class="m_pcHide">Design</span></h3>
<p class="txt">エクスペリエンスデザイン</p>
</div><!-- /.txtWrap -->
<div class="bgWrap">
<span><img src="images/common/service01.jpg" alt="" width="570"></span>
</div><!-- /.bgWrap -->
</div><!-- /.inTxt -->
<!-- //sp用のテキスト 終了-->
<!-- pc用のテキスト 開始 -->
<div class="m_modal">
<div class="inner">
<div class="txtWrap">
<h3 class="m_serviceHead"><span class="sub">エクスペリエンスデザイン</span><span class="main js_font02">Experience Design</span></h3>
<p class="txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談にいくら威張っても、そこから飛び降りる事は出来まい。<br>
弱虫やーいと囃したからである。</p>
<a href="#" class="m_btn_close js_font01 m_bgAfterType01"><span>Close</span></a>
</div><!-- /.txtWrap -->
<div class="bgWrap m_bgAlfaType01"><img src="images/common/service01.jpg" alt="" width="570"></div><!-- /.bgWrap -->
</div><!-- /.inner -->
</div><!-- /.m_modal -->
<!-- //pc用のテキスト 終了-->
</div><!-- /.list -->
</div><!-- /.m_serviceBox s_col1 -->
<!-- //1カラム レイアウト 終了 -->
カラム数に応じて上記ソース部分をコピーしてお使いください。ダウンロードしたソースは「4カラムの場合」です。
赤字部分を編集してください。
お問い合わせ
Webサイト制作やWebビジネスに関するお悩みがある方はお気軽にご相談ください。