スライド 1

(1)

操作マニュアル

（ 2012年1月19日版）

Ver.3

【対応内容】

・PCサイト

・携帯サイト

・スマホサイト

スパークジャパン株式会社

Webサイト設計・制作 CMS構築・運用サポート

(2)

 下書き記事の表示確認  外部サイトのRSSを取得して表示させる  データのバックアップ  新着情報から直接該当ページに飛ばすには  指定のリンク先にとばすには  ページの行間を狭めるには  画像の拡大方法について・・・・・・・・・・・・・・・・・・

18

1

序章

はじめに

2 序章

はじめに



簡単更新CMSの基本構成

簡単更新CMSは以下のようなデザイン構成になってます。 ※テンプレートによって多少異なります。

(4)

第1章

ログイン・ログアウト

「ユーザーID」「パスワード」を入力してログインしてください。



ログアウト

3 第1章

ログイン・ログアウト

(5)

第2章

基本設定

サイト公開設定ホームページの公開状況を「公開」「非公開」で設定します。非公開にした場合は、閲覧時にユーザー名とパスワードの入力画面が表示されます。サイト名 _{ホームページ名です。ロゴなどで使用するので簡潔に入力して下さい。} ページタイトルキーワードページタイトルの最後に表示されるSEO対策用キーワードです。お問い合わせフォーム送信先ページ設定で「メールフォーム」を選択した際に、メールが送られてくるアドレスです。基本METAキーワード検索エンジン向け用のキーワードです。ページごとの「METAキーワード」を設定してる場合はそちらが優先されます。（第 4章参照）基本METAディスクリプション検索エンジン向け用のページ説明文です。ページごとの「METAディスクリプション」を設定してる場合はそちらが優先されます。（第4章参照）タグラインホームページ上部に表示される案内文章です。会社名メールフォーム送信時の署名に表示されます。電話番号ヘッダー部に表示される電話番号です。電話番号のヘッダー表示ヘッダー部への電話番号掲載を「掲載する」「掲載しない」で設定します。 上部メニューの【基本設定】ボタンをクリックします。各項目を 編集して【保存】ボタンをクリックすると、基本設定が更新されます。 【全般】タブではスマッシュウェブの基本的な設定が行えます。



全般の設定

4 第2章

基本設定

(6)

【新着情報1】【新着情報2】タブでは新着情報の有無や表示 に関する設定が行えます。



上級設定

ベーシック（時系列）記事表示件数各項目の表示件数です。フッターナビの折り返し件数携帯サイトの記事表示件数 head内タグ _{</head>タグの上に反映されます。} body内タグ（上部） _{<body>タグの下に反映されます。} body内タグ（下部） _{</body>タグの上に反映されます。} スマートフォンサイト専用 head内タグスマートフォンサイトの</head>タグの上に反映されます。スマートフォンサイト専用 body内タグ（上部）スマートフォンサイトの<body>タグの下に反映されます。スマートフォンサイト専用 body内タグ（下部）スマートフォンサイトの</body>タグの上に反映されます。ソーシャルボタン設置タグ Tweetボタンやいいねボタンが設置できます。【上級設定】タブではアクセス解析などの外部サービス用の設定が行えます。

5 第2章

基本設定

(7)

第3章

デザイン設定

上部メニューの【デザイン設定】ボタンをクリックします。各項目を編集して【保存】ボタンをクリックすると、デザイン設定が更新されます。



テンプレートの設定

【テンプレート】タブではスマッシュウェブで準備されてるデザイ ンに関する設定が行えます。デザインテンプレートベースとなるテンプレートです。サムネイル画像で表示されてる配色は、ページカラー適用前のものです。ページカラー _{テンプレートの配色の設定です。} レイアウト _{記事エリアとサイドエリアの左右位置を変更できます。}



ロゴ画像の設定

【ロゴ】タブではホームページに表示されるロゴ画像が登録できます。画像がセットされていない場合、「基本設定」のサイト名が表示されます。

6 第3章

デザイン設定

(8)

