40

Try! cms2012標準マニュアル2013 03

  • Upload
    -

  • View
    2.278

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Try! cms2012標準マニュアル2013 03
Page 2: Try! cms2012標準マニュアル2013 03

番号 項目 ページ 番号 項目 ページ

インストール 3~5 コンテンツメニュー

ログイン 6 12-1 標準SSIテキストの編集 33

ファイルメニュー 12-2 SSIテキストの作成と編集(エンタープライズ版) 34

2-1 動作環境の設定 (基本設定) 7

2-2 (管理者設定) 8 サイト検索メニュー

2-3 (サイト情報設定) 9 19-1 サイト検索(データベースの更新) 54

2-4 (サーバー情報・ファイルマネージャー・動作パス設定) 10 19-2 サイト検索(環境設定) 55

3-1 システム更新(更新情報) 11

3-2 (システム更新) 12

4 管理者編集 13

5 アクション履歴 14 ユーザー

6 メールの送信 15 21 ユーザー(会員一覧/新規登録/環境設定) 58

7 ファイルマネージャ(エンタープライズ版) 16~17

8 通常ページを開く 18

9 ログオフ 19

ニュースメニュー

10-1 新しいグループの追加(環境設定) 20~23

10-2 新しい記事の追加 24

10-3 機能のご紹介(Webエディタ) 25~29

10-4 機能のご紹介(画像の挿入) 30

11-1 機能のご紹介(テンプレート挿入) 31

11-2 機能のご紹介(テンプレート作成) 32

2

Page 3: Try! cms2012標準マニュアル2013 03

準備

配布されたインストーラ一式(trycms.zip)をパソコンで解凍すると、install.php、install.zip、unzipの3つのファイルが有りますので、 FTPを使ってインストールするサーバのドキュメントルートに置きます。 ドキュメントルートとは、ドメインにアクセスしたとき 初に表示されるディレクトリです。

インターネットのwebサイトは、このドキュメントルートを基準に絶対パスと呼びます。PHPは動作することが前提ですが、レンタルサーバ会社により.htaccessでの設定が必要な場合があります。

unzipはLinuxのコマンドで、サーバにインストールされ、利用可能な環境では必要有りませんが、インストールされていない場合は実行を許可するパーミッション755に設定してください。

開始!

準備ができたらブラウザを起動してアドレスバーからinstall.phpを呼び出します。

http://www.company.co.jp/install.php 

[次へ]ボタンを押していただいたと同時

に「著作権」にもご同意いただいたものとします。

正規ユーザであることの認証を行いますので、導入時に配布されたシリアルキーを入力してください。

[インストール開始]ボタンを押すと、install.zipが解凍されイ

ンストールが開始されます。

3

Page 4: Try! cms2012標準マニュアル2013 03

認証に成功すると基本設定画面が表示されます。

サイト名称サイトのタイトルです。自動生成された動的ページのデフォルトのタイトルにもなります。運営会社サイト運営会社です。個人の場合は空欄で結構です。Url一般公開するサイトのアドレスをhttp://からの完全なurl形式で設定してください。 ここで設定したurlは、コンパネの[ファイル]‐[通常ページを開く]で開くことができます。文字コードサイトの文字コードです。デフォルトはUNIX、Linux標準のEUC‐JPです。 これ以外の文字コード、windows標準のSHIFT_JIS(SJIS)、日本工業規格(jis)、世界標準(UTF‐8)をサポートしますが、 EUC‐JP以外の場合はファイル名に日本語は使用できません。 また、EUC‐JP以外の文字コードの場合は、内部的に変換作業が必要ですのでパフォーマンスが低下します。 外国に発信する必要の無いサイトはEUC‐JPを強くお勧めします。パスワード

も重要なコントロールパネル(以下コンパネ)の監理者(管理者ではない)のルート(root)パスワードを変更します。 パ

スワードは導入時に設定されており、通常は変更する必要は有りませんが、セキュリティを重視される場合は、定期的に変更されるお客様も居るようです。氏名監理者のお名前です。メールアドレス監理者のメールアドレスです。 システムは個々に必要な箇所でメールアドレスを設定できるように設計されていますが、 それらのメールアドレスが省略された場合に、このメールアドレスが使用されます。署名

監理者の署名を記述しておくと、監理者がシステム上から送信、または、システムが自動的に送信する全てのメールに添付されます。

その他の設定です。こちらはデフォルトで設定済みですので、必要に応じて変更してください。

newsニュース記事を表示させるコマンドの絶対パスを設定します。findサイト内検索を動作させる絶対パスsendmailweb上(ブラウザ)からメールを送信するメールサーバ(MTA)のパスを設定します。 一般的なLinuxの場合は/usr/sbin/sendmailまたは、/usr/bin/sendmail、UNIX系では/usr/lib/sendmailが多いようです。 残念ながらwindowsサーバでこの機能を使用することはできません。解凍zipを使用してファイルやフォルダを圧縮するunzipを使用してzip形式の圧縮ファイルを解凍するlhaを使用してlzh形式のファイルを圧縮、解凍するアップデートリアルアップデート機能を使って、常にシステムを 新の状態に保つための弊社専用サーバのurlを設定します。 通常は自動的に設定されていますので変更しないでください。シリアルキー

4

Page 5: Try! cms2012標準マニュアル2013 03

全ての準備が整えば 終確認です。

[OK]ボタンを押すとインストールが開始されます。 インストーラは、お客様

の契約内容により必要なシステムを弊社インストールサーバから自動的にダウンロードしてインストールされます。 このとき、お客様のサーバ情報とシリアルキーがユーザ登録内容と一致するかの認証を行います。

全ての処理が問題なく行われインストールが完了するとコントロールパネルへのログインが可能になります。

スーパーユーザ(root監理者)のIDは、常に「root」です。

パスワードは、インストール時に設定したパスワードを指定してください。

5

Page 6: Try! cms2012標準マニュアル2013 03

