料金比較表［ブロックエディターで部品再現］

今回の再現レイアウトデザインはサブスクなどでよく見かける料金比較表のレイアウトです。
タイプはいくつかあって、よく見かけるのは次の2タイプじゃないでしょうか。

1.テーブル型

こちらは「freee会計」の料金表のキャプチャ画像です。

このような体裁の料金比較表をブロックエディターで作ろうと思ったら＜テーブル＞ブロックで作るのが最適でしょう。

幸い《SWELL》にはいくつかテンプレートがパターン化されてるので、それらをベースにカスタマイズしていけばそれなりのものができると思われます。

2.ブロック型

「LINE WORKS」のように各項目がブロックとして独立しているタイプもよく見かけます。

今回はこれをできるだけ手間をかけずにブロックエディターで表示する方法を考えてみます。
料金だけでなく商品仕様の比較表としても使えそうです。

プラグインを使う

もっとも手っ取り早いのはプラグインでしょうか。
ただ筆者が調べた限りでは海外製のものがほとんどで、しかも無料版だとデザインも1～2種類程度しか選べない感じです。かといって有料版に課金するほどひんぱんに使うこともあまりないでしょう。

試しに「Pricing Tables」という海外製プラグインの無料版で作った料金比較表がこちら。
テキストを入力するだけなので楽っちゃ楽です。（ただし英語なので使い方を習得するまでがちょいと大変）

デザインはプラグイン任せで、このプラグイン（無料版）に関しては細かいカスタマイズは無理でした。
なので”これで充分”という方はプラグインでの作成も検討の一つかと。

ベース作成

ということでここでは＜カラム＞ブロックを使ったやり方で進めていきます。

ただこれに関してはブロックの組み合わせ次第でいくらでもやり方は存在します。たとえば背景に画像を表示したければ＜カバー＞ブロックを足すとかですね。
でもそれらを全部紹介するのは無理なので、筆者が試した中で一番融通性が高かった（と思われる）やり方をご紹介します。

まずは＜カラム＞ブロックを挿入します。なお今回は3つの料金コースという前提で作成するので［カラム］数は「3」に設定します。

4以上の場合は個々のカラムではなく＜カラム＞ブロックを選択状態にして数値を”４”に変更します

＜カラム＞ブロックとその中に格納される3つの個別カラムの区別が混同しやすいので、ここからは大枠のカラムブロックは＜カラム＞ブロック、その中に格納される個々のカラムは［カラム］と表記します。

3つの［カラム］のうち左端の［カラム］をクリックして＜縦積み＞ブロックを追加します。

挿入予定のテキストやボタンをとりあえずダミーでいいので＜縦積み＞ブロック内に配置していきます。
（レイアウト調整用なのでこの時点ではダミーテキストでもOK）

次にテキストサイズや背景色などの装飾もある程度済ませておきます。
ここでは下のように装飾してみました。

背景色は＜縦積み＞ブロックを選択状態にしてからサイドバーの【スタイル】タブ内の『背景色』で設定できます。

簡単な親ブロックの選択方法

下のような＜リスト＞ブロックと、その背景に色をつけるべく＜グループ＞ブロックで周りを囲んだ二重ブロックがあるとします。

この時＜リスト＞ブロック全体を選択するにはリスト内を適当にクリックしてサイドバーから『親のリストブロックを選択』をクリックします。

さらに＜リスト＞ブロックを囲んでる＜グループ＞ブロックを選択するには＜グループ＞ブロックの境界線をクリックすれば＜グループ＞ブロック全体を選択状態にできます。

ただし上の画像のように境界線がはっきりしているものはクリックしやすいですが、境界線がわかりにくいブロック（点線だけなど）に関しては”クリックして選択”という方法がとりにくいです。

こういう時はツールバーを活用すると時短になります。

ツールバーを使ったやり方

たとえば＜リスト＞ブロックであればリスト内を適当にクリックしてツールバーの『親ブロックを選択』アイコンをクリックするだけで＜リスト＞ブロック全体が選択状態になります。

さらにもう1回クリックすると＜リスト＞ブロックを囲ってる＜グループ＞ブロックを一気に選択状態にできます。

親ブロックの選択が難しい時はこのやり方であれば即座に選択状態にできます。

見出しまで戻る