メイン画像表示形式メイン画像が複数枚設定されている場合の画像切り替えパターンを選択します。画像表示スピードメイン画像が複数枚設定されている場合は、ここで設定したスピードで画面が切り替わります。（1000=1秒）メイン画像(1)〜(5) メイン画像(1)は削除出来ません。メイン画像(2)～(5)は必要な場合にのみセットして下さい。リンクページ設定画像をクリックした時のリンク先ページを設定します。



上級設定

「上級設定」を使用されておきた不具合は当社にて対応出来ませんのであらかじめご了承下さい。



メイン画像の設定

【メイン画像】タブではトップページのメイン画像の設定が行え ます。最大5枚の画像をセット出来ます。

7 第3章

デザイン設定

背景画像設定テンプレートの背景を変更するか選択します。背景色 _{背景色を単色で指定します。} 背景画像 _{背景画像をアップロードします。} 繰り返し背景画像の表示方法を設定します。スクロール時の動作よこ位置たて位置



背景画像の設定

【背景画像】タブでは背景画像の設定が行えます。 メイン画像の高さメイン画像の高さを変更します。 config.css _{CSSを記述することでスタイルを上書きすることができます。}

(9)

第4章

ページの追加と削除

「ページ管理」の【ページ追加】ボタンをクリックします。各項目を編集して【保存】ボタンをクリックすると、新しいページが追加されます。



新しいページを追加する

公開設定ページの公開状況を「公開」「非公開」で設定します。階層設定 ■親カテゴリー 基本となるページです。通常はこれを選んで下さい。 ■サブカテゴリー 設定した親カテゴリーのサブページとなります。 ■独立ページ メニューには表示されない独立したページになります。キャンペーンページなどを作成してバナーからのみリンクしたりすることが出来ます。サブカテゴリー設定階層設定で「サブカテゴリー」を選んだときだけ表示されます。設定した親カテゴリーのサブページとなります。ページ名（日本語） _{メニューやページ見出しに表示される日本語のページ名です。} ページ名（英語）メニューやページ見出しの英語部に表示される英語のページ名です。ページのURLにも反映されるので、他のページですでに使ってる名前を使うことはできせん。 METAキーワード SEO対策用のMETAキーワードです。空欄の場合は「基本設定」で設定した内容が反映されます。（第2章参照） METAディスクリプション SEO対策用のMETAディスクリプションです。空欄の場合は「基本設定」で設定した内容が反映されます。（第2章参照）フッターナビ表示設定フッターナビゲーションへの表示の有無を設定します。ページ説明（上部）ページの先頭に文章を入力できます。ページ説明（下部）ページの末尾に文章を入力できます。ページレイアウトページレイアウトの種類を選択します。ページURL ページ名（英語）を反映して生成されたURLが確認できます。

8 第4章

ページの追加と削除

(10)

ベーシック標準的な「タイトル」「本文」で構成されたレイアウトです。ベーシック（時系列）ベーシックに「日付情報」を加えたレイアウトです。新しい記事が上に来ます。表組み【会社概要】などに利用できる表組みレイアウトです。表組みの中でも画像が使えます。フロー【作業の流れ】など段階を追った説明ページに利用できる、記事と記事を矢印で結んだレイアウトです。Ｑ＆Ａ【よくある質問】などに利用できる、「質問」「答え」で構成されたレイアウトです。リンク集【リンク集】などに利用できる、「サイト名称」「リンク先URL」「説明文」で構成されたレイアウトです。メールフォーム【お問い合わせ】などに利用できる、メールを送信できるタイプのレイアウトです。ベーシックと同じ「タイトル」や「本文」を入力することもできます。サイトマップホームページ全体のページ構成を表示する【サイトマップ】です。ベーシックと同じ「タイトル」や「本文」を入力することもできます。画像ギャラリー 2列・ 3列・ 4列【画像ギャラリー】【画像アルバム】などに利用できる、画像表示専用のレイアウトです。ボックス 1列・ 2列・ 3列枠線で囲まれたボックスで構成されたレイアウトです。サブカテゴリへの誘導など、インデックスページに適しています。ボックスB 2列・ 3列ボックスの高さを揃えずに敷き詰めたレイアウトです。カラム 1列・ 2列・ 3列ボックスから枠線を省いたレイアウトです。カラムB 2列・ 3列ボックスBから枠線を省いたレイアウトです。