ログイン

① ご登録の <ログインID> を入力。

② ご登録の <パスワード> を入力。

③ 「ログイン」ボタンをクリック

④ ページ編集画面が表示されます

はじめにページ編集画面のURLへアクセスします。

6

Page 7: Try! cms2012標準マニュアル2013 03

基本設定

名称サイトのタイトルです。自動生成された動的ページのデフォルトのタイトルにもなります。

運営会社サイト運営会社です。個人の場合は空欄で結構です。

所在地会社の所在地です。googleマップで自社へのアクセスを表示する場合にも使用されます。

電話番号、FAX会社の連絡先です。個人の場合は個人情報保護のため空欄にして置いてください。

部署企業の場合は、部署や支店、支所名などを設定します。 部署の設定は、[部署コード]:[部署名]のように、コードと名称を半角コロン「:」で区切り、 1件ごとに改行して設定してください。 システムは、複数の管理者をサポートしており、管理者はいずれかの部署に所属していなければなりません。 管理者の情報には、部署名ではなく、部署コードが記録されますので、管理者を登録後に部署コードを変更することはできません。 部署の表示は、登録順に行われますのでコード番号は連番でなくても結構です。

役職登録管理者の役職を「部署」同様の形式で設定します。 必須では有りませんが、システ

ムではページの一般公開に「承認」機能がありますので、承認者の役職を把握する上で便利です。

動作環境の設定動作環境の設定2‐12‐1

7

Page 8: Try! cms2012標準マニュアル2013 03

監理者設定

パスワードも重要なコントロールパネル(以下コンパネ)の監理者(管理者ではない)のルート

(root)パスワードを変更します。 パスワードは導入時に設定されており、通常は変更

する必要は有りませんが、セキュリティを重視される場合は、定期的に変更されるお客様も居るようです。

氏名監理者のお名前です。 メールアドレス監理者のメールアドレスです。 システムは個々に必要な箇所でメールアドレスを設定できるように設計されていますが、 それらのメールアドレスが省略された場合に、このメールアドレスが使用されます。

署名

監理者の署名を記述しておくと、監理者がシステム上から送信、または、システムが自動的に送信する全てのメールに添付されます。

記事承認

ニュースやコンテンツなど、作成された記事を一般公開する場合に必要な承認者を設定します。 承認者は、予め管理者として登録されていなければなりません。承認が未設定の場合は、記事作成直後に一般公開されます。 ただ、ファイルマネージャで更新されたファイルは、すべて直後に繁栄され、承認を必要としません。 言い換えれば、承認なしでも変更されることに注意が必要です。登録可能な承認者は 大5名までです。

アクセス制限コンパネへのアクセスをIPアドレスで制限することができます。インターネットでは、全てのユーザに固有のIPアドレスが割り振られています。 固定IPを取得されていない場合でも、動的に必ずユニークなIPアドレスが割り振られています。 このIPアドレスを確認して未登録のIPアドレスからのアクセスはエラーページを表示し、ログイン画面も表示されません。IPアドレスでのアクセスを制限する場合は、許可するIPアドレスを1件ごとに改行して列挙してください。 1件も登録されていない場合は、制限しないものとし、全てアドレ

スからのアクセスが許可されます。制限する場合に、許可するアドレスを登録する事にご注意ください。

動作環境の設定動作環境の設定2‐22‐2

8

Page 9: Try! cms2012標準マニュアル2013 03

サイト情報設定

url一般公開するサイトのアドレスをhttp://からの完全なurl形式で設定してください。 ここで設定したurlは、コンパネの[ファイル]‐[通常ページを開く]で開くことができます。

概要サイトの簡単な説明です。作成されたページのデフォルトのdescriptionにもなりますのでSEO対策上も重要です。 必ず設定するようにしてください。

文字コードサイトの文字コードです。デフォルトはUNIX、Linux標準のEUC‐JPです。 これ以外の文字コード、windows標準のSHIFT_JIS(SJIS)、日本工業規格(jis)、世界標準(UTF‐8)をサポートしますが、 EUC‐JP以外の場合はファイル名に日本語は使用できません。 また、EUC‐JP以外の文字コードの場合は、内部的に変換作業が必要ですのでパフォーマンスが低下します。 外国に発信する必要の無いサイトはEUC‐JPを強くお勧めします。

nonExtこの機能は少し厄介ですが重要ですのでじっくり見てゆきましょう。一般的にCMSのようなプログラムで動作させるページは、Perl(パール)やPHP、windowsサーバではASPやEXEといったプログラム言語で開発されており、 ページの

後に、それぞれ.cgi、.php、.asp、.exeのような拡張子が付きます。 標準的なhtmlページは.htmlなどですから一目でプログラムであることが分かってしまいます。

ページがプログラムであることが分かってしまっても特に問題は無いのですが、アドレスが非常に長くなるケースも多く、 SEO上不利とされています。

テンプレートここでのテンプレートとは、ページ全体のデザインを決定するhtmlドキュメントを指します。 システムは、少しだけ条件付で設定されたテンプレートを基に新しいページを作成します。※新しいページの追加 16‐3 p46

スタイル CSSファイルの設定記事編集時に私用するスタイルシートを設定します。 ここで設定したスタイルシートは、ニュース記事の編集時に読み込まれ、記事内で使用することができます。 複数ある場合は半角カンマ「,」で区切って設定してください。 スタイルシート内で他のスタイルシートをインクルードする事はできません。 また、内部リンクページ、画像データへのアドレスはルートディレクトリ「/」を基準とした絶対パスでなければなりません。

モバイルフォルダ

現在未使用、未対応です。※携帯サイトへの対応するときにコンテンツのあるフォルダー名です。 ※デフォルト mobile

動作環境の設定動作環境の設定2‐32‐3

9

Page 10: Try! cms2012標準マニュアル2013 03

サーバー情報・ファイルマネージャー・動作パス設定

