はじめに
はてなCMSのデザインに関わる方を対象に、デザイン設定画面を使ったカスタマイズ方法を記載しています。
ノーコードエディタについては「ノーコードエディタの操作方法」を参照してください。
本資料の構成
本資料は下記の構成になります
別資料の「はてなCMS（旧：はてなブログMedia）スタートガイド」も合わせてご一読ください。
1. デザイン設定画面でのデザインについて
デザイン制作の基本的な仕組み
ヘッダ・フッタ要素のHTML記述、各種モジュールの設置をした後、各要素をCSSによって装飾します。
デザインできる範囲
プレビューを確認しながらデザインできる範囲は、「トップページ」と「記事ページ」の２つです。
「記事一覧ページ」「カテゴリーページ」「検索結果ページ」などは、基本的には記事ページと共通のデザインとなります。
それぞれカスタマイズを行う場合は、bodyタグに付与されているユニーククラスを使用し装飾設定をしてください。
トップページ（http://○○○○.samle.com/）
記事ページ（http://○○○○.samle.com/entry/～）
記事一覧ページ（http://○○○○.samle.com/archive）
はてなCMS専用デザインテーマについては「デザインテーマの種類」もご参考ください。
デザイン面での「はてなブログ」と「はてなCMS」の違い
はてなCMSは以下の部分を除いて、はてなブログ（一般ユーザー向け）のデザインテーマ制作と共通です。
はてなCMSのデザイン設定画面でのみできること
- トップページの作成
- ヘッダ、メインカラム、サイドバーへモジュールを設置することで、企業やメディア運用に合わせたオリジナルのトップページが作成できます。
- 記事上、記事下（ソーシャルパーツ上・下）へのモジュール設置
はてなブログのデザインテーマ制作については、「デザインテーマ制作の手引き」をご確認ください。