特長的なトップページ構築方法につきご一読ください
1. 管理者ユーザーでウィジェットの追加
まずは、WordPressの管理画面にある「ウィジェット」機能を使って、トップページに表示する各コンテンツを順に配置していきます。CoreEditでは、あらかじめ用意されたオリジナルウィジェットを使用することで、見出し・本文・画像などの要素を編集者が簡単に入力できる仕組みになっています。これにより、専門的な知識がなくても、直感的な操作でページの内容を更新できます。
また、CoreEditでは各ウィジェットの種類ごとに、編集者による操作を許可するかどうかを設定する機能があります。これにより、たとえば「投稿ウィジェット」などの重要なコンテンツについては、編集者が誤って内容を変更できないように制限をかけることが可能です。逆に、テキストや画像といった比較的シンプルなウィジェットは、編集者が自由に編集できるように設定しておくことで、実際の運用時のトラブルを防ぎつつ、現場での更新作業の柔軟性を高めることができます。
セクションごとにウィジェットを配置することで、画面全体幅の背景色をCSSで変更できるなど視覚的に区切られたページ作成が可能になります。
2. 専用ウィジェットの見た目設定・出力順を調整
このページでは、テーマ専用のウィジェットエリア（Section1〜10）ごとに、表示するウィジェットのスタイルや並び順を自由に設定できます。
セクション単位で視覚的に切り分けられたページを作成できます。
利用例
Section1：3カラム構成で、各ウィジェットの見た目を「スライド」「リスト」「グリッド」などから選択
Section2：テキスト中心のレイアウトに変更し、ニュースやお知らせを一覧表示
Section3：画像＋テキストを組み合わせて、商品紹介や実績を配置
このように、各セクションごとにデザインや役割を切り替えることで、トップページを自由にカスタマイズできます。
3. CSSを編集して見た目の調整
CoreEditでは、各オリジナルウィジェットごとに、あらかじめ用意された見た目のテンプレート（レイアウトスタイル）を管理画面上で選択することができます。これにより、編集者はコードに触れることなく、表示スタイルの切り替えが可能です（※2. 専用ウィジェットの見た目設定・出力順を調整を参照）。一方で、より細かな調整が必要な場合には、技術者がCSSを用いてスタイルを上書き・追加することで、各セクション単位のデザイン調整を柔軟に行えます。
CSSのカスタマイズは、CoreEditの設定画面にある『追加CSS』フォームをご利用いただくと、簡単に反映できます。
ウィジェットから出力されるHTMLコード例：
<div id="section1" class="ce-section"> //ウィジェットエリア毎にSectionXのIDが割り振られる
<div class="container"> //コンテンツ幅（初期値：1360px）
<div id="coreedittxt-1" class="s-1 widget widget-container widget_coreedittxt">
<section class="CoreEditTxt coreedittxt-1"> //各ウィジェットにはcoreedit〇〇〇-Xの形式でIDやClassが設定される
<div class="cet-inner widget-inner"> //widget-inner内にコンテンツが出力される
<header class="cet-title">
<h2 class="widget-title">Section 1 Area</h2>
</header>
<div class="cet-text">
<p>デモtext</p>
</div>
</div>
</section>
</div>
</div>
</div>ウィジェットにより多少の差はありますが、基本的に同じようなコードが出力されるので適宜CSSを設定して見た目を整えてください。