サーバ情報設定sendmailブラウザからメールを送信するためのメールサーバ(MTA)の絶対パスです。 一般的なLinuxサーバでは/usr/sbin/sendmailや、/usr/bin/sendmailが も多いようです。 sendmailが利用できない環境では、web上からメールを送信することはできません。

アップデートシステムを常に 新の状態に保つ弊社の専用サーバのurlを設定してください。

シリアルキーシステム導入時に配布されたユーザ登録のシリアル番号です。 インストール時に設定隅ですから変更する必要はありません。 正式なキーが設定されていなければシステムを更新できないだけでなく、 コンパネを操作することもできません。

ファイルマネージャ設定nonDirファイルマネージャで管理(表示)しないディレクトリ名を1件ごとに改行して設定します。 設定したディレクトリ名はすべてスキップされ、表示されませんので高速に動作させることが可能になるだけでなく、 誤った操作でシステムを壊してしまうミスを防ぐこともできます。 監理者以外にファイルマネージャを許可している場合でもシステムディレクトリ「trycms」は非公開になります。

Colsファイルマネージャのディレクトリビューに表示するファイルの列数です。

解凍ファイルマネージャはサーバ上でのファイルの圧縮、解凍をサポートしていますが、 サーバUNIX、Linuxのコマンドzip、unzip、lhaコマンドがインストールされていなければなりません。 インストールされていない場合は、システムディレクトリ/trycmsにインストールして利用可能なサーバも有りますが、 UNIXのコマンド自体を制限しているサーバも有りますので詳しくはサーバ会社にお問合せください。

動作パスnewsニュース記事を表示するデフォルトの絶対パスです。この例では<div>タグで宣言されたエレメント「whatsnew」内に新着情報が挿入されます。

findサイト内検索を実行するパスを設定します。

downloadダウンロードマネージャは、資料など提供するファイルがどれだけダウンロードされたかを管理します。

動作環境の設定動作環境の設定2‐42‐4

10

Page 11: Try! cms2012標準マニュアル2013 03

ここに更新情報が記載されます。

1. 更新情報

システム更新システム更新3‐13‐1

11

Page 12: Try! cms2012標準マニュアル2013 03

「利用規約に同意してアップデート」チェックボックスにチェック。

2. システム更新

更新情報が表示されます

確認して「次へ」をクリック

「OK」をクリックで更新完了しました。

システム更新システム更新3‐23‐2

12

Page 13: Try! cms2012標準マニュアル2013 03

管理者編集管理者編集44

コントロールパネルは、システム監理者以外も複数の方がご利用いただけます。管理者編集では、利用を許可するメンバーを登録、編集します。同時に、利用可能な機能を限定する「権限」を設定することもできます。管理者の登録は無制限に行えます。

認証登録ユーザのコンパネへのログインを許可します。 言い換えれば、ユーザを削除しなくても一時的にログインできなくすることが可能だと言う事になります。

IDユーザのログイン用のIDを半角アルファベットで設定します。重複することはできません。

パスワードログイン用のパスワードです。確認のため、同じものを2度入力してください。コピーは確認の意味がありません。

氏名管理者の氏名です。IDでは個人を直感で把握できませんので本名も必須です。

所属と、役職動作環境の設定で設定した所属部署と、役職を選択します。 所属部署は、所属部署のみに編集を許可する「権限」になりますので重要です。 所属部署での権限機能を使用しない場合は必須ではありません。

権限本メンバーに許可する機能を選択します。 チェックされていない機能は操作することが出来ません。 ※印の付いた機能は、有料オプションですから別途導入が必要になります。

電話番号住所メールアドレス管理者のメールアドレスは必須ではありませんが、設定しておくとweb上からメールを送信することが可能になります。

署名管理者がweb上からメールを送信する場合の署名です。 ご本人がログイン後、web上から送信するすべてのメールに自動で添付されます。

登録管理者は一覧で表示され、「氏名」をクリックして登録内容を編集することも出来ます。

13

Page 14: Try! cms2012標準マニュアル2013 03

アクション履歴アクション履歴55

システムは、コンパネでの操作をすべて記録しています。 閲

覧する年月を選択すると日付と時刻、操作メンバー名、操作内容を一覧で表示します。

14

Page 15: Try! cms2012標準マニュアル2013 03

メールの送信メールの送信66

いつでも、他の作業中でも作業を中断する事無く、メーラを起動する必要もなく、どこにでもメールを送信することが出来ます。 通常は、ログインされたメンバーのメールアドレスがFromに、署名が設定されている場合は署名も挿入されてポップアップ表示されます。※印の項目は必須ですので必ずご記入ください。

[Cc]はカーボンコピーの略で、送信先以外のメールアドレスにも同時に送信されます。 こ

の時、すべての送信先に、すべてのメールアドレスが公開されます。

[Bcc]は、ブラインドカーボンコピーの略で、カーボンコピー同様に複数の送信先を設定し

ますが、 送信先のメールアドレスが公開されません。ただ、送信先がToに設定されたメールアドレスですので、 間違いメールと誤解されることも有るようです。

15

Page 16: Try! cms2012標準マニュアル2013 03

ファイルマネージャファイルマネージャ7‐17‐1

今回のバージョンの も特徴的な機能がファイルマネージャです。 ブラウザで有りながらwindowsで可能なファイル操作のほとんどをサーバで操作可能です。 また、インターネットならではの機能も装備し、ファイルのアップロードはもちろん、 テキストファイルを直接編集することも、htmlドキュメントをwysiwyg(ウィジウィグ)エディタで編集することも可能です。

ファイルマネージャを起動可能なユーザはスーパーユーザ(root監理者)と、スーパーユーザが使用を許可したユーザに限定されます。 それは、ファイルマネージャが高度な機能を有しているだけでなく、操作が即座に反映されると言う事にあります。 言い換えれば、ファイルやサイトを壊してしまう恐れも有るからです。

