こんにちは。SaitoKouです。TCDのVOGUEを使用していた時に、サイドバーのないLPチックなページを作成しようと思っていたのですが、Full Widthテンプレートを使用した際にバランスのいい見映えにするのに手間取ったので、メモしておこうと思います。
現象
まず、今回作ろうとしている固定ページのレイアウトです。
こんな形で、
・会社概要は、適度な幅を設定して表示。
・アクセスマップは全幅に設定して表示。
としようとしています。
これを完成図としてイメージし、固定ページを作っていきます。会社概要の見出し、表、アクセスの見出し、GoogleMapと要素を配置していきます。公開前に、GoogleMapが全幅なので、テンプレートを「Full Width」にしました。作り終えたところでプレビューしてみると、こんなページになりました。
見出しや表の左端が、画面いっぱいに広がってしまっています。これは想定していたものと違うので、いったんテンプレートを「No Side」にしてみました。するとこうなりました。
まあこれでも見た目は悪くないんでまあいいか・・・といった感じですが、なんとなくモヤモヤ。うまく横幅をちょうどよく調整した要素もありつつ、全幅にしたい要素は全幅にと混在させることはできないのでしょうか。
解決策
テンプレートは「Full Width」にする。
全幅にしたい要素がある場合は、「Full Width」を指定する必要があります。ほかのテンプレートだと、すべてのコンテンツの横幅が制限されてしまうためです。
横幅を制限したい要素にのみ、横幅を指定する。
今回の例でいうと、GoogleMap以外の要素は横幅を指定します。
ブロックエディタを使用している場合。
・「カラム」ブロックを選択
・右サイドバーの歯車マークをクリック ＞「カラム」を３にする。
・それぞれのカラム一つ一つを選択 ＞ 歯車マーク ＞ 幅を指定する。（左カラムから空白, 700px, 空白にします。）
上記のような状態を作り、真ん中のカラムに見出しや表を作成します。GoogleMapだけは、このカラムの外に作ります。
TCDページビルダーを使用している場合。
横幅を設定したいブロックを編集します。
ブロックの横幅を指定します。
これらの設定により、GoogleMap以外の要素は横幅が指定され、予定していた見た目になったかと思います。
まとめ
「カラム」を使う方法は、HTML/CSSを使わなくても横幅を制限することができるため、コーディングを使用せずに設定しようとしている場合は使える技かなと思います。
今回の方法で、TCD VOGUEでも、それ以外のテーマでも横幅と全幅のコンテンツを組み合わせたデザインを作っていってください！
<PR> WordPress、TCDテーマでのサイト制作に苦戦していませんか？
当ブログの筆者は、世界で最も人気のあるコンテンツマネジメントシステムであるWordPressと、美しいデザインであるTCDテーマを利用したWebサイト制作をご提供しています。
・なかなか思うようなデザインにならない・・・。
・設定するのに時間がかかって、いつまでも公開できない・・・。
・サイト制作を制作会社に依頼しようにも、値段が高い・・・。
このようなお悩みをお持ちの方は、ぜひ一度SaitoKouにご相談ください。