ページレイアウトの種類

9 第4章

ページの追加と削除

簡単更新CMSはページレイアウトを切り替えることで様々な種類のページを作ることができます。ページレイアウトはあとで変更することもできます。

(11)



ページ設定の編集

サイドメニュー「ページ管理」のページメニューもしくは一覧をクリックします。登録済みのページの一覧が表示されるので、編集したいページのページ情報をクリックすると、ページ情報の編集画面が表示されます。



ページの削除

ページ一覧で削除したいページの×をクリックします。「本当に削除してもよろしいでしょうか？」というダイアログが表示されるのでOKをクリックすると削除されます。

10 第4章

ページの追加と削除

(12)

第5章

ページ内容の編集

サイドメニュー「ページ管理」の「ページタイトル（左図の場合：【サービス紹介】」をクリックすると登録済みの記事の一覧が表示されるので、続けて【記事追加】をクリックします。



ページに新しい記事を追加する

もしくは、ページタイトルにカーソルを合わせると表示される【＋】ボタンをクリックします。上記いずれかの方法で記事追加フォームが表示されるので、「タイトル」「本文」等を入力します。タイトルを省略して本文のみの記事を投稿することも可能です。最後に【保存】ボタンを押すと記事が保存されます。その際に「下書き」を選択するとホームページには公開されず、下書き状態で保存されます。

11 第5章

ページ内容の編集

記事の途中に新しい記事を追加する場合は、編集ボタンの右側にカーソルを合わせると表示される【＋】ボタンをクリックします。

(13)

画像対応する画像形式はGIF・JPEG・PNGのみとなっています。画像のレイアウト本文と画像の位置関係と画像枚数を選択します。画像枠画像枠の有無を選択します。拡大機能縮小された画像をクリックした際に、大きな画像が表示されるようにします。リンク設定 ■リンク先URL 画像にリンクを張ります。設定されてる場合は拡大機能はオフになります。 ■リンクターゲット リンクを開くウィンドウを設定します。 ■画像のALT 画像のALTを設定します。



ファイルのアップロード

【ファイル】タブではWordやPDF等の画像以外のファイルのアップロードが行えます。



画像のアップロード



表組みツール

【表組み】タブでは表組みツールによる表組みの編集が行えます。【画像】タブでは画像のアップロード及びレイアウトの編集が行えます。

ファイルの添付対応するファイル形式は pdf, word, excel, zip, gif, jpeg, png ファイルのみとなっ

ています。ファイルの表示名表示されるリンクテキストの設定をします。表の内容ツールバーの左のアイコンで「表のスタイル」、右のスライダーで「列数」を選択します。右上の「行追加」「行削除」「並べ替え」で編集モードが切り替えれます。セルの文字位置アイコンをクリックした際に色が変わるセルの文字位置を選択します。 ※ フォーム上では反映されません。表のボーダー表のボーダーのスタイルや使用の有無を選択します。表の位置本文と表の位置関係を選択します。

12 第5章

ページ内容の編集

(14)



記事の編集

サイドメニュー「ページ管理」の「ページタイトル（左図の場合：【商品紹介】）」をクリックします。登録済みの記事の一覧が表示されるので、編集したい記事の【編集】をクリックすると、編集画面が表示されます。



記事の削除

記事一覧で削除したい記事の【×】をクリックします。「本当に削除してもよろしいでしょうか？」というダイアログが表 示されるので【OK】をクリックすると削除されます。



記事の並べ替え

記事一覧で【並べ替え】をクリックします。ドラッグ＆ドロップで記事の順番を並べ替え、【保存】をクリックすると並び順が更新されます。

13 第5章

ページ内容の編集

(15)

第6章



追加・編集・削除・並び替え

15 第7章

サイドエリア

(17)

第8章

ブログパーツの埋め込み方

Googleマップ・YouTube・Twitterをはじめとした外部サービス用の埋め込みタグは、必ず本文エリア下のブログパーツ埋め込み・タグ入力欄に貼り付けるようにしてください。 ※本文エリアのHTMLモードでブログパーツタグなどを入力した際、動作に支障をきたす場合があります。