ツールバーファイルのアップロードや、選択したファイルへの操作を実行します。

ツリービューサーバのファイルの構造を忠実にツリーで表示しています。 ディレクトリ名をクリックして、直接ディレクトリにアクセスできます。

ディレクトリビュー指定したディレクトリ内の子ディレクトリやファイルを全て表示します。

ディレクトリはクリックしてさらに下層にアクセス、ファイルはファイルの種類により動作が異なります。 また、ファイルにはラジオボタンが

付いていますので、ツールバーでの操作の場合にファイルを選択します。

16

Page 17: Try! cms2012標準マニュアル2013 03

ファイルマネージャファイルマネージャ7‐27‐2

ツールバー

ファイルへの操作は、操作するファイルのラジオボタンをチェックして、目的のツールボタンを押すことで実行されます

①②

① 現在ディレクトリビューに表示されているディレクトリの1つ上の階層に移動します。 ⑧ カレントディレクトリに新しいディレクトリを作成します。

② 複数のファイルを一度にアップロードすることができます。 アップ

ロード先は、現在ディレクトリビューに表示されているカレントディレクトリです。

アップロードするファイルの選択は、[参照...]ボタンを押して、パソコンにあるファイルを選択することができますが、 複数のファイルを一度に選択するには、windowsのファイルマネージャを開き、

アップロードするファイルをテキストボックスにドラッグすることもできます。

⑨ カレントディレクトリに新しいファイルを作成します。 作成可能なファイルは、プレーンテキスト(.txt)、htmlファイル(.html)、スタイルシート(.css)、Javascript(.js)で、拡張子は自動的に付加されます。

③ ツールバーの[参照...]で選択したファイルをカレントディレクトリにアップロードします。 ⑩ 選択したテキストファイルをテキストエディタで編集します。

④ テキストボックスに指定したキーワードでファイルを検索します。 ⑪ 選択したhtmlファイルをwysiwyg(ウィジウィグ)エディタで編集します。

⑤ 選択(ラジオボタンをチェック)したファイルをコピーします。 実際には、ファイルではなくファイルのパスを記録しておき、[Paste]時にコピーを実行します。 対象はファイルのみです。ディレクトリをコピーすることは出来ません。

⑫選択したディレクトリ、ファイル名を変更します。

⑥ [Copy]でコピーしておいたファイルをカレントディレクトリに貼り付けます。 このとき、既にコピー元のファイルが削除されている場合は貼り付けることが出来ません。

⑬ 選択したディレクトリ、ファイルのパーミッションを変更します。 一部のサーバでwebサーバの権限をユーザに許可していない場合は変更できません。

⑦ 選択したファイルがディレクトリならlzh形式で圧縮します。 選択したファイルがlzh形式の圧縮ファイルならカレントディレクトリに解凍します。 (サーバがlzhコマンドを許可している場合)

⑭ 選択したディレクトリまたは、ファイルを削除します。 ディレクトリを削

除する場合は、削除するディレクトリの内部は空でなければなりません。

⑮ 選択したファイルがディレクトリならzip形式で圧縮します。 選択したファイルがzip形式の圧縮ファイルならカレントディレクトリに解凍します。 (サーバがzip、unzipコマンドを許可している場合)

④ ⑤ ⑥ ⑦

⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮

17

Page 18: Try! cms2012標準マニュアル2013 03

通常ページを開く通常ページを開く88

ブラウザでプレビューします

18

Page 19: Try! cms2012標準マニュアル2013 03

ログオフログオフ99

コンパネの操作を終了してログインを解除します。

19

Page 20: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐110‐1

次ページへつづく

環境設定画面

ニュース機能は、トップページでよく見かけるWhats Newコンテンツなどに利用すると便利です。

1. 新しいグループの追加 (環境設定)

1. カテゴリ名

グループに名称を付けます。メインメニューの名称にもなりますので長い名前はご遠慮ください。 デフォルトの「新着情報」のカテゴリ名は変更できません。

2. 挿入タグこのグループの記事一覧を挿入する場合のSSIのタグと、Ajaxで挿入する場合のjavascriptが紹介されます。 挿入

するページのソースにこのタグをコピーして、貼り付けるだけで記事一覧を挿入できます。

3. テンプレート記事本文を表示するためのデザインされたhtmlドキュメントです。

4. ページビュー記事一覧に表示する件数を設定します。

5. 全リスト

記事の一覧はページに挿入した限定されたリストだけでなく、全ての記事一覧を表示することも出来ます。 全て

の記事一覧を表示する場合は、このページにジャンプするボタン画像を設定してください。

6. 保存数

保存する記事数を設定します。記事はこの数を超えると古いものから順に削除されてゆきます。

7. 表示順

記事は新しい順、古い順どちらかを選択して表示することも出来ます。 デフォルトは新しい順に表示されます。

8. デザイン通常挿入された記事一覧は<table>タグでレイアウト、装

飾されて挿入されますが、このオプションを設定することで <ul>タグのシンプルなリスト形式で挿入することができます。

9. 月別一覧

通常記事一覧は日付に関係なく投稿順または、新着順に表示されますが、年を指定して月ごとに表示することも出来ます。

10. アイコン記事一覧の日付の前にアイコン画像を表示できます。

グループ「新着情報」はデフォルトで設定されていますが、それ以外のグループは[ニュース] → [新しいグループの追加] をクリックします。 Webサイト内いくつでも追加できます。

20

Page 21: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐110‐1

21

(環境設定)続き

⑫⑬⑭

11. 一覧画像記事にアイコンとは別に縮小画像を表示できます。一覧画像は、jQueryを使ってポップアップして拡大表示することが出来ます。

12. 日付の書式日付の書式を選択します。日付無しも選択可能

13. タイトルリンク一覧のタイトルに詳細ページへのリンクを付けない設定が出来ます。

14. タイトル表示詳細ページに記事のタイトルの表示/非表示の設定が出来ます。

