コンテンツにスキップ

ピックアップコンテンツ／Pickup contents

訴求力を高める際に利用します。特定のコンテンツに対する誘導や、ページ内で強調した見せ方を表現します。

<div class="c-pickupContents">
  <div class="c-pickupContents__inner">
    <div class="c-pickupContents__body">
      <div class="c-pickupContents__title">
        <p class="c-pickupContents__heading">キャッチコピー</p>
        <p class="c-pickupContents__shoulder">ショルダーコピー</p>
      </div>
      <div class="c-pickupContents__description">
        <p class="c-paragraph">
          本文テキスト
          「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
        </p>
      </div>
      <div class="c-pickupContents__button">
        <a target="" href="/" class="c-button">
          <span class="c-button__label">ボタン</span>
          <svg
            class="c-button__icon c-button__icon--right icon"
            aria-hidden="true"
            role="img"
          >
            <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
          </svg>
        </a>
      </div>
    </div>
    <div class="c-pickupContents__image">
      <figure class="c-image c-image--fullWidth">
        <img src="/images/sample.webp" width="720" height="600" alt="" />
        <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
      </figure>
    </div>
  </div>
</div>

原則

「デフォルト」「関連リンク」「メディア」の3タイプはリンク先のコンテンツへの導線として使用します。
「コンテンツ訴求」タイプはページ内で特に強調したいコンテンツがある場合に使用します。導線を設けられません。
日付の表記はライティングガイドラインの章（日本語／英語）をご確認ください。
- 日本語の場合
  - 例「2025年1月1日」「2024年12月31日」
  - 数字は半角、年は西暦で「年」「月」「日」を用いて表記します。
- 英語の場合
  - 例「January 1, 2025」
  - 数字は半角、月は省略表記しません。

パターン

画像位置の変更

画像の位置を左右どちらかに変更することができます。


<div class="c-pickupContents">
  <div class="c-pickupContents__inner c-pickupContents__inner--imagePosRight">
    <div class="c-pickupContents__body">
      <div class="c-pickupContents__title">
        <p class="c-pickupContents__heading">キャッチコピー</p>
        <p class="c-pickupContents__shoulder">ショルダーコピー</p>
      </div>
      <div class="c-pickupContents__description">
        <p class="c-paragraph">
          本文テキスト
          「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
        </p>
      </div>
      <div class="c-pickupContents__button">
        <a target="" href="/" class="c-button">
          <span class="c-button__label">ボタン</span>
          <svg
            class="c-button__icon c-button__icon--right icon"
            aria-hidden="true"
            role="img"
          >
            <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
          </svg>
        </a>
      </div>
    </div>
    <div class="c-pickupContents__image">
      <figure class="c-image c-image--fullWidth">
        <img src="/images/sample.webp" width="720" height="600" alt="" />
        <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
      </figure>
    </div>
  </div>
</div>

スタイル

ピックアップコンテンツは次のスタイルに変更が可能です。

関連リンク

<div class="c-pickupContents c-pickupContents--related">
  <div class="c-pickupContents__inner">
    <div class="c-pickupContents__body">
      <div class="c-pickupContents__title">
        <p class="c-pickupContents__heading">キャッチコピー</p>
        <p class="c-pickupContents__shoulder">ショルダーコピー</p>
      </div>
      <div class="c-pickupContents__description">
        <p class="c-paragraph">
          本文テキスト
          「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
        </p>
      </div>
      <div class="c-pickupContents__button">
        <a target="" href="/" class="c-button">
          <span class="c-button__label">ボタン</span>
          <svg
            class="c-button__icon c-button__icon--right icon"
            aria-hidden="true"
            role="img"
          >
            <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
          </svg>
        </a>
      </div>
    </div>
    <div class="c-pickupContents__image">
      <figure class="c-image c-image--fullWidth">
        <img src="/images/sample.webp" width="720" height="600" alt="" />
        <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
      </figure>
    </div>
  </div>
</div>

メディア


<div class="c-pickupContents c-pickupContents--media">
  <a href="/" class="c-pickupContents__inner">
    <div class="c-pickupContents__body">
      <div class="c-pickupContents__title">
        <p class="c-pickupContents__heading">
          メディア情報タイトル「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や
        </p>
      </div>
      <div class="c-pickupContents__description">
        <p class="c-paragraph">
          本文テキスト
          「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
        </p>
      </div>
      <p class="c-pickupContents__date">
        <time datetime="2025-01-01">2025年01月01日</time>
      </p>
      <div class="c-pickupContents__labels">
        <div class="c-labelGroup">
          <span class="c-label">
            <span class="c-label__text">タグテキスト</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">タグテキスト</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">タグテキスト</span>
          </span>
        </div>
      </div>
    </div>
    <div class="c-pickupContents__image">
      <div class="c-image c-image--fullWidth">
        <img
          src="/images/sample.webp"
          width="720"
          height="600"
          alt="画像のalt"
        />
      </div>
    </div>
  </a>
</div>

コンテンツ訴求


<div class="c-pickupContents c-pickupContents--contents">
  <div class="c-heading c-heading--h2">
    <div class="c-heading__inner">
      <h2 class="c-heading__label">
        見出しテキスト h2
        「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
      </h2>
      <p class="c-heading__shoulder">ショルダーコピー</p>
    </div>
  </div>
  <div class="c-pickupContents__inner">
    <div class="c-pickupContents__body">
      <div class="c-pickupContents__copy">
        <p class="c-paragraph c-paragraph--copyM">
          キャッチコピー「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
        </p>
      </div>
      <div class="c-pickupContents__description">
        <p class="c-paragraph">
          本文テキスト
          「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」という
        </p>
      </div>
    </div>
    <div class="c-pickupContents__image">
      <figure class="c-image c-image--fullWidth">
        <img src="/images/sample.webp" width="720" height="600" alt="" />
        <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
      </figure>
    </div>
  </div>
</div>