この時点で料金表レイアウトの共通仕様をある程度決めておくと、このあとコピー＆ペーストで2個目3個目と増やしていったときに後々の修正が多少の修正だけで済むようになります。実際のレイアウトも確認できます。

サンプルとしてはこの辺で完成にしておきます。

最後に（ツールバーの『親ブロックを選択』を使って）①＜縦積み＞ブロックを選択状態にし、そのまま②コピー（Ctrl＋C）します。
続いて隣の③［カラム］をクリックすると「＋」が出るのでそれをクリック→④＜縦積み＞ブロックを選択します。
そのまま他をクリックせずに⑤ペースト（Ctrl＋V）します。
さらに右端の［カラム］にも同じようにペーストします。

これで装飾等の設定が共通した3つの料金ブロックが完成します。

プレビューしてみて表示幅が狭いようなときは＜カラム＞ブロックを選択状態にして【配置】アイコンから『幅広』を選択します。（※PC用）
これでプレビューするとより広めの幅で表示されるようになります。

スタイル調整

文言等をそれぞれのコースに合わせて変えていきます。サンプルでは下のようにテキストの量を変えてみました。

下がPCとタブレットとスマホでの実際の表示サンプルです。

サイト管理人

肝心の金額を入れるのを忘れてました。こういうのを後から入れると、金額の前後のブロックの余白調整なんかも加わったりして結構面倒です。

テキスト量を変えたらPCとタブレットは［カラム］ブロックの中のコンテンツの量次第で高さ（背景色）がバラバラになってます。これは統一の高さにした方が見映えはいいでしょう。
タブレットはPCと同じレイアウトですが、幅が狭くなって見づらいのでこちらはスマホと同じレイアウトにする設定を加えてみます。
あとリンクボタンは最下段で位置を統一させた方がこちらも見た目すっきりします。
スマホは特に問題はなさそうです。

ということで最後に紹介する”まとめコード（スタイル群）”を追加した状態で改めてチェックしてみます。

その前にひと作業。
まとめコードを今回の料金比較表だけに適用するべく、（親となる）＜カラム＞ブロックを選択状態にし、サイドバーの【高度な設定】の『追加CSSクラス』に「ryokinhyo-blocks」と追加入力します。
これでまとめコードの設定がこの＜カラム＞ブロックだけに反映されます。

「ryokinhyo-blocks」というクラス名はこちらで勝手につけたものなので、変更したい場合はこのあとご紹介する”まとめコード”内のクラス名も変更したクラス名で統一する必要があります。

最終的な出力結果がこちらです。

今回の”まとめコード”ですが、リンクボタンを最下段で同位置表示（PC）にするには直前のブロックが＜リスト＞ブロックである必要があります。
それ以外のたとえば＜段落＞ブロック等では同位置表示になりません。それを実現するには新たにコードを増やす必要があります。（まとめコードの6,7行目）

＜カラム＞ブロックを選択状態にしてツールバーの矢印をクリックすれば各ブロックの左右入れ替えも即完了です。

《SWELL》であればサイドバーから境界線などの装飾も1発でかけられます。
＜縦積み＞ブロックを選択状態にするとサイドバーにいつもの装飾効果が出てくるので適当なものを選択します。

＜カラム＞ブロック版はこれで終了とします。

SWELLでの料金比較表

SWELLオリジナルの＜リッチカラム＞ブロックを使うともう1段階上の使い方もできます。
といっても最初の＜カラム＞ブロックの代わりに＜リッチカラム＞ブロックを使うだけで、あとのやり方はこれまでとほぼ同じです。

大きな違いがサイドバーの内容。
＜リッチカラム＞ブロックには『横スクロールで表示する』という機能が付いてます。

＜カラム＞ブロックの場合、スマホ閲覧時はデフォルトだと縦に1列に並ぶ表記に変わります。
それだと画面を上下にスクロールしながら比較することになり、縦目線移動でわかりやすさは半減します。
（緑枠のチェックを外すとPCと同じレイアウト表示になりますが画面が狭いのでかなり見づらくなります）

それを解消できるのが＜リッチカラム＞ブロックの『横スクロールで表示する』機能。
PCと同じ並列表記で文字も大きく表示され、横スクロールなので横目線移動になり文言の分量や違いなどもわかりやすくなります。

