専門的なコードの知識なしでページを作成・公開することができます。
1．ページの新規作成
「ページの作成」画面を開く
- ダッシュボードの左側にあるメニューから「ページの管理」をクリックします。
- 右上にある青い「ページを新規作成」ボタンをクリックして、「ページを作成」画面を開きます。
ページの作成方法を選ぶ
- ゼロから自由に作成する：「空白ページ」の「作成する」ボタンを選びます。
- デザインテンプレートから選ぶ：用意されたデザインテンプレートからお好みのデザインを選び、「作成する」ボタンをクリックします。プレビューで全体の確認も可能です。
2．ページの編集（デザイン）
基本操作
- パーツを設置：編集画面の左側にある「コンテンツ」メニューから、追加したいパーツを選び、ページ内の置きたい場所へドラッグ＆ドロップ（マウスで掴んで移動）でコンテンツを追加できます。
- パーツの移動：配置したパーツにマウスを近づけたときに表示される、右側の「青い矢印」をクリックしながら、別の場所へドラッグ＆ドロップで移動できます。
- パーツを複製：複製したいパーツを選択します。近くに表示されるメニューから「四角が重なったアイコン」をクリックすると、選択中のパーツを複製できます。
- パーツの削除：削除したいパーツを選択します。近くに表示されるメニューから「ゴミ箱」のアイコンをクリックするとパーツが削除されます。
プレビュー：作成中のページが、実際にブラウザでどのように表示されるか、別タブで確認できる機能です。
編集中の内容はリアルタイムで反映されないため、確認したい場合は必ず一度保存をしてからプレビューを開いてください。
パーツについて
左側の「コンテンツ」メニューにある、以下の便利なパーツを使用して、自由にレイアウトできます。
| パーツ名 | 説明 | |
|---|---|---|
|
カラム | ページを「2列」「3列」などに分割し、レイアウトを整えるために使います。 |
|
記事 | ブログで投稿した記事をリスト・グリッド・カルーセル形式で表示できるパーツです。 |
|
ボタン | 「詳しくはこちら」「お問い合わせ」といった、リンク付きのボタンを作成できます。 |
|
区切り線 | セクション同士の間を区切る線パーツです。 |
|
見出し | ページの「大見出し（h1）」「中見出し（h2）」などを設定し、文章の構成を分かりやすくします。h1〜h4まで設定できます。 |
|
テキスト | ページの本文となる文章を入力するパーツです。 |
|
画像 | パソコンから画像をアップロードしたり、用意されたフリー素材を選んだりして、ページに画像を追加できます。 |
|
カルーセル | 好きな画像やテキストをスライド表示できるパーツです。 |
|
アコーディオン | 「Q&A」のように、質問をクリックすると答えが展開して表示される、折りたたみ式のパーツです。 |
|
ページごとのパーツ |
特定のページ専用のパーツがそれぞれ選択でき、自由にレイアウト変更ができます。使用できるページの種類は、記事一覧ページ・カテゴリー別記事一覧・記事詳細ページです。 詳しい使い方はこちら |
|
フォーム |
「お問い合わせ」などに使う入力フォームをページに配置できるパーツです。氏名、メールアドレス、自由記述欄など様々な項目を追加できます。 詳しい使い方はこちら |
|
メニュー | ナビゲーションが作れるパーツです。 |
|
HTML | HTMLコードを埋め込めるパーツで、より自由なコンテンツ作成ができます。 |
|
コンポーネント | 複数のパーツを組み合わせて「コンポーネント」として保存し、他のページで再利用できる機能です。 |
3．スタイルの調整
ページ全体に共通のスタイルを設定
サイト全体のデザイン（背景色や文字色など）を統一します。
- 編集画面の左メニューから「全体共通」をクリックします。
- ページ全体の共通スタイルを設定します。
- 基本設定：テキスト色や背景色、コンテンツの横幅、フォントの種類や太さなどを設定できます。
- リンク：リンク（<a>タグ）のテキスト色や、マウスホバー時のスタイルを設定できます。
- 背景：ページ全体の背景画像を設定できます。画像をアップロードしたり、フリー素材から選ぶことも可能です。
CSSをカスタマイズする
特定のパーツにだけ個別のデザインを適用するなど、より高度なデザイン調整を行う手順です。
CSSクラス・IDを追加する
- CSSクラスを追加したいパーツを選択します。
- 左メニューの上部に表示される「CSSクラス・IDを追加する」をクリックすると、入力用の画面が開きます。
- CSSクラス（複数設定可能）やID（ページ内で重複しないように設定）を指定し、「保存」ボタンを押します。
CSSを編集する
- 次に、左メニューの「追加CSS」を選択します。
- 「CSSを編集する」をクリックすると、CSS編集用の画面が開きます。CSSコードを記述すると、そのスタイルが編集中のページにのみ適用されます。
追加CSSを適用後、編集画面内での反映がみられない場合は、一度保存してからプレビューでご確認ください。
サイト全体で共通のCSSを適用したい場合
- 左メニューの「追加CSS」を選択します。
- 「サイト共通のCSSを適用する」にチェックをつけます。
- ダッシュボードに戻って「デザイン設定」にある「デザインCSS」にサイト全体で共通のCSSを記述してください。
作業途中でページを離れる場合は一度ページを保存しておくと安心です。
4．ページの詳細設定（SEO・SNS設定）
編集画面の右上にある「ページ設定」から、ページに関する設定や、SEO・SNSに関する設定、タグ埋め込みなどが行えます。
基本設定
- ページの種類：サイトの目的や用途に合わせて選べる、「ページの種類」があり、なかには役割が決まったページも用意されています。すべてノーコードエディタでページごとにデザインをカスタマイズできます。
| ページの種類 | 説明 | URL |
|---|---|---|
| 固定ページ | 「会社概要」や「お問い合わせ」「LP」など、通常の独立したページです。 | 自由に設定可能 |
| トップページ | サイトのトップに表示されるページです。 | / |
| aboutページ | サイトの紹介や運営者のプロフィールなどを掲載するページです。 | /about |
| 404ページ | 投稿した記事を一覧で表示するページです。 | /archive |
| カテゴリー別記事一覧 | カテゴリーごとに記事を絞り込んで表示するページです。 | /archive/category/{カテゴリー名} |
| 記事詳細ページ | 投稿した記事を表示するページです。 | /entry/{記事のURL} |
- カスタムURL：「トップページ」のURL以下の配信ディレクトリー（URL）を自由に指定できます（「固定ページ」作成時のみ）
- ページタイトル：<title>タグとして、検索結果やブラウザのタブに表示されるタイトルをに設定できます。
- メタディスクリプション：検索結果に表示されるページの概要文を設定できます。
- アイキャッチ画像：SNSでシェアされた際に表示される画像を設定できます（推奨サイズは1200×630pxです）
- 共通パーツの使用：「デザイン設定」で設定している共通のヘッダ・フッタ・サイドバーを、ページに反映させるか指定できます。「使用しない」を選択すると、作成中のページのみが表示されるレイアウトになります。
- SNS向けタイトル：HTMLのog:titleにあたる、SNSでシェアされた際に表示されるタイトルを設定できます。
- 検索エンジン設定：設定にチェックを入れると、ページは検索結果に表示されず、ページ内のリンクも検索エンジンに評価されなくなります。
フォーム
作成中のページ内で、フォームパーツを使用している場合に設定する項目です。
- 送信後のリダイレクト先URL：フォームの送信完了後に特定のURLへ自動で遷移させる事ができます。遷移先を完了ページとしてお使いいただけます。
- 通知を受け取るメールアドレス：フォームから送信された内容を通知するメールアドレスを設定します。
タグ埋め込み
「タグ埋め込み」タブは、GoogleAnalyticsなどの計測ツールや、外部の広告ツールから提供された「計測用のコード」を設置できる場所です。
- </head>タグの直前：タグ内の末尾に、フォームに入力した内容が挿入されます。設定したページにのみ適用されるので、専用のCSSファイルを呼び出したり、メタタグ（OGPやSEO関連）を追加して検索エンジンに向けた情報などにも便利です。※サイト全体に設定したい場合は、ダッシュボードの設定内にある「詳細設定」で設定できます。
- </body>タグの直前：ページの読み込みが終わった後に実行したい、計測ツールやチャットボットのコードなどを追加する場所です。
5．ページの公開・予約・下書き
すぐに公開する
- 右上の青いボタン（「保存」または「公開せずに保存」）の右側にある「▼」矢印をクリックして、「今すぐ公開」をクリックします。下書き保存がまだの場合は、右上の青いボタンが「下書き保存」になっているので、クリックして保存してから操作してください。
- 確認画面で「実行」を押すと、即座にページがインターネット上に公開されます。
指定した日時に公開する（予約公開）
- 右上にある「ページ設定」からメニューを開き、「公開日時」に公開したい未来の日付、もし終了日も決まっていたら「公開終了日を設定」にチェックをすると一緒に設定できます。
- 右上の「予約公開」（ページが公開中の場合は「予約更新」）ボタンをクリックすると、確認画面が開くので「実行」すると予約が完了され、指定した日時に自動で公開されます。
公開中のページを非公開（下書き）に戻す
- 公開済みのページを編集している場合、右上にある青いボタンの「▼」矢印から「下書きに戻す」を選びます。
- 確認画面で「実行」すると、ページが下書き状態に戻り、サイト上では非公開になります。
