WordPressサイトで数字で見る〇〇をプラグインを使わずにブロックエディタで作る方法をご紹介します。

数字で見る〇〇のサンプル

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

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

数字で見る〇〇の作り方

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

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

まずは数字で見る〇〇のフォーマットをブロックエディタで作ります。

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

カラムのレイアウトを100を選択します。

カラムに見出しを追加します。

見出しに項目名を入力して、その下に段落を追加します。

段落に、その項目に対する数字を入力します。

カラム全体を選択して、右側の設定メニューよりブロック→追加CSSクラスにmy-numbers-blockと入力します。

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

子カラムが複製されると以下のように2列になります。

今回のサンプルは3列なので、もう一度複製します。

子カラムを2回複製して、追加CSSクラスを設定したカラムが3列になりました。

追加CSSクラスを設定したときと同じ様にカラム全体を選択し、それを複製します。

3列のカラムが2行になりました。

Webページに掲載する情報分、繰り返しカラムを複製します。

各項目のデータを入力します。

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

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

追加CSSで体裁を整える

数字で見る〇〇のフォーマットができたら、そのデザインを整える追加CSSを設定します。

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

/* カラム全体 */
.my-numbers-block {
    text-align: center; /* テキストを中央寄せ */
}

/* 各項目のカラム */
.my-numbers-block .wp-block-column {
    background-color: #f1f5f7; /* 背景色: 薄いブルー */
    padding: 10px;             /* 内側に余白 */
    border-radius: 10px;       /* 角丸 */
    box-shadow: 0px 0px 80px -30px rgba(102, 141, 186, 1); /* 影 */
}

/* 項目見出しテキスト */
.my-numbers-block .wp-block-heading {
    background-color: #2f8cff; /* 背景色: ブルー */
    color: #ffffff;            /* 文字色: 白 */
    padding: 10px;             /* 内側に余白 */
    border-radius: 5px;        /* 角丸 */
    font-size: 22px;           /* 文字サイズ */
}

/* 数字テキスト */
.my-numbers-block p {
    font-size: 32px;   /* 文字サイズ */
    font-weight: bold; /* 太字 */
}

CSSを追加してページをプレビューすると、はじめにご紹介したような数字で見る〇〇が表示されます。

まとめ

WordPressサイトで数字で見る〇〇をプラグインを使わずにブロックエディタで作る方法をご紹介しました。

Webページに会社情報などをわかりやすく端的に掲載したいとき、数字で見る〇〇は使いやすい方法かと思います。

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

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