ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマSEEED:プラン一覧を4カラムで表示させる方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.トップページのフリースペースにてクイックタグの「プラン一覧」を表示させましたが、4つのプランをスクロールなしで表示させたいです。

トップページや固定ぺージ(サイドバー非表示)にプラン一覧を表示させた場合、4つ以上のプランを登録すると、自動的に横スクロール仕様の表示になります。

プラン一覧とは?SEEEDでは、「プラン一覧」という独自のクイックタグを搭載しています。クイックタグでプラン一覧の内容を登録しておくと、サイト内の各所でそのプラン一覧をクイックタグ(ショートコード形式)で呼び出して表示させることが出来ます。

▼変更後のイメージ  →変更前(3カラム表示):SEEEDデモサイト
変更箇所イメージ

A.下記の方法で対応してください。

TCDテーマ>基本設定のカスタムCSSに入力してください。

.pc .design_plan_list .list {
    width: calc(100% / 4); }
.pc .design_plan_list .top .price .num {
    font-size: 45px; }

 
補足)
・綺麗に見せるため、価格部分のフォントサイズも調整しています(50px→45px)。
・スマホ表示や記事本文内のプラン一覧には適用されません。
・数値の変更で5カラム表示も可能ではありますが、各プランの横幅が狭くなるためおすすめできません。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事