ブログパーツを埋め込む際の注意点

560px ベーシック、ベーシック(時系列)、メールフォーム 530px リンク集 520px フロー、Ｑ＆Ａ 390px 表組み



記事の幅の目安

幅が設定できるブログパーツを埋め込む際は、以下の表を参考にして下さい。

16 第8章

ブログパーツの埋め込み方

(18)



Googleマップ

Googleマップのサイト（http://maps.google.co.jp/）で住所や目的の場所を入力し【地図を検索】をクリックします。地図を検索すると、目印のピンが表示されます。検索結果が目的の場所を表示していたら、【リンク】をクリックします。表示されたウィンドウの【埋め込み地図のカスタマイズとプレビュー】をクリックします。カスタマイズのページで地図のサイズのカスタムの幅・高さを設定します。ページレイアウトごとの幅は前項の表を参考に設定してください。高さは任意で設定してもらって構いません。（通常、500程度）吹き出しの位置を調整するには、地図上をドラッグしてください。設置する地図のサイズを入力したら、下に表示されている HTMLソースをすべて選択してコピーします。スマッシュウェブ管理画面で記事の追加および編集のページを開きます。本文エリア下の「ブログパーツ埋め込み・タグ入力欄」に先ほどコピーしたHTMLソースを貼りつけて保存すれば、地図が埋め込まれます。

17 第8章

ブログパーツの埋め込み方

(19)

第9章

その他の機能

すでにブログ等を運営してる方のために、外部サイトのRSSを取得して記事一覧を表示する「独自タグ」を用意しています。 ※ RSSがないサイトには対応してません。ブログパーツ埋め込み・タグ入力欄に、 <incrss src="RSSフィードURL" n="表示件数"> の独自タグを入力し、表示したいRSSの「RSSフィードURL」「表示件数」をそれぞれ入力して下さい。 ※RSS表示の独自タグは、全て半角文字で入力して下さい。全角文字が入っていると記事が表示されません。



外部サイトのRSSを取得して表示させる

18 第9章

その他の機能



下書き記事の表示確認

記事一覧、もしくは記事編集画面右上の【下書き確認】ボタンをクリックすると、公開前の記事を含む実際のページ表示を確認することができます。

(20)

19 第8章

ブログパーツの埋め込み方



データのバックアップ

サイドメニュー「上級設定」の【バックアップ】をクリックすると、バックアップデータの管理画面が表示されます。目印となる「バックアップ名」を入力して【バックアップ生成】をクリックすると、その段階でのホームページデータがサーバー上に保存され、フォーム下部のバックアップデータ一覧が更新されます。 ※バックアップ生成には時間がかかる場合があります。 一覧左上の【リストアモード】クリックすると、【ダウンロード】 ボタンが【リストア】ボタンに変わります。 【リストア】ボタンをクリックすると、「バックアップ生成」でサー バー上に保存したデータが復元されます。 ※すぐに古いデータに置き換わりますので、リストアは慎重に行なってください。一覧の【ダウンロード】ボタンをクリックすると、サーバー上のデータをパソコン内に保存することができます。 サーバーエラーなどもしもの時に備えて、定期的にバックアップデータをダウンロードすることをおすすめします。

(21)

第9章

その他の機能



20 第9章

その他の機能

トップページの「お知らせ」や「新着情報」の『タイトル』から、該当ページに直接リンクを設定する場合は、記事入力画面（管理画面）の「タイトル」にリンクのタグを直接記述します。※事前にリンク先のURL（○○○.php）の確認が必要ですリンクさせたいページのURL（上記の場合は、company.php）を覚えます。 ※メモ帳などにコピーされることをオススメします。【タイトルの記述例】 <a href=“company.php”>コーポレートメッセージに直接リンクしたい</a> ※赤線部分に該当ページのURLを記述します。 ※ご注意事項として・記事の「タイトル」欄へのタグ記述は、サポート対象外となります。・上記以外にもHTMLにはタグが多数ありますが、HTMLタグの記述が全て可能というものではございません。・また、実際に作業をされる場合は、基本的なHTMLソースの知識が必要となります。

