Gutenberg、だいぶ使いやすくなったので移行中です

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

Cocoonをコーポレートサイトっぽくカスタマイズ WORDPRESS

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

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

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

 

 

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

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

Cocoonで作る料金表ページ

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

 

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

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

cocoonの固定ページでは更新日を表示させない

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

 

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

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

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

スタイルシートに

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

を記述。

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

 

Cocoonのカラム分けがめちゃくちゃ便利

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

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

Cocoonのカラム分け

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

Cocoonのカラム分け

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

Cocoonのカラム分け

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

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

 

料金表をテーブルで作る

表をさくさくと作れるTable Tag Generator

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

 

以前の記事です。

 

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

Cocoonのテーブル

Cocoonはテーブルのレスポンシブ化もワンクリック

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

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

横幅の広いテーブルは横スクロール

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

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

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

 

料金表ページの完成

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

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

コメント

タイトルとURLをコピーしました