15. 概要記事一覧に概要の表示/非表示を設定します。記事に一覧画像が設定されている記事は自動的に概要も表示されます。

16. 罫線画像記事一覧で1件ごとに罫線を表示する場合は罫線画像を設定してください。

17. 強調画像

新着記事に付けるアイコン画像を設定できます。このアイコンは、記事の投稿から1週間だけ表示されます。

コメント設定18. フォーム

訪問者からのコメントを受け付ける設定が出来ます。

19. タイトルフォームのタイトルです。

20. E‐Mailコメントを受信するメールアドレスの設定が出来ます。

21. 項目各項目の表示/非表示

22. 公開受信したコメントを一般公開する設定が出来ます。

⑱⑲

21

22

環境設定画面

Page 22: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐110‐1

2222

(環境設定)続き

モバイル設定23. 挿入タグ

携帯用挿入タグ の設定が出来ます。

24. テンプレート携帯用テンプレートの設定が出来ます。

スマートフォン設定(有料オプション)25. 挿入タグ

携帯用挿入タグ の設定が出来ます。

26. テンプレート携帯用テンプレートの設定が出来ます。

カレンダー設定27. 挿入タグ

記事は一覧だけでなく、カレンダーと連動させて表示することも出来ます。

28. ヘッダーカレンダーの7曜表のタイトルを日本語、英語を選択できます。

29. 詳細表示日付を強調表示するだけで記事へのリンクを付けません。

23

24

25

26

27

28

29

環境設定画面

Page 23: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐210‐2

このグループ内に記事を新しく作る。

グループ(記事一覧)の環境設定

HTMLエディタ詳細は24ページへ

23

IDをクリックすることで、該当記事の編集が可能になります。

①②

1. グループ記事の種類。

2. 記事URL記事のアドレス

3. 日付省略すると本日。

公開日・終了日を入力することで下書きとして作成することが可能です。

4. 件名記事のタイトルを入力。★必須になります。

5. アイコン

タイトル、日付の前に表示されるアイコンです。お手持ちの画像を記事毎に貼り付けられます。

6. 概要ここに概要が入ります。( HTMLタグは使用できません.SEO対策になります。)

7. タイトル画像

記事一覧に表示する画像が有れば選択できます。サムネイル表示でクリックすると拡大機能あり。

8. リンク先リンク先を指定したい時に記入します。指定したときは 優先になります。

9. 記事内容記事の内容を記入します。(HTMLタグも使用できます)

Page 24: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐310‐3

記事の本文テキストなどの編集には、エディターを使用します。

Tiny MCE というWebエディタが標準で装備されていま

す。多彩な表現が可能です。

エディタとはワープロソフトなどのように編集を行うソフトウェアです。

ホームページをつくるためにはHTMLと呼ばれるコードを書

くのが一般的ですが、それを習得するのには専門的知識を

必要としますので、一般的なユーザにとっては大きな負担

となります。

TryCNSでは、それら負担を軽減してワードやエクセルが使

えるレベルのユーザーなら簡単に記事を作ることができる

ように配慮しています。

記事を作る手助けをするのがWebエディタと呼ばれる機能

です。TryCMSの場合はTinyMCEとというエディタが標準

で装備されています。

これは、記事編集などの状況で表示され、このエディタを使

うことで多彩な表現が可能です。

HTMLエディタ

次ページへつづく

ウェブサイトで表示させるテキストはHTML形式で記述を行います。文字を太字にしたり、色をつけたりする場合に、HTMLではタグと呼ばれる制御 文(マークアップ)でテキストを囲みます。

HTMLでは細かい設定はできますが、タグをみただけでは実際にどのように表示されるかわかりにくいという欠点 があります。

エディタを利用すると、アイコンをクリックするだけでタグを自動で入力してくれ、実際の表示に近い状態で表示されるので、ワープロソフトのように編集を行えるようになります。

24

Page 25: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐310‐3

基本 編集

太文字太文字装飾は重要だと思える文章を指定しておくことでSEO的にも必要な

部分ですので、積極的にお使いいただいた方がいいでしょう。

切り取り選択した範囲を切り取り、切り取った内容をクリップボードにコピーします。 Firefoxではブラウザのセキュリティのため使用できません。 [Ctrl]+[x]のキー操作で行います。

斜体文字文字を斜体にしますが、日本語ではあまり使わないですね。漢字の場合構造が複雑ですので、読みにくくなる場合が多いでしょう。

コピークリップボードにコピー。Firefoxではブラウザのセキュリティのため使用できません。 クリップボードの使用は[Ctrl]+[c]のキー操作で行います。

アンダーラインアンダーライン文字はリンクされた文字との区別がつきにくくなる場合がありますので、これもあまり使わない事が多いと思います。

貼り付けカットまたはコピーしたテキストをペーストする。タグや属性もそのままペーストする。

打ち消し線これも閲覧者の環境によって再現できない場合がありますので、積極的な使用は控えたほうがいいかと思います。

テキストとして貼り付けカットまたはコピーしたテキストをペーストする。タグや属性もそのままペーストする。

文字位置を指定します。右寄せ 左寄せ 中央寄せ均等割付(日本語の場合は機能しない場合が多く殆ど使用しません)

Wordから貼り付けMicrosoft WordからカットまたはコピーしたテキストをHTMLに変換してペースト。

レイアウト 全て選択エディタ内のすべてのテキストを選択する。Ctrl+Aと同じ

番号なしリスト選択した段落を箇条書きリスト形式で表示する。挿入タグ【<ul><li>】 検索/置換

検索/置換パネルを開く。

番号つきリスト選択した段落を番号リスト形式で表示する。挿入タグ【<ol><li>】

元に戻す/やり直す前の操作の取消/取消操作をやり直し。

インデント/インデント解除インデントを設定する。一回クリックで左右に30px移動する。挿入スタイル【padding‐left】

フォーマット解除選択テキストに設定されたタグなどをすべて削除する。

