【Cocoonカスタマイズ】「タイムライン」ブロックを横向きに表示する方法

はじめに

以下の内容をCocoonで実現します。

SWELLステップブロックを横並びにするCSSカスタマイズ

SWELLのステップブロックを横並びにして省スペース化するカスタマイズ方法を解説。スタイルを「ビッグ」に設定し、指定のCSSコードを追記する手順を紹介します。PC表示のみ横並びとなり、スマホ表示は縦並びのまま維持されます。

画面幅が480pxを超える場合、「タイムライン」ブロックを横向きに表示します。

この記事では、この方法について説明します。

完成イメージ

STEP1
ホワイトスネイク

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。
STEP2
C-MOON

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。
STEP3
メイド・イン・ヘブン

C-MOONが進化したスタンド。全世界の時を、加速させる能力を持つ。

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. 「テーブル」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-timelineと入力します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.my-timeline > .timeline {
  display: flex;
  flex-direction: row;
  gap: 15px;
  padding: 0;

  /* タイムラインアイテム */
  > .timeline-item {
    border: 0;
    overflow: unset;
    padding: 10px;
    width: 100%;

    /* ポイント矢印 */
    &::before {
      border-radius: unset;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      height: 26px;
      left: -15px;
      top: 50%;
      transform: translateY(-50%);
      width: 13px;
    }

    &:first-child::before {
      content: none;
    }

    /* ラベル */
    .timeline-item-label {
      float: unset;
      padding: 0 0 0.5em 0;
      text-align: center;
      width: unset;
    }

    /* コンテンツ領域 */
    .timeline-item-content {
      border: 0;
      float: unset;
      padding: 0;
      width: unset;
    }
  }

  @media (max-width: 480px) {
    flex-direction: column;

    > .timeline-item {
      &:not(:last-child) {
        border-bottom: 1px dashed var(--cocoon-custom-point-color);
      }

      &::before {
        left: 50%;
        top: -22px;
        transform: translateX(-50%) rotate(90deg);
      }
    }
  }
}