誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ!」の3回目。料金表編です。
※こちらクラシックエディタ向けの記事になります。
1回目「トップページ編」、2回目「メニュー編」はこちら。
料金表といえばテーブル、つまり表。
表なんて簡単じゃん、と思うでしょうし私もそう思ってたんですが、スマホ・PCどちらでも綺麗に見せようと思うとけっこう悩むんですよね…。
今回はこんな感じの料金表ページにしようと思います。
あ、メインビジュアルの写真変えました。
全ページのサンプルができたらこのサイトも公開しようと思います。
固定ページでは「更新日」を表示させたくない
このサンプルではページを「固定ページ」で作成し、「投稿」でお知らせやスタッフブログを作ろう、と考えています。
さて、タイトルの右下にご注目ください。
投稿日と更新日が表示されている!
お知らせやブログなどの情報は「情報の鮮度」や「いつの情報なのか?」が大事かもですが、料金ページやアクセスページなどは投稿日は不要と思われます。
ので、表示させないようにしたいと思います。
日付の表示設定は「Cocoon設定」の「SEO」「本文」にありますが、こちらで「表示しない」の設定にすると、ブログなどの「投稿ページ」でも表示されなくなってしまうんですよね。(少なくとも2019年10月では個別の設定が出来ないと思います)
なので、ここは泣く泣くdisplay:none;を使用します。
スタイルシートに
.page .date-tags { display: none; }
を記述。
これは公式のフォーラムにも書き方が載っています。
Cocoonのカラム分けがめちゃくちゃ便利
表の上が、「左にメニューの説明」「右にイメージ写真」という2カラム構成になっているのですが、Cocoonはこのカラム分けがめっちゃ簡単。
「ビジュアルエディタ」を使用します。
「タグ」のプルダウンから、今回は「2カラム(1:1)」を選択。
すると簡単にカラム分けが出来ます…!
(編集画面ではカラムに背景色が付いていますが、実際は背景色はないです。)
あとは見出しやテキスト、画像を入れていくだけ。
Cocoonは便利機能が多すぎて使いきれない。ほんとすごい。
料金表をテーブルで作る
表をさくさくと作れるTable Tag Generator
表(テーブル)を作っていきます。
今回は「メニュー」「料金」「説明」の3列のもの。
表(テーブル)は、以前ご紹介した「Table Tag Generator」で簡単に作れます。
以前の記事です。
テーブルをスマホで見るとこんな感じで、説明の部分の行が多くなっています。
スペック紹介などでよくありますね。
Cocoonはテーブルのレスポンシブ化もワンクリック
「Cocoon設定」の「本文」タブの「テーブル設定」で「レスポンシブテーブル:横幅の広いテーブルは横スクロール」にチェックを入れると、横スクロールするようになります。
列が多い表だと、スマホでは列幅が狭くなり改行が多くなってしまうため、場合によってはこの方が見やすいかもしれません。
ちなみにこの横スクロール、チェックを入れるとPCでもスクロールしてしまいます。
今回はメディアクエリの設定を追記して、768px以下だけ横スクロールするようにしました。
「レスポンシブテーブル:横幅の広いテーブルは横スクロール」にチェックを入れて、CSSに下記を追加。
@media screen and (min-width: 769px){ .scrollable-table th, .scrollable-table td { white-space: normal; } }
料金表ページの完成
特に難しい事はしていないのですが、Cocoonのカラム分けとテーブルのレスポンシブ化機能を紹介したかったので書きました。
料金表だったり会社概要だったり、表を使う機会ってけっこう多いんですよね。
ひととおりできあがったサンプルサイト公開しています。(広告出ますが…)
スクロールアニメーションについてはコチラの記事で書いてます。
コメント