文章の方向文章の方向を設定する。アラビア語や昔の日本語など横書きの時に右から左に文章を書く場合などに使用する。挿入タグ【<dir>】

次ページへつづく

ここではエディターの各機能を説明します。

エディターの機能を使う場合、適用したいテキストまたは段落

を選択してからエディターメニューのアイコンをクリックします。

25

Page 26: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐310‐3

リンク・画像 操作

リンクの挿入/編集選択テキストにリンクを作成する。挿入タグ【<a helf= >】

コード整形・コードのクリーンナップ

リンク解除選択したテキストのリンクを解除する。

ヘルプヘルプを表示する。(英語ヘルプ)

アンカーの挿入/編集カーソル位置にアンカーを挿入する。挿入タグ【<a name= >】

HTMLソース編集コード編集モードに切り替える。HTMLタグを確認したり、直接タグなどを入力するときに使う。

画像の挿入/編集画像の挿入、設定などを行う。画像ブラウザパネルが開く。挿入タグ【<img>】

ガイドラインと非表示項目の表示切り替えデフォルトはオンに設定。

埋め込みメディアの挿入FLASHなどのメディアを挿入する。

fullscreen フルスクリーンエディターをブラウザいっぱいに表示する。

スタイル設定 レイヤー

文字色選択テキストのカラーを設定する。挿入スタイル【color】

絶対位置指定(potition:absolute)のDIVボックスを挿入して、レイヤーとして表示させます。うまく使えばいろいろな表現をできますが、使っているテンプレートやCSSの仕組みをちゃんと理

解していないと、レイアウトが崩れる可能性も高いです。なので、あまり使わない方がいいと思います。

背景色選択テキストの背景カラーを設定する。挿入スタイル【background‐color】

新規レイヤーの挿入新規レイヤーを作成する。

前面へ移動/背面へ移動選択レイヤーの前後を移動する。

絶対位置指定の切り替え

次ページへつづく

ここではエディターの各機能を説明します。

エディターの機能を使う場合、適用したいテキストまたは段落

を選択してからエディターメニューのアイコンをクリックします。

26

Page 27: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐310‐3

テーブル タグ挿入

表を挿入テーブル(表)を作成する。挿入タグ【<table><tbody><tr><td>】

選択テキストに各種のタグをつけます。重複してタグをつけることもできます。

行を上に挿入/行を下に挿入選択セルの上/下に行を追加。挿入タグ【<tr><td>】

引用選択テキストに引用タグ<cite>をつける。

行の削除選択セルの行を削除。

略語選択テキストに略語タグ<abbr>をつける。

列を左に挿入/列を右に挿入選択セルの左/右に列を追加。

頭文字選択テキストに頭文字タグ<acronym>をつける。

列を削除選択セルの列を削除。

挿入選択テキストに挿入タグ<ins>をつける。

セルの結合/セルの結合を解除選択セルを結合/分離。挿入スタイル【colspan/rowspan】

削除選択テキストに削除タグ<del>をつける。

属性挿入 下付き/上付き選択テキストに下付きタグ<sub>/上付きタグ<sup>をつける。

選択テキストまたはカーソル位置の適用されるタグに属性を挿入します。

xhtml CSS編集・CSSスタイル編集選択タグにstyle属性を挿入する。スタイル編集ウィンドウが開く。挿入属性【style】

xhtml_attribute 属性の挿入/編集選択タグに任意の属性を挿入する。または属性の編集をおこなう。

次ページへつづく

ここではエディターの各機能を説明します。

エディターの機能を使う場合、適用したいテキストまたは段落

を選択してからエディターメニューのアイコンをクリックします。

27

Page 28: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐310‐3

入力 ドロップダウン

日時の挿入現在の日付または時刻データを挿入する。

エディターメニューでドロップダウンリストで表示されている機能です。

水平線カーソル位置に水平ライン(hrタグ)を挿入します。

スタイルスタイルを選択。選択テキストにSPANタグをつけてクラス属性を指定します。例:<span class="XXX">使用しているテンプレート内のtemplate.cssファイルに記述されているクラス

属性が表示されます。それぞれのクラスがブラウザでどう表示されるかは使用するテンプレートによってきまります。テンプレートの仕様書などを参照してください。

特殊文字記号表を開きます。

スマイリー/顔文字顔文字を入力。

拡張ライン挿入カーソル位置に水平ラインを作成して、スタイルを設定できます。

書式(フォーマット)選択した段落のタグを選択します。TinyMCEで選択できるのは段落<p>・見出し<h1〜h6>・連絡先<address>・整形済み<pre>です。

改行なしスペースの挿入改行禁止スペース(&nbsp;)を挿入します。

フォントの種類選択したテキストのフォントを選択できます。

テンプレートの挿入 フォントサイズ

選択したテキストのフォントサイズを個別に選択できます。ポイントで指定されます。

次ページへつづく

ここではエディターの各機能を説明します。

エディターの機能を使う場合、適用したいテキストまたは段落

を選択してからエディターメニューのアイコンをクリックします。

28

Page 29: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐310‐3

入力 ドロップダウン

日時の挿入現在の日付または時刻データを挿入する。

エディターメニューでドロップダウンリストで表示されている機能です。

水平線カーソル位置に水平ライン(hrタグ)を挿入します。

スタイルスタイルを選択。選択テキストにSPANタグをつけてクラス属性を指定します。例:<span class="XXX">使用しているテンプレート内のtemplate.cssファイルに記述されているクラス

属性が表示されます。それぞれのクラスがブラウザでどう表示されるかは使用するテンプレートによってきまります。テンプレートの仕様書などを参照してください。

特殊文字記号表を開きます。

スマイリー/顔文字顔文字を入力。

書式(フォーマット)選択した段落のタグを選択します。TinyMCEで選択できるのは段落<p>・見出し<h1〜h6>・連絡先<address>・整形済み<pre>です。

フォントの種類選択したテキストのフォントを選択できます。

