スライド 1

(1)

(2)

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

17～

1 補足事項

・・・・・・・・・・・・・・・・・・・・・・・・・・・・

30～

(3)

序章

はじめに

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



簡単更新CMSの基本構成

2 序章

はじめに

(4)

第1章

ログイン・ログアウト

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



ログアウト

3 第1章

ログイン・ログアウト

(5)

第2章

基本設定

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



全般の設定

4 第2章

基本設定

(6)

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



上級設定

新着情報1表示設定新着情報2表示設定簡単更新CMSでは新着情報を2つまで利用可能です。それぞれ「使用する」「使用_{しない」で設定します。} 表示タイトル用途によってタイトルが変更できます。例）新着情報、お知らせ、ブログ、プレスリリース、トピックス【上級設定】タブではアクセス解析などの外部サービス用の設定が行えます。

5 第2章

基本設定

(7)

第3章

デザイン設定

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



テンプレートの設定

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



ロゴ画像の設定

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

6 第3章

デザイン設定

(8)

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



上級設定

「上級設定」タブCSSを使ってデザインを変更する場合に使用します。 ※上級設定を使用されておきた不具合は当社にて対応出来ませんのであらかじめご了承下さい。



メイン画像の設定

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

7 第3章

デザイン設定

(9)

第4章

ページの追加と削除

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



新しいページを追加する

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

8 第4章

ページの追加と削除

(10)

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



ページ設定の編集

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



ページレイアウトの種類

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



ページの削除

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

9 第4章

ページの追加と削除

(11)

第5章

ページ内容の編集

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



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

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

10 第5章

ページ内容の編集

(12)

画像画像枠の有無を選択します。画像のレイアウト本文と画像の位置関係と画像枚数を選択します。画像枠対応する画像形式はGIF・JPEG・PNGのみとなっています。



ファイルのアップロード

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



画像のアップロード



表組みツール

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

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

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

11 第5章

ページ内容の編集

(13)



記事の編集

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



記事の削除

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



記事の並べ替え

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

12 第5章

ページ内容の編集

(14)

第6章



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

14 第7章

サイドエリア

(16)

第8章

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

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



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

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



記事の幅の目安

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

15 第8章

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

(17)



Googleマップ

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

16 第8章

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

(18)

第9章

その他の機能

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



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

17 第9章

その他の機能

(19)

第9章

その他の機能



18 第9章

その他の機能

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

(20)

第9章

その他の機能



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

19 第9章

その他の機能

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

(21)

第9章

その他の機能



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

20 第9章

その他の機能

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

(22)

第9章

その他の機能



画像のクリックリンクについて

21 第9章

その他の機能

ページ内の画像にリンクを設定するには、通常の記事作成とは異なり、別ページへの画像アップロードと該当ページのタグの設置が必要です。（管理画面にて設定可能です。） 1. 管理画面で「ページ追加」を行い、『画像用』のページを準備します。 ※ご注意事項として・『画像用』のページは、必ず『非公開』にしてください。 2. 「記事追加」を行い、『ページタイトル』をつけて、画像をアップロードします。 ※ご注意事項として・『ページタイトル』がない場合、複数の画像アップロード時に何の画像なのかの判別がつかなくなってしまいますので、ご注意ください。

(23)

第9章

その他の機能



画像のクリックリンクについて

22 第9章

その他の機能

3. 記事のアップロードが完了すると、左記のように表示されますので『編集』ボタンをクリックします。 4. 『編集』ボタンをクリックするとアップロードした画像のサムネイル（縮小画像）が表示されますので、画像の上で右クリックし『ショートカットのコピー』をクリックします。 ※メモ帳などにコピーされることをオススメします。 ※ご注意事項として・ご利用するブラウザ（インターネット閲覧ソフト）によって、表現が異なります。（1）Internet Explorerの場合：ショートカットのコピー（2）Firefoxの場合：リンクのURLをコピー（3）Google Chromeの場合：リンクアドレスをコピー

(24)

第9章

その他の機能



画像のクリックリンクについて

23 第9章

その他の機能

5. 画像を追加したい記事を準備し、本文を『HTMLモード』に変え、以下のソースを入力してください。 6. 赤線で引いている部分に『4.』でコピーしたURLを貼り付けます。 ※この際、コピーしたURLをそのまま入力するのではなく、 「upimg」以降を入れてください。 ※”リンクしたいページのURL”部分には、『新規作成したページ』や『既存ページ』『外部サイト』等のURLを貼り付けてください。



番外編（画像の設置場所を指定したい場合）

※左記のように、設置場所を指定する場合は、『5.』のソースを入力する前に、『div』のタグを入力する必要があります。 ※設置する場所にあわせて必要となるタグの一部が左記のように異なります。 ※左寄せの場合

<div align=

“left”

> ~ </div>

※中央寄せの場合

<div align=

“center”

> ~ </div>

※右寄せの場合

<div align=

“right”

> ~ </div>

左寄せの場合

中央寄せの場合

(25)

第9章

その他の機能



画像の拡大方法について（クリックリンクの場合）

