はじめに
本資料は、はてなCMSのデザインについて説明した資料です。
はてなCMSのデザインに関わる方を対象にした内容になっています。
本資料の構成
本資料は下記の構成になります。
別資料の「はてなCMS（旧：はてなブログMedia）スタートガイド」も合わせてご一読ください。
2. デザイン制作の流れ
はてなCMS開設までの事前準備
「はてなID」「本番用のはてなブログ」を準備し、はてなCMSを開設する
はてなCMSの開設については、ブログMedia スタートガイドの「2.ブログの開設」をご確認ください。
ブログの開設が済みましたら、ログインした状態で次へ進んでください。
デザイン制作を開始する前に
動作確認のためのサンプル記事を投稿する
動作と見た目を確認するため、サンプル記事を投稿してください。最低でも 2、3記事あると確認しやすくなります。
管理画面の「記事を書く」から投稿できます。
全ての記事をインポートしたブログも、サンプル記事を最低1つ以上、新たに投稿してください。
サンプル記事が無い場合、プレビューがうまく表示できない可能性があります。
サンプル記事を入れるときのコツ
画像の量や配置、タイトル・本文の長さ、カテゴリーの数など、本番で公開予定の記事フォーマットとできるだけ近いものを入れるのがおすすめです。
動作確認のみを行う場合
「サンプルエントリー」をご利用ください。
記事作成時の編集モードについて
見たままモード、はてな記法モード、Markdownモード、HTMLモードの4種類の編集モードを選択出来ます。
各編集モードの記事本文内に記述可能な見出し
見たまま / はてな記法の本文内見出しは、h3 〜 h5のみ対応しています。
h1、h2、h6は、HTMLタグ記述でしか適応されませんが、Markdown / HTMLモードの為にCSS Styleは用意します。
|
見たまま / はてな記法 |
Markdown / HTML |
|
| h1 | ✖︎ | ◯ |
| h2 | ✖︎ | ◯ |
| h3 〜 h5 | ◯ | ◯ |
| h6 | ✖︎ | ◯ |
デザイン制作画面を確認する
デザインの設定は「デザイン設定画面」から行えます。
管理画面から「デザイン」をクリックし移動してください。
各モジュールの設置方法を確認する
任意のモジュールを追加することで、さまざまな要素を表示できます。
選んだモジュールを追加する際は「適用する」ボタンを押してください。
モジュールの設置方法は、PC版/SP版共通です。
モジュールについて
各モジュールの詳細については「モジュールを表示する」をご参照ください。
PC版のデザインについて
「ヘッダ」「フッタ」を制作する
「ヘッダ」「フッタ」メニューからHTMLを記述できます。
ヘッダ、フッタで変更した内容は、サイト全体に適用されます。
「トップページモジュール」を配置する
「トップページヘッダ」「トップページメインカラム」「トップページサイドバー」から、各モジュールの配置を行います。
これらはトップページのみ有効で、それ以外（記事ページ、カテゴリページなど）には反映されません。
それぞれの箇所に任意のモジュールを配置できます。
記事ページの設定方法を確認する
「記事」から記事ページのモジュール設定が行えます。
デザイン設定画面では、常にトップページがプレビューされています。
記事ページを確認する場合は「記事ページをプレビュー」ボタンを押してください。
記事が投稿されていないとプレビューできないのでご注意ください。
ページで設定できる箇所
- ソーシャルパーツの表示・非表示
- パンくずリストの表示・非表示
- 最終更新日の表示・非表示
- 記事上下のHTML記述
- 記事タイトル下に記事の概要の表示・非表示
記事ページ（記事の上下）にモジュールを設置する
記事上、記事下にも任意のモジュールを配置できます。
記事の上下のカスタマイズエリアである、記事上(日付上)・記事本文末尾・記事下(ソーシャルパーツ下)の各モジュールの配置は以下になります。
サイドバーにモジュールを設置する
「サイドバー」からモジュールを配置できます。サイドバーはトップページ以外の全ページで共通です。
デザイン設定画面ではトップページをプレビューしているため、サイドバーモジュールを設定変更してもプレビューされません。確認する場合は「記事ページをプレビュー」でご確認ください。
「デザインCSS」のフォーム内にCSSを記述する
デザイン設定画面の「デザインCSS」のフォーム内にCSSを記述し装飾を行うことができます。
デフォルトではテンプレートCSSがインポートされています。
hbm-simple-p1の場合：
/* <system section="theme"> */
@import url("/css/theme/hbm-simple-p1/style.css");
/* </system> */
/* <system section="background" selected="default"> */
/* default */
/* </system> */
このままテンプレートをご活用いいただいても、@import url("...")部分を削除し新しく記述いただいても構いません。
CSSファイルを直接アップロードすることも可能です。
詳しくは「参考資料/ファイルのアップロード」をご参照ください。
HTMLの構造について
各モジュールの詳細については「モジュールを表示する」をご参照ください。
スマートフォン版のデザインについて
SP（スマートフォン）版のデザイン制作画面を確認する
スマートフォン版のデザインは、デザイン設定画面のスマートフォンアイコンから行えます。
デザインの方法は2つあります。
- デザインテーマをベースにしてデザインする
- ノーマルテーマを使う
- メディアテーマを使う
- レスポンシブデザインにする
ベースとなるデザインテーマを確認する
デザインテーマをベースにしてデザインする場合、下記の2種類から選択できます。
ノーマル： 一般ユーザー向けに提供しているものと同様のテーマです
メディア： よりメディアに向いたデザイン制作がしやすいテーマです
表示できる要素などに違いはありません。
ノーマルテーマとメディアテーマの違いについて
ノーマルテーマは、個人向けのはてなブログと同様のデザインです。
メディアテーマは、以下の点を変更しています。
- トップページの新着記事一覧のデザイン（1画面により多くの記事が表示されるレイアウトになっています）
- 各モジュールのデザイン
- 記事ページの記事タイトルのフォントサイズを少し小さく（記事タイトルが長めになるメディアでの利用を想定）
- 記事ページ下の投稿idとタイムスタンプを非表示に
CSSでさらにデザインをカスタマイズすることもできます。
デザインテーマをベースとしたデザイン制作（全ページ共通要素）
全ページ共通で、以下の要素を設定できます。
| アクセントカラー | 「media-v2」のみ使用可能です |
| ヘッダ |
ヘッダ画像をアップロードしてお使いください
|
| フッタモジュール | フッタに最新記事や検索などのモジュールを配置できます |
| フッタ | HTMLを記述できます |
デザインテーマをベースにしてデザインする（トップと記事ページ）
トップページと記事ページでは、以下の要素を設定できます。
トップページのみで表示される要素
- トップページヘッダ
記事ページのみで表示される要素
- 記事上（日付上）
- 記事
- 記事本文末尾
- 記事下（ソーシャルパーツ下）
設定やプレビューの方法は、PC版と同様です。
CSSの追加・修正をする
デザイン設定画面（SP向け）の「ヘッダ」もしくは「フッタ」のHTML編集枠内に、<style>タグを用いてCSSを記述します。
レスポンシブデザインについて
レスポンシブデザインで制作する場合は、スマートフォンデザイン設定画面の「詳細設定」から「レスポンシブデザイン」をチェックしてください。
Media queries（メディアクエリ）などを使用し、どのデバイスから閲覧しても適切な見た目になるようPCデザイン設定画面の「デザインCSS」に記述してください。
テーマを使用して制作を行う場合は、テーマのCSS記述欄の先頭にResponsive: yesという行を含んだコメントを挿入してください。（下記一例）
レスポンシブデザインについては「レスポンシブデザインのテーマを作成する」をご確認ください。
下記のような記述がされている場合、スマートフォンデバイスに適したviewportをHTMLヘッダーで指定します。
高度なカスタマイズについて
高度なカスタマイズ使用時の注意点
記事モジュールでは、基本設定以外にも「高度なカスタマイズ」で変数を用いた設定が出来ます。
ただし、基本設定と比べ項目や内容に違いが出ます。
高度なカスタマイズをご利用になる際は、仕様を把握した上でご利用して下さい。
画像 {ImageURL}
アイキャッチ画像の出力サイズは「サムネイル画像を表示する」項目で指定できます。
本文 {EntryBody}
デフォルトのモジュール設定では、記事タイトルおよび記事本文の表示文字数を設定出来ます。
ですが、「高度なカスタマイズ」を用いる場合には、タイトルは全文、本文は50文字で固定となります。
詳しい仕様は「記事一覧モジュールの『高度なカスタマイズ』」をご参照ください。
「3.参考資料」へ進む