フォントサイズ

選択したテキストのフォントサイズを個別に選択できます。ポイントで指定されます。

拡張ライン挿入カーソル位置に水平ラインを作成して、スタイルを設定できます。

改行なしスペースの挿入改行禁止スペース(&nbsp;)を挿入します。

テンプレートの挿入

次ページへつづく

ここではエディターの各機能を説明します。

エディターの機能を使う場合、適用したいテキストまたは段落

を選択してからエディターメニューのアイコンをクリックします。

29

Page 30: Try! cms2012標準マニュアル2013 03

ニュースニュース10‐410‐4

画像の挿入

エディタの画像管理ボタンを使用して画像の配置やサイズしてなどが行えます。

新しいディリクトリーファイルが作成できます。ここでは「icon」というディリクトリーファイルを作りました。

一つ上の階層へ

「参照」をクリックして自分のパソコンの中にある画像を参照します。

画像を選択して「開く」をクリックします。

アップロードボタンをクリックします。画像がここに入ります。

挿入したい画像を選択し、確認画面が出ます。

OKボタンをクリックします。

複数の画像をまとめてアップロードできます

ディリクトリーファイル

画像の編集は、アイコンメニューの中の をクリックして表示された画面で、変更する画像ファイルを選択しますと変更されます。

上記の様に「アドレスから」「表示」「上級者向け」

3つのタグに分かれていますが、よく使うのは「ア

ドレスから」「表示」の2つになります。

30

Page 31: Try! cms2012標準マニュアル2013 03

ニュースニュース11‐111‐1

テンプレート挿入

A、B、2箇所どちらからでも選択できます。

良く使用するデザインを予め作成しておき、必要な閉じhtmlエディタ(TinyMCE)に挿入することが出来ます。

導入時にはすでに数点のサンプルが設定されていますので、選択して編集していただくことも可能です。

既存のテンプレートが表示されます。

BHTMLエディタの「テンプレート」アイコンをクリック。

31

Aコンテンツメニューの「テンプレート」→「テンプレート」を選ぶ。

Page 32: Try! cms2012標準マニュアル2013 03

ニュースニュース11‐211‐2

テンプレート新規作成

新しいテンプレートを作成するには、コンテンツ→テンプレート→新規作成をクリックします。

1. タイトルテンプレート挿入時に識別するために名前を付けておきます。

2. 概要他のメンバーが利用可能なように簡単な使用法を記述しておきます。

3. アイコンレイアウトを一見できるアイコンがあれば設定します。 テンプレート挿入時に表示される一覧の左にあるアイコンです。 幅100px、高さ70px程度のサイズでお願いします。

テンプレートの名前をつけます。

テンプレートをイメージできる画像(100×70 程度) 

32

コンテンツメニューの「テンプレート」→「新規作成」を選ぶ。

Page 33: Try! cms2012標準マニュアル2013 03

コンテンツメニューコンテンツメニュー12‐112‐1

標準 SSI テキストの編集 ページのヘッダーやフッターは、季節やイベントで変更することがよくあり、全てのページを更新することは時間的に簡単では有りません。

そこで、ヘッダー、フッターを独立したファイルにデザインして、全てのページに挿入すれば、この独立したファイルを変更すれば、 自動的に全てのページを更新したことになりますね。この機能をSSI(サーバー・サイド・インクルード)といい、ページが表示される直前に、 サーバがドキュメントを結合してくれる機能です。

トップページもキャンペーンや、催し物を紹介する場合にも良く更新されますので、これもSSIにして簡単に更新可能になっています。 挿入されるドキュメントは、wysiwyg(TinyMCE)を使って自由にデザインしていただけます。

33

「コンテンツメニュー」の「標準SSIテキストの編集」を選択します。

Page 34: Try! cms2012標準マニュアル2013 03

コンテンツメニューコンテンツメニュー12‐212‐2

SSIテキストの作成と編集

ヘッダー、フッター、トップページ記事以外のSSI(サーバー・サイド・インクルード)ドキュメントの作成と編集が行えます。 ※おもに複数のページに同じコンテンツとして表示したいバナー広告、サイドメニュー、他などに有効です。

SEO的に不利と言うことはないのですが、階層ページのメインコンテンツにSSIを利用することは、Webサイト自体が重くなるので、あまりおすすめできません。頻繁に更新が必要な箇所には有効です。

新しいファイルの作成は、[コンテンツ]‐[SSIテキスト新規作成]を選択します。

ページ内のよく更新すると考えられる箇所を作成することが有効利用になります。どこでも編集できるようにするには、コンテンツマネージャー機能を追加する必要があります。

初めて保存する場合は、作成したドキュメントにファイル名を付けて保存する必要が有ります。保存するときは、htmlファイルと区別するために ○○○○.txtとして保存すると良いです。

ファイル名は、半角英数字にしてください。 サーバの文字コードがEUC‐JPで、構築するサイトがEUC‐JPの場合だけ日本語が使用可能ですが、windowsのFTPソフトで文字化けすることが多く、 やはりお勧めできません。厳密には、ご利用のパソコンもLinuxで、こちらもEUC‐JPの場合にだけ可能といえます。

作成したドキュメントをhtmlに挿入するには、 <!‐‐#include virtual="/ファイルの絶対パス"‐‐> このようになります。ファイル名は、拡張し txtとして保存しますとhtmlファイルとの区別が付くので推奨します。SSIテキストの編集でhtmlファイルを編集しますとデザインが崩れてしまいます。

「ファイルの絶対パス」に、名前をつけて保存したファイルのパスを絶対パスで設定してください。 絶対

パスは、ドキュメントルートを基準にしたパスを指します。詳しくはドキュメントルートと絶対パスについてをご参照ください。

※SSIテキスト編集で、通常の静的htmlファイルを編集することはできません。 静的htmlドキュメントを読み込み編集は可能ですが、上書きすると元となった静的htmlファイルは破損してしまいます。 必ず別ファイルとして、[名前をつけて保存]を行ってください。(※静的htmlの編集には、別途コンテンツマネージャの導入が必要です。) 

