会社概要ページの沿革を、表ではなく縦線でつないだ年表として見せたい。SWELLなら、専用の「ステップブロック」の設定を少し変えるだけで作れます。
株式会社アマノートの会社情報ページ（会社情報）の沿革も、この方法で作っています。本記事では、その設定手順と、カスタムCSSを入れていたために年表の上へ黒い帯が並んでしまったときの原因と直し方を、実際の事例で解説します。
- SWELLのステップブロックで年表を作るための4つの設定
- 年表として使うときのブロックの記述例
- 年表に黒い帯が並んだときの原因と、CSSの直し方
- 表とステップブロックの使い分け
SWELLのステップブロックは、沿革・年表にも使える
ステップブロックは、本来は「手順1、手順2…」と流れを見せるためのブロックです。各項目が縦線でつながり、項目ごとに見出し（タイトル）と本文を持てます。
この「縦線でつながる」「項目ごとに見出しがある」という性質が、年表と相性のよい部分です。見出しに年月、本文に出来事を書き、手順番号を見えなくすれば、時系列の沿革になります。
SWELLのステップブロックで沿革を作る4つの設定
年表にするために変える設定は、次の4つです。
- ブロックのスタイルを小さい表示に切り替える
- 「STEP」のラベルを空にする
- 各項目で番号を非表示にする
- 項目のタイトルに年月、本文に出来事を書く
ブロックのスタイルを小さい表示に切り替える
ステップブロックを挿入したら、ブロックの設定でスタイルを小さい表示に切り替えます。HTML上では、ブロックに is-style-small というクラスが付きます。大きい番号の丸が並ぶ標準のスタイルより、年月と出来事が詰まって見え、沿革の行数が増えても間延びしません。
「STEP」のラベルを空にする
標準では、番号の横に「STEP」という文字が付きます。年表では不要なので、親ブロックの設定でラベルの文字を消します。空欄にしておくと、項目ごとの丸と縦線だけが残ります。
各項目で番号を非表示にする
ステップの各項目（子ブロック）には「番号を非表示にする」という設定があります。これをすべての項目でオンにすると、「1」「2」といった手順番号が消えます。年表では年月そのものが順番を示すので、番号は二重表示になるだけです。
項目のタイトルに年月、本文に出来事を書く
項目のタイトル欄に「2019年11月」のような年月を書き、本文の段落に出来事を書きます。年月の書き方は「2019年11月」「2019.11」など、どちらかに揃えておくと、縦に並んだときに読みやすくなります。
設定を終えたステップブロックは、コードエディターで見ると次のような記述になります（1項目分を抜粋）。
<!-- wp:loos/step {"stepLabel":"","stepClass":"small","className":"is-style-small"} -->
<div class="swell-block-step is-style-small" data-num-style="circle">
<!-- wp:loos/step-item {"stepClass":"small","isHideNum":true} -->
<div class="swell-block-step__item">
<div class="swell-block-step__number" data-num=""><span class="__shape u-col-main"></span></div>
<div class="swell-block-step__title u-fz-m">2019年11月</div>
<div class="swell-block-step__body"><p>株式会社アマノート設立</p></div>
</div>
<!-- /wp:loos/step-item -->
</div>
<!-- /wp:loos/step -->stepLabel が空、isHideNum が true になっていれば、4つの設定が反映されています。
年表に黒い帯が並んだときの原因は、番号を塗るCSS
当社の会社情報ページでは、設定どおりに作った年表の各項目の上に、横いっぱいの黒い帯が並んでしまったことがありました。ブロックの設定ではなく、ページに入れていたカスタムCSSが原因です。
番号の要素に背景色を当てると、帯として見える
当社では、サービス紹介ページで手順の番号を濃い色の四角に見せるため、次のようなCSSを投稿別のカスタムCSSに入れていました。
.post_content .swell-block-step__number {
background: #1B1B19 !important;
color: #fff !important;
border-radius: 2px !important;
}番号付きの通常のステップなら、番号の四角だけが塗られます。ところが、小さい表示で番号を非表示にした年表では、番号の要素（.swell-block-step__number）が丸の位置から横に伸びた形で残ります。そこに背景色が当たり、黒い帯として見えていました。
CSSの対象を番号付きのステップだけに絞る
直し方は、背景色を当てるセレクタに「小さい表示ではないステップ」という条件を足すことです。
.post_content .swell-block-step:not(.is-style-small) .swell-block-step__number {
background: #1B1B19 !important;
color: #fff !important;
border-radius: 2px !important;
}これで、サービス紹介ページの番号の見た目は変えずに、年表だけがSWELL標準の「縦線と丸」の表示に戻りました。同じCSSを複数のページで共有している場合は、年表のあるページも含めて表示を確認してください。
どのCSSが当たっているかを確かめる方法
原因のCSSがどこにあるか分からないときは、ブラウザの開発者ツールで帯の部分を選択し、右側のスタイル一覧で background を指定している行を探します。行の横に、読み込み元（テーマのCSS、追加CSS、ページ内の <style> など）が表示されます。SWELLでCSSを書ける場所ごとの優先順位は、SWELLでCSSが反映されないときの確認手順で解説しています。
沿革は表で書くか、ステップブロックで書くか
どちらが正しいということはありません。当社では、次の基準で使い分けています。
| 比べる点 | 表（テーブル） | ステップブロック |
|---|---|---|
| 向いている内容 | 年月と出来事が1行ずつで収まる | 出来事に補足の文章を添えたい |
| スマートフォンでの見え方 | 列が狭くなり、出来事が折り返しやすい | 縦に並ぶので、幅が狭くても崩れにくい |
| 項目が多いとき | 一覧性が高い | 縦に長くなる |
会社概要の沿革のように、出来事ごとに「何をリリースしたか」を一文で書きたい場合は、ステップブロックのほうがスマートフォンで読みやすくなります。
SWELLのステップブロックで年表を作るときのよくある質問
年表の丸の色は変えられますか？
変えられます。ステップの各項目には、番号の色を個別に指定する設定があります。サイト全体で揃えたい場合は、テーマのメインカラーが使われる標準のままにしておくと管理が楽です。
年月だけを太字にしたいときは？
タイトル欄に入力した文字は、本文とは別の要素（.swell-block-step__title）として出力されます。標準でも本文より目立つ表示ですが、太さを変えたい場合はこの要素を対象にCSSを追加します。
途中に年をまたぐ区切りを入れられますか？
ステップブロックを年ごとに分けて、間に小見出しを置く方法があります。1つのステップブロックの中に見出しを入れるより、構造が崩れにくくなります。
まとめ：SWELLのステップブロックは設定4つで年表になる
- スタイルを小さい表示にし、「STEP」ラベルを空にする
- 各項目で番号を非表示にし、タイトルに年月を書く
- 黒い帯が出たら、番号の要素に背景色を当てているCSSを探す
- セレクタを
:not(.is-style-small)で絞れば、手順と年表を両立できる
株式会社アマノートは、SWELLなどの既存テーマを使ったコーポレートサイト制作と、公開後のSEO・LLMO対策を支援しています。テーマの標準機能で済む部分と、手を入れるべき部分の切り分けからご相談いただけます。詳しくはWordPressサイト制作のページをご覧ください。
