このサイトについて

本サイトは、01coreのフロント公開用ページを効率よく制作するための「パーツ一覧・活用ガイド」です。
SITEで使用する静的HTMLパーツと、CONTENTS／FORMと連携して動的に表示するパーツを、用途（TOP、下層、NEWS/BLOG、WORKS、FAQ、フォーム等）から迷わず探せるよう整理し、各パーツのプレビュー、使い方、依存関係、コピー用コードを提供します。
さらに、推奨の組み合わせ（ページ別セット）やQuick Startを用意し、最短で動く状態から実装・検証までを一貫して支援します。
旧版・過去バージョンへの導線も備え、継続的な運用と更新に対応します。

ダウンロードしたパーツの使用方法

01coreSITE管理画面メニューの「サイト管理 / パーツ」画面に移動してください。画面右上の「インポート」ボタンを押し、ダウンロードしたパーツのzipファイル or 解凍したフォルダをそのままアップロードしてください。

レイアウト設定

01coreSITEの「サイト管理 / レイアウト」画面で設定する、レイアウト用のコードです。コードをコピーして使用してください。

HEAD

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }{ | }}サイト名が入ります</title>
<meta name="description" content="{{ description }}">
<meta name="keywords" content="{{ keyword }} キーワードが入ります">

<!-- open graph -->
<meta property="og:title" content="自動で生成されます" />
<meta property="og:description" content="自動で生成されます" />
<meta property="og:image" content="example.png" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "組織名・ブランド名",
  "url": "https://example.com/",
  "logo": "https://example.com/images/logo.png",
  "sameAs": [
    "https://www.facebook.com/your-page",
    "https://www.instagram.com/your-account"
  ]
}
</script>

<!-- favicon -->
<link rel="icon" href="sample.ico" type="image/x-icon" />
<link rel="icon" href="sample.png" type="image/png" sizes="192x192" />
<link rel="apple-touch-icon" href="sample.png" />

<!-- library -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- assets -->
<link rel="stylesheet" href="https://common.assets.01core.app/files/site-parts-assets/css/base-style-v2.css" />

HTML

<div class="webapp-layout-root">
<div class="webapp-layout-header">
</div>

<main class="webapp-layout-main l-main">
</main>

<div class="webapp-layout-footer">
</div>
</div>

ExtraTag

<script>
  (function () {
    const title = document.title;
    const description = document.querySelector('meta[name="description"]')?.getAttribute("content") || "";
    const ogTitle = document.querySelector('meta[property="og:title"]');
    const ogDescription = document.querySelector('meta[property="og:description"]');

    if (ogTitle && title) {
      ogTitle.setAttribute("content", title);
    }

    if (ogDescription && description) {
      ogDescription.setAttribute("content", description);
    }
  })();
</script>