WordPressサイトで年表タイムラインをプラグインを使わずに作る方法をご紹介します。

年表タイムラインのサンプル

次のような年表タイムラインをプラグインを使わずに作ります。

スマートフォンでは次のような表示です。

ベースデザインは、記事制作時点でWordPressにプリインストールされているテーマ「Twenty Twenty-Five」です。

年表タイムラインの作り方

WordPressのブロックエディタと追加CSSで作ります。

ブロックエディタでフォーマットを作る

まずは年表タイムラインのフォーマットをブロックエディタで作ります。

固定ページを追加して、カラムブロックを選択します。

カラムブロックのレイアウトを選ぶメニューが表示されたら、33 / 66を選択します。

左側のカラムに段落ブロックを追加して、日付を入力します。

右側のカラムには、そのときの出来事を入力します。

カラム全体を選択します。

画面右側の設定メニューより、ブロック → 高度な設定にある追加CSSクラスにmy-timeline-blockと入力します。

追加CSSクラスを設定したカラムを複製します。

複製したカラムに次の出来事とその日付を入力します。

カラムの複製と出来事の入力を必要な分だけ繰り返します。

ここまでで固定ページをプレビューすると、次のようになります。

プレビューしたときのデザインは使っているWordPressテーマによって異なる場合があります。サンプルはTwenty Twenty-Fiveです。

追加CSSで体裁を整える

年表タイムラインのフォーマットができたら、そのデザインを整える追加CSSを設定します。

次のCSSをWordPress子テーマのstyle.cssに追加します。WordPress子テーマの作り方はこちらの記事をご覧ください。

/* カラム全体 */
/* 前後のカラムとの間隔などを設定 */
.my-timeline-block {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 0;
    margin-bottom: 0;
    border-left: solid 5px #c6c6c6;
}

/* 日付のテキスト */
/* 日付の左横に青色の丸アイコンを表示 */
.my-timeline-block .wp-block-column:first-child p::before {
    content: "●";
    color: #2f8cff;
    position: relative;
    top: 0;
    left: -13px;
}

/* 右側（出来事）のカラム */
/* 吹き出しの色などを設定 */
.my-timeline-block .wp-block-column:last-child {
    border-radius: 10px;
    box-shadow: 0px 0px 80px -30px rgba(102, 141, 186, .5);
    padding: 20px;
    background-color: #f1f5f7;
}

/* スマートフォンのとき */
@media (max-width: 980px) {
    /* 日付のテキスト */
    /* 青色の丸アイコンの位置を調整 */
    .my-timeline-block .wp-block-column:first-child p::before {
        left: -11px;
    }

    /* 右側（出来事）のカラム */
    /* 吹き出しの位置を調整 */
    .my-timeline-block .wp-block-column:last-child {
        margin-left: 20px;
    }
}

CSSを追加してページをプレビューすると、はじめにご紹介したような年表タイムラインが表示されます。

まとめ

WordPressサイトで年表タイムラインをプラグインを使わずに作る方法をご紹介しました。

会社の沿革やワークフローなどをWebページに掲載する際、タイムライン形式だと伝わりやすいと思います。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応していますので、ぜひお気軽にご相談ください。