ただしこの『横スクロールで表示する』機能をONにすると、デフォルトではPCを含むすべてのデバイスで横スクロールになってしまいます。
でも画面幅の広いPCならわざわざ横スクロールはさせずに一気に全部を見せた方がわかりやすいでしょう。マウスでスクロールバーをいちいちつまむのも面倒ですし。

ということでPCでは横スクロールを表示させず、タブレットとスマホのみ横スクロールにするやり方をご紹介します。
といっても＜リッチカラム＞ブロックの標準機能だけでできちゃうのでそんな大げさな話ではありません。

PCで横スクロール機能OFF

『横スクロールで表示する』機能をONにするとサイドバー内の項目は以下のようにカラム数表記から横幅指定表記に変わります。

デフォルトではPCとタブレット（の各［カラム］ブロック）が横幅400pxで表示されるようになってます。
そのうちPCのみを3ブロックなら（100÷3＝）30～33くらいの間の数値に変更し、なおかつ単位を「%」に変更します。
30～33の数値は実際に表示してみて各ブロック間の余白の空き具合で数値を調整します。
（数値を大きくすると余白が狭くなります）
タブレットとスマホ側の数値はそのまま変更なしでOK。

これでPCでは固定表示、タブレットとスマホでは横スクロールでの表示レイアウトになります。

「スクロールできます→」非表示

『横スクロールで表示する』機能をONにすると、SWELLでは右肩に「スクロールできます→」というテキストがゆらゆらと動きながら表示されます。

しかしながらPCで横スクロールを実質OFF（※%表示）にするとこの表示はかえって邪魔になるというか誤解されてしまいます。
そこで『PCだけ「スクロールできます→」を非表示にする』という設定をまとめコードに追加してあります。

なおタブレットでもPCと同じように1画面内で見せたい場合もあるかもしれません。その場合は横幅指定をPC同様「%」表記にすれば実現できます。
ただし”タブレットでこのレイアウトにしたときは”という条件での「スクロールできます→」の非表示はどうやっても無理でした。

まとめコードと実際の表示

下の方にまとめコードがありますが、その中にはここで説明した以外の隠し設定も含まれています。そのため個々の説明は割愛します。

＜カラム＞ブロック版と＜リリッチカラム＞ブロック版用設定が混在になってます。

【カスタムCSS＆JS】の『CSS用コード』内に下のスタイルをコピー＆ペーストします。
（こちらはテーマ《SWELL》での設定画面です）

テーマによっては『追加CSS』と呼ばれる項目になってることも。要はオリジナルのCSSを追加する場所です。

そういった設定項目がない場合は子テーマを作成してそちらのstyle.cssに追記する手もあります。ただしその場合はすべてのページで下記スタイルが読み込まれることになります。

.ryokinhyo-blocks .wp-block-group,
.ryokinhyo-swellblocks .wp-block-group,
.ryokinhyo-swellblocks:not([style*="--clmn-w--tab:100%"]) {
	height: 100%!important;
}
.ryokinhyo-blocks .wp-block-group .wp-block-list,
.ryokinhyo-swellblocks .wp-block-group .wp-block-list {
	flex-grow: 1!important;
}
@media screen and (max-width: 1024px) {
	.ryokinhyo-blocks,
	.ryokinhyo-swellblocks[style*="--clmn-w--tab:100%"] {
		display: block;
	}
	.ryokinhyo-blocks .wp-block-group,
	.ryokinhyo-swellblocks[style*="--clmn-w--tab:100%"] .wp-block-group {
		height: auto;
	}
	.ryokinhyo-blocks .wp-block-column,
	.ryokinhyo-swellblocks[style*="--clmn-w--tab:100%"] .wp-block-column {	
		margin-bottom: 1em!important;
	}
	.ryokinhyo-swellblocks[data-scrollable="1"] .swell-block-columns__inner > .swell-block-column:not(:last-child) {
		margin-right:1em!important;
	}
}
@media screen and (min-width:641px) {
	.ryokinhyo-swellblocks[data-scrollable="1"] .swell-block-column {
		margin-inline: auto!important;
	}
}
@media screen and (min-width: 1025px) {
	.ryokinhyo-swellblocks[data-scrollable="1"] .c-scrollHint {
		display: none!important;
	}
}

［ワードプレス6.8.3＆SWELL2.15.0で動作検証済み］