ページの構造について(レイアウト/共通ヘッダー・フッター)
■共通ヘッダー・フッターのレイアウトパターン
*共通ヘッダー・フッター・サイドバーのパターンは
複数作成することが可能です。
*基本上層ページの共通パーツを引き継ぎますが、
任意に変更することも可能です。
1
ページの構造について(コンテンツ部分)
■コンテンツ部分の基本構成
2
共通ヘッダー
共
通
サ
イ
ド
バ
ー
共通フッター
横100%
横100%
共通ヘッダー・フッターとコンテンツ部分の編集画面について
3
→ページ編集
共通ヘッダー・フッター部分
コンテンツ部分
共通ヘッダー・フッターとコンテンツは
編集画面が別になります。
→共通ヘッダー・フッター編集
ブロックについて
4
ページ作成は、基本レイアウトにもとづいてブロックを
組み合わせで作成します。
ブロックによって、レイアウトや役割・機能が異なります。
ブロックの追加・削除・移動・複製を行うことができます。
ニュース見出し(ブロック) ブログ見出し(ブロック) 見出し(ブロック) ○○セット(ブロック) 共通ヘッダー・フッター部分 コンテンツ部分ブロックの種類
5
ブロックのカラーやスタイル(装飾)は選択されている
ページのテーマカラー・スタイル(装飾)に依存します。
またブロックによって設定内容が異なります。
ブロックの種類
9
Coming soon
Coming soon
Coming soon
HTMLブロック・カスタムCSS機能について
10
ご提供する各種ブロックで満足いくものができない場合。
『HTMLブロック』 『カスタムCSS機能』を利用することができます。
Q
ブロックの規定スタイル(装飾)を変更したい。
A
カスタムCSS機能をご利用ください。
Q
JavaScriptを使いたい。
A
HTMLブロックに直接組み込むか、ファイルをアップロードしてご利用ください。
【注意】
・HTMLブロックは”head”では使えません。”body”のみとなります。
・データベースと連携する動的なページは作成できません。
・HTMLブロック、カスタムCSSは自由にコードが書ける半面、その影響でページに不具合がでる可能性があります。
ページ作成について
管理画面は制作者だけではなく、
管理画面TOP
管理画面のTOPは、各メニューへの入り口になるとともに、
ページ更新やお申込みのステータスが一目で数字で分かるようになっています。
【効果測定】
アクセスやコンバージョンの分析をおこないます。
【お問い合わせ】
お問い合わせの応募者管理をおこないます。
【資料請求】
資料請求の応募者管理をおこないます。
【イベント】
イベント記事の追加・管理又は応募者管理をおこないます。
【ブログ】
ブログ記事の追加・管理をおこないます。
【ニュース】
ニュース記事の追加・管理をおこないます。
【ページ】
ページの作成・更新をおこないます。
11
カンタン作成機能の流れ
『カンタン作成機能』はお申込み頂いた学校の情報をもとに、自動でページを作成する機能です。
“ご提案時のデモサイト”や“本番作成をおこなう際のたたき”としてご利用できます。
カンタン作成機能<Step1>
テンプレート(ブロックの組合せ)を選択します。
デザインパターン3種:ブロックの組合せパターン
レイアウト:1カラム~3カラム
カラー11種:ページのテーマカラー
スタイル3種:角丸やグラデーションなどの装飾
合計297パターンからおすすめの
数十パターンに厳選して一覧表示します。
12
カンタン作成機能<Step2>
選択したテンプレートに対して、プレビューを
見ながらカラーやスタイルなどの調整ができます。
以下の設定ができます。
●デザインパターン:ブロックの組合せパターン
●レイアウト:1カラム~3カラム
●テーマカラー:ページのテーマカラー
●カスタムテーマカラー:カラーコードの指定
●スタイル:角丸やグラデーションなどの装飾
上記の設定を変更すると、
リアルタイムにプレビューが変化します。
プレビューするデバイスを切り替えることも可能です。
13
カンタン作成機能<Step3>
作成するページを選択します。
ページの種類は全部で20ページあります。
・トップ
・ニュース一覧
・ニュース詳細
・ブログ一覧
・ブログ詳細
・学校案内
・交通アクセス
・学部・学科一覧
・学部ページ
・学科詳細ページ
・入学・入試
・よくある質問
・キャンパスライフ
・年間スケジュール
・キャンパスマップ
・就職・進路情報
・イベント情報(オープンキャンパス)一覧
・イベント申し込みフォーム
・資料請求
・サイトマップ
■「カンタン作成機能」作成できるページ一覧
14
ページ一覧画面(ページツリー)
ページツリーにより、ページをわかりやすく階層的に
管理することができます。
作成ページの確認と追加・移動・コピーなどを行うことができます。
【ページ検索機能】(開閉式) ページ名やURLなどで検索することができます。 【ページツリーの表示情報】 共通ヘッダーフッター名、URL、作成日時、公開状況などを表示させる ことができます。 利用している共通ヘッ ダーフッターによってカ ラーが異なります。 階層によって開閉式 【操作ボタン】 ページバーをクリックすると操作ボタンが表示されます。 【編集】ページ編集画面へ 【複製】ページを複製します。 【ゴミ箱】ページをゴミ箱に移動させます。 【移動】ページを移動させます。15
ページ編集画面
【基本設定】公開設定やSEO設定など ページ全体の基本設定 【下書き保存】編集した内容はいったん 下書きとして保存できます。 【下書きを公開】保存している下書きを 公開します。 【編集】と【プレビュー】の切替 【PC】【タブレット】【スマホ】の切替 どのデバイスでも編集が可能です。 ブロックを選択するとメニューボタンが 表示されます。 【編集】ブロック編集画面へ 【複製】ブロックが複製されます 【削除】ブロックが削除されます。 【移動】ブロックの位置を移動します。 【追加】新しくブロックを追加します。 【基本デザイン編集】共通ヘッダー・フッ ターの変更、基本カラー・スタイルの変 更を行うことができます。 【非表示デバイス】表示設定しているデ バイスを表示(ブロック単位) 【元に戻す】【やり直す】 アンドゥ、リドゥA
B
C
D
E
F
G
H
16
ページ編集/プレビュー画面
【編集】と【プレビュー】の切替 【PC】【タブレット】【スマホ】の切替 どのデバイスでも編集・プレビュー が可能です。 共通ヘッダーフッター、サイドバー 部分もフィルターが消えて、 公開サイトと同様にページを確認 できます。17
ブロック編集画面
【表示端末】 ブロック単位でデバイス毎の表示設 定ができます。 例/スマホの場合はテキストを短く したい、という場合はPC・タブ表示 とスマホ表示のブロックをそれぞれ 作成すればOKです。 【ブロック名】 管理用ですが、“見出し”として ページ表示させることもできます。 【ブロック編集】 ブロックに応じて、必要なテキスト や画像を入力、リンク設定をおこな います。 開閉式 【パーツの追加・変更】 パーツ(ブロックを構成する要素)の追加 コピー・変更を行うことができます。 【上へ・下へ】 パーツの位置を移動させることができます。 【削除】 パーツを削除できます。 ブロック パーツ (ブロックを構成する要素)18
画像アップロード画面
画像アップロード画面では、画像の拡大縮小、トリミングを
おこなうことができます。
調整をおこなわず画像をそのままアップすることもできます。
(レスポンシブの適正な動作のためトリミングすることを奨励します) 【画像の位置調整】上下左右ボタン 【画像の回転】右回転、左回転 【画像の拡大縮小】スライダー式の拡大縮小ボタン 【画像の縦横比の選択】 各ブロックに応じて縦横比のパターンを用意。レスポ ンシブにうまく対応するように設計しています。 【フィット機能】 ワンクリックで自動調整する便利機能です。 枠に合わせる場合、画像に合わせる場合の2種。 トリミング枠 アップした画像19
ページ編集/ブロックの追加
挿入できるブロックの一覧が表示されます。
追加場所の指定