Utopiaには、サイト全体のコンテンツ幅やサイドバーの表示・位置、余白などを、コードを書かずに管理画面の操作だけで調整できる「レイアウト設定」という専用画面が用意されています。カラーや見出しスタイル、フォントを扱う「デザイン設定」とは別に、ページの「骨格」にあたる部分をここでまとめて管理できるのが特徴です。子テーマを作ってCSSを書き足さなくても、サイトの見え方を大きく変えられます。
コンテンツ幅は10段階のプリセット＋カスタム入力に対応
「コンテンツ幅」の項目では、640pxから1400pxまで10段階のプリセットに加えて、「100%（全幅・レスポンシブ）」も選択できます。プリセットに欲しい数値がない場合は「カスタム」を選べば、850pxや90%、60remといった値を直接入力することも可能です。狭めの幅で文字を読みやすくしたいブログサイトから、画面いっぱいに使いたいランディングページまで、目的に応じて幅を選べます。
投稿・固定ページごとに幅を個別設定できる
このレイアウト設定の特徴は、コンテンツ幅をサイト全体だけでなく「投稿メインカラム幅」「固定ページメインカラム幅」として、それぞれ個別に設定できる点です。どちらも初期状態では「デフォルトを使用（コンテンツ幅と同じ）」になっていますが、必要に応じて上書きできます。たとえば固定ページだけ幅を広げてランディングページのように使いながら、投稿（ブログ記事）は文章が読みやすい幅のまま保つ、といった使い分けを1つのサイトの中で両立できます。サービス紹介ページとお知らせ・コラムを同じサイトで運用している場合に、それぞれに合った見せ方を選べるのは実用的なポイントです。
サイドバーの表示・位置も切り替え可能
「サイドバーを有効にする」のチェックボックスで、ブログ関連ページへのサイドバー表示・非表示を切り替えられます。表示する場合は「サイドバーの位置」を右か左から選べます。サイドバー付きの従来型ブログレイアウトにするか、本文の幅を最大限に使ったシンプルなレイアウトにするかを、サイトの目的や記事の内容に応じて選べます。運営中に方針を変えたくなった場合も、チェックの切り替えだけで対応できます。
余白プリセットとウィジェット・サイドバーの配色も調整できる
「余白プリセット」では、コンパクト・ノーマル・スペーシャスの3段階から、セクションやコンテンツブロック間の余白の詰まり具合を選べます。情報量の多いサイトはコンパクトに、余白を活かしたゆったりした印象にしたいサイトはスペーシャスに、といった調整が可能です。さらに、コンテンツ上下やフロントページのウィジェットエリア、サイドバーエリアについても、背景色とテキスト色をそれぞれ個別に設定できます。レイアウトの骨格だけでなく、細部の配色まで一つの画面から管理できるのは、デザイナーやエンジニアに依頼せず自分で調整したい方にとって助かるポイントです。
デザイン設定と組み合わせて使える
以前ご紹介した「デザイン設定」ではカラーパレットや見出しスタイル、フォントを調整できますが、今回の「レイアウト設定」はそれと組み合わせて使うことを想定した画面です。色やフォントで世界観を作り、レイアウト設定で幅や余白、サイドバーの構成を整えることで、テーマ本体の機能だけでオリジナリティのあるサイトに近づけられます。
まずはレイアウト設定を開いて試してみる
「レイアウト設定」は管理画面から誰でもすぐにアクセスできます。まずはコンテンツ幅とサイドバーの表示・位置を実際に変更し、保存後に公開ページでどのように見た目が変わるかを確認してみてください。設定はいつでも変更できるため、気軽に試しながら自分のサイトに合ったレイアウトを見つけられます。
