ページの編集について、さらに詳しくご案内します。
以下の行程は、管理画面左メニュー ＞ サイト ＞ ページ一覧 で、編集したいページをクリックで選択し、「ページ編集」で行います。
目次
ページ編集の注意点
複数のアカウントで、同じページの編集画面を同時に開くことはできません。
複数の担当者で作業する場合はご注意ください。
また、ページ編集画面を開いたままで長時間放置した場合、編集状態のログが残り、別のアカウントでページ編集画面が開けなくなる場合があります。
編集内容が正しく保存されない原因にもなりかねないため、ページ編集画面を開いた場合は、作業後にページ一覧画面に戻るなどで、必ず編集画面を閉じるようにしてください。
万が一、編集状態のログが残ってしまった場合は、該当のページの編集画面をもう一度開いてから閉じることで、編集状態が解除されます。
ページ編集の基本構造
ページ編集では、ページ内に「パーツ」を配置してページを構成していきます。
任意のパーツを「パーツ配置エリア」に対してドラッグ＆ドロップで配置します。
■パーツの一覧、各パーツについての詳細はこちら
＞【画面説明】サイト／ページ編集 デザインパーツ
※キャプチャは旧契約画面になります
ページは、ページの編集 基本編でご案内した「エリア」に加えて、「セクション」「行」「カラム」で構成されています。
- セクション
コンテンツエリアを縦方向に分割するための構成要素です。
ページ内に掲載する内容によってセクションを分けることで、ページの構成が整理されます。 - 行
セクションをさらに縦方向に分割するための構成要素です。 - カラム
行を横方向に分割した構成要素です。パーツの配置もカラム内で行います。１つの行を最大４つのカラムまで分割できます。
※モバイルビューでは、左のカラムから順に縦方向に表示されます。
※２段ナビゲーションのカラムは、レイアウトの特性上２つで固定、配置したパーツは右寄せとなります。
編集パネル
パーツ、セクション、行、カラムは、それぞれの編集パネルで操作します。
どの編集パネルを操作するかを間違えないように注意してください。
パーツの編集パネル
パーツの編集パネルで行える操作は、パーツの種類によって異なります。
共通となる基本的な操作は以下の通りです。
- キャンセル
パーツの編集内容をキャンセルします。 - 保存
パーツの編集内容を保存します。 - カスタマイズ
パーツに対して背景色・背景画像を設定、余白・枠線を追加、class名を追加できます。
■カスタマイズの詳細はこちら - 削除
パーツを削除します。
削除した内容は復元できません。ご注意ください。 - 移動
パーツをドラッグ＆ドロップで移動します。
■パーツの一覧、各パーツについての詳細はこちら
＞【画面説明】サイト／ページ編集 デザインパーツ
セクションの編集パネル
- 上に移動、下に移動
セクションを上下に移動します。 - 削除
セクションを削除します。
削除した内容は復元できません。ご注意ください。 - 複製
下方向にセクションを複製します。 - 追加
下方向にセクションを追加します。
カスタマイズ
セクションに対して背景色・背景画像を設定、余白・枠線を追加、class名を追加できます
■カスタマイズの詳細はこちら
- 移動
セクションをドラッグ＆ドロップで移動します。
※ナビゲーション、ヘッダー、サイドバー、フッターは１つのセクションで操作するため、セクションの編集パネルは表示されません。
行の編集パネル
- 上に移動、下に移動
セクション内で行を上下に移動します。 - 削除
行を削除します。
削除した内容は復元できません。ご注意ください。
１つのセクションに対して、行が必ず１つ以上必要です。不要な場合はセクションごと削除してください。 - 複製
下方向に行を複製します。 - 追加
下方向に行を追加します。 - 分割
行を分割するカラム数を変更します。
カラム数を減らす場合は、カラム内に配置されているパーツごと削除されます。ご注意ください。 - カスタマイズ
class名の追加、背景色・背景画像の設定、余白・枠線を追加できます。
■カスタマイズの詳細はこちら
セクションをカスタマイズする方法 - 移動
行をドラッグ＆ドロップで移動します。
※ナビゲーション、サイドバーは１つの行で操作するため、行の編集パネルは表示されません。
カラムの編集パネル
- 右に移動、左に移動
カラムを左右に移動します。 - 削除
カラムを削除します。
削除した内容は復元できません。ご注意ください。
１つの行に対して、カラムが必ず１つ以上必要です。不要な場合は行ごと削除してください。 - 移動
カラムをドラッグ＆ドロップで移動します。 - カスタマイズ
class名の追加、背景色・背景画像の設定、余白・枠線を追加できます。
■カスタマイズの詳細はこちら
- カラム幅の調整
カラムの境界線をドラッグすると、カラム幅を調整できます。
※サイドバーは１つのカラムで操作するため、カラムの編集パネルは表示されません。
テーマカスタマイズ
新契約では「ベースデザイン設定」となります。
詳細は下記をご確認ください。
＞サポートコンテンツサイト
ページ編集の他に、「テーマカスタマイズ」でサイトの外観を設定できます。
テーマカスタマイズでは、以下のような項目を設定できます。
- フォント
フォントの種類、フォントサイズ、フォントカラー、行間隔、を変更できます。 - リンクカラー
リンクが設置されているテキストのカラーと、マウスカーソルを合わせた際に表示するホバーカラーを変更できます。 - サイト全体の背景画像
- 各エリアの背景色、テキストカラー、ホバーカラー
- 各パーツのテキストカラー、ホバーカラー など
テーマカスタマイズは、管理画面左メニュー > 設定 > 外観設定 > テーマ設定 > テーマのカスタマイズ をクリックします。
「ページ編集画面」からも設定いただけます。
【外観設定の場合】
【ページ編集画面の場合】
テーマカスタマイズの基本操作
画面左上で、表示するページを選択します。
画面右側で変更箇所をクリックで指定し、画面左側で変更内容を指定します。
指定後は「更新する」をクリックして完了します。
テーマカスタマイズの注意点
- カラーやフォントなど、ページ編集とテーマカスタマイズの設定が重複した場合は、ページ編集の設定が優先されます。
- パーツに対してテーマカスタマイズを適用した場合、サイト内に設置している同じパーツの全てに変更内容が適用されます。そのため、変更内容に表示される適用箇所を必ず確認してください。
【例１】
下記は、テキストのカラーを紺色に変更したい場合の例です。下記の場合、「全ページのコンテンツエリアの全てのテキストパーツ」に適用されます。
【例２】
下記は、見出しのカラーを青色に変更したい場合の例です。下記の場合、「全ページのコンテンツエリアの全ての見出しパーツh2」に適用されます。コンテンツエリア以外に配置されている見出し、h2以外の見出しには適用されません。
■サイト編集とテーマカスタマイズを活用してサイトカラーを変更する方法はこちら
＞テーマのカスタマイズをする方法
ページの編集ができたら、リンクの設置を行います。
■リンクについての詳細はこちら
＞ページ・LPにリンクを設定する方法