ファイルダイアログが開きますので、編集するファイルを選択してください。後は、ヘッダー、フッター、トップページ記事の編集同様wysiwyg(TinyMCE)を使って自由にデザインしていただけます。

34

※SSIテキスト編集で、

サイト内の頻繁に追加更新する箇所(表など)を設定することは有効です。

他には、サイドメニュー、バナーなど全ページに挿入されるコンテンツも有効です。

「コンテンツメニュー」の「SSIテキスト新規作成」を選択します。

「コンテンツメニュー」の「SSIテキストを編集」を選択します。

Page 35: Try! cms2012標準マニュアル2013 03

コンテンツメニューコンテンツメニュー17‐117‐1

ダウンロードマネージャ

み、契

です

ダウンロードマネージャは、資料など提供するファイルがどれだけダウンロードされたかを管理します。

35

Page 36: Try! cms2012標準マニュアル2013 03

コンテンツメニューコンテンツメニュー18‐118‐1

google マップ

み、契

です

世界 大のインターネットサービス会社googleが無料で提供

するマップシステムを自社のサイトにも簡単に導入することが出来ます。

無料とはいえ、初心者には難しく敷居が高いと良く効きます。そこで、本システムでは自社へのアクセスマップは 低限標準装備としました。

36

1. googleマップのご利用には、googleへのユーザ登録(無料)が必要ですので、 担当者は登録を行ってください。2. ログインが完了すると、こちらにアクセスし、必要事項を記入します。

複数のサイト(サーバ名、ドメイン名が異なる)に設置する場合は、その都度APIキーの取得が必要です。

3. キーが生成されると以下のようなページが表示されますので、コピーして大切に保管してください。

4. 表示された地図にはあなたの会社の位置を示す必要が有りますので、 あなたの会社位置情報(緯度、経度)が必要です。 位置情報はこちら、弊社無料位置情報サービスの「検索対象」に、 出来るだけ正確な所在地を入力して[検索...]を実行します。

表示された地図を拡大して、更に正確な位置を直接マウスでクリックして指定すると新しい住所が表示されますので、その住所をクリックして座標を取得してください。

5. 地図上に会社名や、所在地を表示する場合は、システムの「動作環境の設定」で予め設定しておく必要が有ります。6. 挿入タグ

地図の挿入はSSIでのみ可能です。 googleマップ自身がAjaxですので、AjaxでAjaxを挿入できないことからSSIのみのサポートとなります。<!‐‐#include virtual="/trycms/ajax.php?cmd=googlemap"‐‐>  このタグを地図を挿入したい場所に貼り付けます。

次ページへつづく

Page 37: Try! cms2012標準マニュアル2013 03

コンテンツメニューコンテンツメニュー18‐218‐2

google マップ基本設定

み、契

です

37

1. マップキーgoogleへのユーザ登録後に取得したマップキー

2. 座標

表示された地図にはあなたの会社の位置を示す必要が有りますので、 あなたの会社位置情報(緯度、経度)が必要です。

3. サイズ挿入される地図のサイズです。

4. アイコン所在地を示すアイコンを指定

5. 専用の「影」用アイコンがあれば設定可能です。

6. アイコン

地図上にシステムの動作環境で設定した、会社名、所在地を表示するかしないか。

Page 38: Try! cms2012標準マニュアル2013 03

サイト検索サイト検索19‐119‐1

データベースの更新

サイト内のコンテンツをキーワードで検索可能にします。

静的htmlはもちろん、動的生成されるニュース記事もヒットします。 利用者は、静的ページ、動的ページの区別無しに検索が可能です。 (google等のサイト内検索は一部を除き静的ページのみ)

また、同時にサイトマップも完全なツリー形式で生成していますのでSSIで挿入するだけで、簡単にサイトマップページも完成してしまいます。

38

サイト内コンテンツのデータベースを 新の状態に更新します。コンテンツの追加、記事の追加編集を行った場合は更新が必要です。更新と同時にデータベースが更新され、検索エンジンも反映します。

データベースの更新が完了し、対象ページ一覧に戻るまで操作を行わないでお待ちください。

更新が完了した時点で、サイトの構造をツリーで表示する「サイトマップ」も完成しています。ページのヘッダー部でjqueryとツリー表示を可能にするプラグインjquery.treeview.jsをインクルードしておきます。

サイトマップを挿入したい位置にSSIとツリー表示を実行するjavascriptを挿入してください。

Page 39: Try! cms2012標準マニュアル2013 03

サイト検索サイト検索19‐219‐2

環境設定

サイト内検索に関する条件を設定します。

39

1. サンプルフォームサイト内検索を実行するフォームのサンプルです。

2. テンプレート

検索結果一覧を表示するデザインされたテンプレートファイルを設定してください。 システムは、このhtmlドキュメントのソースで決め

られた特定のタグを見つけると、その位置に対応するドキュメントを挿入します。

3. 除外検索対象のデータベースから除外するディレクトリ名を1件ごとに改行して設定します。 ここで設定したディレクトリ内のドキュメントはデータベースに含まれません。

4. 表示件数検索結果一覧ページに一度に表示する件数を設定してください。対象ページが設定数以上に存在する場合は、[次のページ]ナビゲータが表示され、 全てのページを表示することができます。

5. 置き換えサイトマップのディレクトリ名を日本語に置き換えることができます。通常、インターネットサーバとみなさんのパソコンとはOSの文字

コードが異なるため、ファイル名に日本語を使用することができません。 それでは生成したサイトマップのディレクトリ名がアルファベット表記になり訪問者には見づらくなってしまいます。 そこで、

ディレクトリ名を分かりやすい日本語で表示させる為の置き換え文字列の設定です。

Page 40: Try! cms2012標準マニュアル2013 03