はじめに
はてなCMSのデザインに関わる方を対象に、デザイン設定画面を使ったカスタマイズ方法を記載しています。
ノーコードエディタについては「ノーコードエディタの操作方法」を参照してください。
本資料の構成
本資料は下記の構成になります。
本ページは「3.参考資料」です。まずは 1 と 2 をお読みください。
別資料の「はてなCMS（旧：はてなブログMedia）スタートガイド」も合わせてご一読ください。
3. 参考資料
はてなCMS HTML構造
全体
ヘッダとフッタ
メイン部分
記事ページ
記事ページのHTML構造はカスタマイズしている内容によって異なるので、開発者ツールを用いてご確認ください。
設定ガイド
PCでHTMLを記述、モジュールを設置できる箇所について
- 全ページ共通表示（任意のHTMLを記述できます）
- トップページのみ表示（任意のモジュールを配置できます）
- 記事ページのみ表示（任意のモジュールを配置できます）
- 記事ページのみ表示（任意のHTMLを記述できます）
- トップページ以外の全ページ共通表示（任意のモジュールを配置できます）
- 記事ページのみ表示（任意のHTMLを記述できます）
- 全ページ共通表示（任意のHTMLを記述できます）
スマートフォンでHTMLを記述、モジュールを設置できる箇所について
（デザインテーマをベースにしてデザインする場合）
- 全ページ共通表示（任意のHTMLを記述できます）
- トップページのみ表示（任意のモジュールを配置できます）
- 記事ページのみ表示（任意のモジュールを配置できます）
- 記事ページのみ表示（任意のHTMLを記述できます）
- 全ページ共通表示（任意のモジュールを配置できます）
- 全ページ共通表示（任意のHTMLを記述できます）
- フッタモジュールにいずれかのモジュールを配置すると、「プロフィール/検索/注目記事」は自動的に非表示となります
ダッシュボードメニュー：デザイン設定画面メニュー概要
はてなCMSの管理画面（ダッシュボード）で、「デザイン」を選択すると「デザイン設定画面」が表示されます。デザインはPC、スマートフォンそれぞれで設定いただく必要があります。
PC設定画面メニュー
- ヘッダ要素のHTMLを編集できます。（全ページ共通、PCとスマホで分けることも可能です）
- PCのトップページに任意のモジュールを配置できます。
- PCのトップページ以外のページのサイドメニューに任意のモジュールを配置できます。
- フッタ要素のHTMLを編集できます。（全ページ共通、PCとスマホで分けることも可能です）
- 記事ページの所定の位置に任意のモジュールを配置できます。
- 記事本文の上下に任意のHTMLを配置できます。
- デザインをカスタマイズするCSSを自由に記述できます。
スマートフォン設定画面メニュー
- スマートフォンビューのデザインテーマが選択できます。
- ヘッダ要素のHTMLを編集できます。（全ページ共通、PCとスマホで分けることも可能です）
- スマートフォンのトップページのヘッダに任意のモジュールを配置できます。
- スマートフォンのフッタに任意のモジュールを配置できます。（全ページ 共通）
- フッタ要素のHTMLを編集できます。（全ページ共通、PCとスマホで分けることも可能です）
- 記事ページの所定の位置に任意のモジュールを配置できます。
- 記事本文の上下に任意のHTMLを配置できます。
- レスポンシブデザインの設定ができます。
PCデザイン設定画面
ヘッダ・フッタの編集（全ページ共通）
「ヘッダ（タイトル下）」「フッタ」は、それぞれの入力フォームに記述されたHTMLが上記のようなイメージで表示されます。
参考図は2カラム構成の一般的なレイアウト例です。CSSによってレイアウトは変更可能です。
モジュールの配置（トップページ）
それぞれのエリアごとに任意のモジュールを配置できます。
- トップページヘッダ
- トップページメインカラム
- トップページサイドバー
記事上下HTMLの編集とソーシャルパーツ設定（記事ページ）
任意のソーシャルパーツを記事上下にそれぞれ配置できます。
「記事上」「記事下」それぞれのフォームに記述されたHTMLが表示されます。
ここでの設定はスマートフォンにも適用されます。ただし、スマ ートフォンではソーシャルボタンは記事下のみとなります。
スマートフォンで記事上にもソーシャルボタンを配置したい場合は、直接記述いただけます。
参考図は2カラム構成の一般的なレイアウト例です。CSSによってレイアウトは変更可能です。
サイドバーモジュールの配置（記事ページ）
記事上下、サイドバーに任意のモジュールを配置できます。
サイドバーは、トップページ以外の全ページに共通表示されます。
スマートフォン デザイン設定画面
デザインテーマをベースにしてデザインする場合になります。
ヘッダ・フッタの編集（全ページ共通）
ヘッダ画像：サイトロゴなどを設定して表示します。ヘッダ画像を設定せずに「タイトル下HTML」でロゴ画像を含めデザインすることもできます。
ページャ下・フッタ：デザインメニューの各フォームに記述されたHTMLが、参考図の位置にそれぞれ表示されます。
フッタモジュールの配置（全ページ共通）
参考図の位置に任意のモジュールを設定できます。設置したモジュールは全てのページで表示されます。
フッタモジュールの「プロフィール・検索・注目記事」を非表示設定にした場合、赤枠内の要素が全て非表示となります。
カテゴリーの上下選択、記事上下のHTML編集（記事ページ）
デザインメニューの各フォームに記述されたHTMLが、参考図の位置にそれぞれ表示されます。
スマートフォンのデザインではカテゴリーの表示位置を記事下にすることもできます。
カテゴリーを複数表示したい場合は、ファーストビューを圧迫しないよう記事下に設定することをオススメします。
記事下のソーシャルボタンは、PCの設定画面で選択したソーシャルボタンが表示されます。
記事上下モジュールの配置（記事ページ）
それぞれのブロックごとに任意の モジュールを配置できます。
- 記事上
- 記事下1
- 記事下2
トップページヘッダモジュールの配置（トップページ）
参考図の位置に任意のモジュールを設定できます。
設置したモジュールはトップページのみ表示されます。
下記3箇所は「全ページ共通」の表示要素です。参考図の赤線枠に表示されます。
- ヘッダ
- フッタモジュール
- フッタ
ファイルアップローダー
ファイルアップローダーについて
デザイン用CSSやSVGなどのファイルを置くための簡易ファイルアップローダーを利用することができます。
管理画面 > 「ファイルアップローダー」からご利用ください。
アップロード可能なファイル形式と容量は「アップロード可能なファイル形式と容量」をご参照ください。
アップロードしたファイル一覧は「ファイルアップローダー」内にある「過去のアップロード結果」で確認できます。ファイルを編集する機能はございません。
はてなフォトライフからアップロード
はてなフォトライフから、画像のファイルがアップロード可能です。
対応している形式は、画像（JPEG・PNG・GIF）です。
はてなフォトライフを使う場合の注意
新規フォルダを作成し、公開範囲を「自分のみ」に変更してください。
公開範囲を「自分のみ」としてもURLを指定すれば素材としてお使いいただけます。
アップロード後、画像を右クリックし画像のパスを取得してください。
はてなフォトライフに関しては、「『はてなフォトライフ』を使う」もご参考ください。
フォトライフは毎月3GB×5名様分使用できます。容量の上限はございません。
生成されるURLには投稿アカウントのidが含まれます。利用するアカウントが複数存在したり、個人のidでログインしている場合はご注意ください。
導入事例一覧
はてなCMSのオウンドメディア導入事例は、はてなCMS「導入事例」にてご確認いただけます。
「はてなCMSデザインガイド」に記載のないその他の機能について
はてなCMSには、一般向けブログサービス「はてなブログ」との共通機能が多くあります。
デザイン設定を進める際には、「はてなブログヘルプページ」も併せてご参照ください。