次は、サイトの「デザイン」をカスタマイズする方法をご紹介します。 はてなCMSには、手軽に全体を整えるエディタと、こだわりを詰め込めるエディタの2つを用意しています。
2つのカスタマイズ方法を知る
はてなCMSには、サイトのデザインをカスタマイズする方法が2つあります。
「デザイン設定」では、サイト全体をまとめてカスタマイズができ、「ノーコードエディタ」では、ページごとにカスタマイズできます。それぞれ特長があり、組み合わせても活用できるので、ぜひ使ってみてください。
| 「デザイン設定」 | 「ノーコードエディタ」 | |
|---|---|---|
| 特長 | サイト全体をまとめてカスタマイズ | ページ単位で0から自由にレイアウト |
| 使い方 | 決まった箇所にモジュールを選択して配置 | ボタンなどのパーツをドラッグ＆ドロップで直感的に配置 |
| 優先度 | デフォルトで適用 | 作成したページは「デザイン設定」より優先される ※1 |
| おすすめ | ブログ記事やサイト全体の統一感を出すのに最適 | LPやキャンペーンページなど、特別なページを作るのに最適 |
※1 デザイン設定で指定したCSSを適用できます。
1. 「デザイン設定」を確認する
サイト作成時に選んだデザインテーマがすでに適用されています。変更したい場合や、細かな色などを調整したい場合はここでカスタマイズできます。
- 管理画面の左メニューにある「デザイン」をクリックします
- 「デザイン設定」が開き、現在適用されているテーマが表示されます
- 左メニューの「カスタマイズ」タブ（スパナアイコン）内で、トップや下層ページにモジュールを追加・編集・削除などができます
詳しい操作方法は「1.はてなCMSのデザインについて - デザインガイド」をご覧ください。
2. 「ノーコードエディタ」を試してみる
次に、パーツを自由に配置できるノーコードエディタを使ってみましょう。
いきなりトップページを編集するとサイト全体のバランスを取るのが難しいため、まずは「固定ページ（会社概要やサービス紹介など）」を作成して、操作に慣れていただくのがおすすめです。
詳しい操作方法は「ノーコードエディタの操作方法」をご覧ください。
次のステップへ