Cocoonをコーポレートサイトっぽくカスタマイズ！③料金表編

WORDPRESS

2021.05.012019.10.18

誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ！」の3回目。料金表編です。

※こちらクラシックエディタ向けの記事になります。

1回目「トップページ編」、2回目「メニュー編」はこちら。

料金表といえばテーブル、つまり表。
表なんて簡単じゃん、と思うでしょうし私もそう思ってたんですが、スマホ・PCどちらでも綺麗に見せようと思うとけっこう悩むんですよね…。

今回はこんな感じの料金表ページにしようと思います。

あ、メインビジュアルの写真変えました。
全ページのサンプルができたらこのサイトも公開しようと思います。

固定ページでは「更新日」を表示させたくない

このサンプルではページを「固定ページ」で作成し、「投稿」でお知らせやスタッフブログを作ろう、と考えています。
さて、タイトルの右下にご注目ください。

投稿日と更新日が表示されている！

お知らせやブログなどの情報は「情報の鮮度」や「いつの情報なのか？」が大事かもですが、料金ページやアクセスページなどは投稿日は不要と思われます。
ので、表示させないようにしたいと思います。

日付の表示設定は「Cocoon設定」の「SEO」「本文」にありますが、こちらで「表示しない」の設定にすると、ブログなどの「投稿ページ」でも表示されなくなってしまうんですよね。（少なくとも2019年10月では個別の設定が出来ないと思います）

なので、ここは泣く泣くdisplay:none;を使用します。

スタイルシートに

.page .date-tags {
    display: none;
}

を記述。

これは公式のフォーラムにも書き方が載っています。

表の上が、「左にメニューの説明」「右にイメージ写真」という2カラム構成になっているのですが、Cocoonはこのカラム分けがめっちゃ簡単。

「ビジュアルエディタ」を使用します。

「タグ」のプルダウンから、今回は「2カラム（1:1）」を選択。

すると簡単にカラム分けが出来ます…！
（編集画面ではカラムに背景色が付いていますが、実際は背景色はないです。）

あとは見出しやテキスト、画像を入れていくだけ。

Cocoonは便利機能が多すぎて使いきれない。ほんとすごい。

表（テーブル）を作っていきます。
今回は「メニュー」「料金」「説明」の3列のもの。
表（テーブル）は、以前ご紹介した「Table Tag Generator」で簡単に作れます。

以前の記事です。

テーブルをスマホで見るとこんな感じで、説明の部分の行が多くなっています。
スペック紹介などでよくありますね。

「Cocoon設定」の「本文」タブの「テーブル設定」で「レスポンシブテーブル：横幅の広いテーブルは横スクロール」にチェックを入れると、横スクロールするようになります。

列が多い表だと、スマホでは列幅が狭くなり改行が多くなってしまうため、場合によってはこの方が見やすいかもしれません。

ちなみにこの横スクロール、チェックを入れるとPCでもスクロールしてしまいます。
今回はメディアクエリの設定を追記して、768px以下だけ横スクロールするようにしました。

「レスポンシブテーブル：横幅の広いテーブルは横スクロール」にチェックを入れて、CSSに下記を追加。

@media screen and (min-width: 769px){
.scrollable-table th, .scrollable-table td {
	white-space: normal;
}
}

特に難しい事はしていないのですが、Cocoonのカラム分けとテーブルのレスポンシブ化機能を紹介したかったので書きました。
料金表だったり会社概要だったり、表を使う機会ってけっこう多いんですよね。

ひととおりできあがったサンプルサイト公開しています。（広告出ますが…）
スクロールアニメーションについてはコチラの記事で書いてます。