(22)

第9章

その他の機能



指定のリンク先にとばすには

21 第9章

その他の機能

前述では、トップページの「お知らせ」や「新着情報」の『タイトル』から、該当ページに直接リンクを設定する方法をご説明しましたが、本ページでは、『本文』に入力された文字から、複数の記事で生成されているページの２つ目以降の記事に直接リンクする方法について、ご説明します。リンクさせたいページのURL（上記の場合は、company.php）と、リンクさせたい該当記事のID（上記の場合は、ID4）を確認します。 ※メモ帳などにコピーされることをオススメします。【アドレスの記述例】 sp.cmstool.biz/spark-manual/company.php#id4 ※コピーしたURLと記事IDの間に『#（シャープ）』をいれることで該当ページの２つ目以降の記事に直接リンクさせることが出来ます。

(23)

第9章

その他の機能



ページの行間を狭めるには

22 第9章

その他の機能

ページ内の記事を入力（保存）すると、各記事の行間は一定間隔で表示されます。（初期設定）この行間を狭めるには、CSS（スタイルシート）の設定変更が別途必要です。（管理画面にて設定可能です。）標準（初期設定）の行間スタイルシートを調整した行間 1. 管理画面の「デザイン設定」⇒「上級設定」の画面を表示させます。 2. ここでCSS（スタイルシート）の設定を記述することができます。 ※ご注意事項として・CSS（スタイルシート）の記述を誤って編集や削除をしてしまうと、ページの構成が崩れてしまいます。・作業を行う前に、全ての記述内容をメモ帳にコピーする（バックアップ）などしてから作業をしてください。記事ID9 記事ID11 【CSS（スタイルシート）の記述について】・左記の記述内容をご参照の上、行間を変更したい記事の IDを指定してください。・記事のIDは、それぞれに割り振られています。記事登録（または記事編集）画面でタイトルの横に表示されています。 ※作業を行う場合は、基本的なHTMLソース及びCSS （スタイルシート）の知識が必要となります。 ※ご注意事項として・行間を詰めたいIDの最下部（左記の場合は、ID12）のIDは指定しないでください。

(24)

補足事項



画像を圧縮する

23 補足事項

アップロードをする画像のサイズは、低解像度のディスプレイではみ出さない程度（横幅800px）以内に収めることをお奨めします。大きすぎる画像をアップロードしてしまうと、サーバーの容量を圧迫するだけでなく、閲覧者のパソコンのモニターが小さい場合、画像がはみ出して表示されてしまい、閲覧者にとって不便極まりない事になってしまいます。下記のサイトよりツールをダウンロードし、横幅を800px以内に収めてください。縮小専用ツール（画像リサイズツール） http://www.vector.co.jp/soft/win95/art/se153674.html （2011年3月24日現在）

①

②

③

☆：縮小専用ツールの使い方

①：「800 × 800」にチェックを入れます。 ②：縮小する画像を「縮小専用」へドラッグ＆ドロップ。 ③：すると「Resized」というフォルダが出現します。「800 × 800」に修正したファイルはここのフォルダに保存されます。そのほか、好きなようにカスタマイズができますので用途に合わせて設定を変えてください。

スライド 1

操作マニュアル

Ver.3

【対応内容】

・PCサイト

・携帯サイト

・スマホサイト

スパークジャパン株式会社

目次

序章

はじめに

2

第5章

ページ内容の編集

第1章

ログイン・ログアウト

3

第2章

基本設定

4

第3章

デザイン設定

6

第4章

ページの追加と削除

8

第6章

新着情報

14

第7章

サイドエリア

15

第8章

ブログパーツの埋め込み方

16

第9章

その他の機能

18

1

目次

序章

はじめに

2

序章

はじめに



簡単更新CMSの基本構成

第1章

ログイン・ログアウト



ログイン



ログアウト

3

第1章

ログイン・ログアウト

第2章

基本設定



全般の設定

4

第2章

基本設定



新着情報1,2の設定



上級設定

5

第2章

基本設定

第3章

デザイン設定



テンプレートの設定



ロゴ画像の設定

6

第3章

デザイン設定