24 第9章

その他の機能

ページ内の画像をクリックした際に、拡大画像を表示させる為には、通常の記事作成とは異なり、別ページへの画像アップロードと該当ページのタグの設置が必要です。（管理画面にて設定可能です。）※前ページ（画像のクリックリンクと同様の画像アップロードが必要になります。） 1. 管理画面で「ページ追加」を行い、『画像用』のページを準備します。 ※ご注意事項として・『画像用』のページは、必ず『非公開』にしてください。 2. 「記事追加」を行い、『ページタイトル』をつけて、画像をアップロードします。 ※ご注意事項として・『ページタイトル』がない場合、複数の画像アップロード時に何の画像なのかの判別がつかなくなってしまいますので、ご注意ください。

(26)

第9章

その他の機能



画像の拡大方法について（クリックリンクの場合）

25 第9章

その他の機能

(27)

第9章

その他の機能



画像の拡大方法について（クリックリンクの場合）

26 第9章

その他の機能

5. 画像を追加したい記事を準備し、本文を『HTMLモード』に変え、以下のソースを入力してください。 6. 赤線で引いている部分に『4.』でコピーしたURLを貼り付けます。 ※この際、コピーしたURLをそのまま入力するのではなく、 「upimg」以降を入れてください。 (<a>タグと<img>タグの2箇所にURLを貼り付けて ください。)



番外編（画像の設置場所を指定したい場合）

※左記のように、設置場所を指定する場合は、『5.』のソースを入力する前に、『div』のタグを入力する必要があります。 ※設置する場所にあわせて必要となるタグの一部が左記のように異なります。 ※左寄せの場合

<div align=

“left”

> ~ </div>

※中央寄せの場合

<div align=

“center”

> ~ </div>

※右寄せの場合

<div align=

“right”

> ~ </div>

左寄せの場合

中央寄せの場合

(28)

第9章

その他の機能



画像の拡大方法について（ライトボックスの場合）

27 第9章

その他の機能

ページ内の画像をクリックした際に、拡大画像を表示させる為には、通常の記事作成とは異なり、別ページへの画像アップロードと該当ページのタグの設置が必要です。（管理画面にて設定可能です。）※前ページ（画像のクリックリンクと同様の画像アップロードが必要になります。） ※ライトボックスとは・・・テンプレートの『画像ギャラリー』のような動きをする機能の事を示します。

※推奨ブラウザ：Internet Explorer9.0以上、Firefox4.0以上（Google Chromeでは正しく入力出来ない場合があります。

1. 管理画面で「ページ追加」を行い、『画像用』のページを準備します。 ※ご注意事項として・『画像用』のページは、必ず『非公開』にしてください。 2. 「記事追加」を行い、『ページタイトル』をつけて、画像をアップロードします。 ※ご注意事項として・『ページタイトル』がない場合、複数の画像アップロード時に何の画像なのかの判別がつかなくなってしまいますので、ご注意ください。

(29)

第9章

その他の機能



画像の拡大方法について（ライトボックスの場合）

28 第9章

その他の機能

(30)

第9章

その他の機能



画像の拡大方法について（ライトボックスの場合）

29 第9章

その他の機能

5. 画像を追加したい記事を準備し、本文を『HTMLモード』に変え、以下のソースを入力してください。 6. 赤線で引いている部分に『4.』でコピーしたURLを貼り付けます。 ※この際、コピーしたURLをそのまま入力するのではなく、 「upimg」以降を入れてください。 (<a>タグと<img>タグの2箇所にURLを貼り付けて ください。) ※『rel=“lightbox-group“』は必須のタグとなります。



番外編（画像の設置場所を指定したい場合）

※左記のように、設置場所を指定する場合は、『5.』のソースを入力する前に、『div』のタグを入力する必要があります。 ※設置する場所にあわせて必要となるタグの一部が上記のように異なります。

左寄せの場合

中央寄せの場合

右寄せの場合

<a title="" rel="lightbox-group"

href="コピーした画像のURLを貼り付ける（upimg以降）"> <img src="コピーした画像のURLを貼り付ける（upimg以降）" /> </a>

(31)

補足事項



画像を圧縮する

30 補足事項

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

①

②

③

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

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

スライド 1

目次

序章

はじめに

2

第5章

ページ内容の編集

9

第1章

ログイン・ログアウト

3

第2章

基本設定

4

第3章

デザイン設定

6

第4章

ページの追加と削除

8

第6章

新着情報

13

第7章

サイドエリア

14

第8章

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

15

第9章

その他の機能

17～

1

目次

補足事項

30～

序章

はじめに



簡単更新CMSの基本構成

2

序章

はじめに

第1章

ログイン・ログアウト



ログイン



ログアウト

3

第1章

ログイン・ログアウト

第2章

基本設定



全般の設定

4

第2章

基本設定



新着情報1,2の設定



上級設定

5

第2章

基本設定

第3章

デザイン設定



テンプレートの設定



ロゴ画像の設定

6

第3章

デザイン設定



上級設定



メイン画像の設定

7