コンテンツにスキップ

コンテンツ管理

このページでは、サイトを構成する HTML・CSS・JavaScript・画像・動画・PDF などのコンテンツを編集する ファイル操作画面 の操作を説明します。ファイル操作画面は、ヘッダーの エディタ ドロップダウン > ファイル から開きます。

ファイル操作画面はテキスト編集とアセット管理の両方を担い、権限・ワークフロー・ルート設定・翻訳など各機能への入口を兼ねたハブ画面です。

ファイルやフォルダを右クリックすると、コンテキストメニューから以下の操作を選べます。本章で扱わない項目は、誘導先の章を参照してください。

メニュー 用途 本章で扱う / 誘導先
新規フォルダ / 新規ファイル / 貼り付け フォルダ・ファイルの作成、コピー結果の貼り付け 本章
コピー / リネーム / 更新(ツリー再読込) コピー対象としてマーク、名前変更、ツリー再表示 本章
削除 / フォルダ削除 / すべて削除 / 変更の取り消し 削除予定マーク、編集内容の取り消し 本章
プレビュー 編集中ファイルを別タブで表示 本章
差し替えアップロード / 配下アップロード / ZIP 展開アップロード アップロード系操作(自動展開含む) 本章(アップロードZIP の操作
ダウンロード / サブフォルダごとダウンロード 単体・一括ダウンロード 本章(ダウンロードZIP の操作
EXIF 情報削除 画像メタデータの除去 本章(EXIF 情報の取り扱い
変更前後の差分表示 / 削除ファイルの表示 公開済みとの差分・削除予定一覧 本章(差分) / ワークフローと承認
競合ファイルの表示 他ユーザーが先に公開したファイルの確認 トラブルシューティング / ファイルの競合
アクセス権限設定 チーム単位の権限設定 ユーザーと権限
ワークフロー設定 個別のファイル・フォルダにワークフローを割り当て 承認ワークフロー / 個別割り当て
インクルード設定(SSI) サーバーサイドインクルードの設定 URL リライトと SSI
フォーム登録 フォーム機能の有効化・設定 ルート設定 / フォーム・メール
ローカライズ / 翻訳してダウンロード / フォルダ配下一括翻訳 外部翻訳エンジンを利用した翻訳操作 ローカライズAI
SEO ファイル サイトのメタ情報・OGP 等の編集 (対応章はリリース後追加予定)

ファイルツリーの基本操作

エディタ画面の中央には、現在のサイトのフォルダ構成を示すファイルツリーが表示されます。

  • フォルダの開閉 — フォルダ名の左にある三角アイコンをクリックします。
  • ファイルを開く — ファイル名をクリックすると、編集エリアに内容が表示されます。
  • ファイルの移動 — ファイルツリー上でドラッグして別フォルダにドロップします。
  • 状態の確認 — アイコンや色で「更新/追加/削除/競合」などの編集状態を判別できます。

大規模なサイトではツリーが深くなりがちです。ツールバーの すべて閉じる を使うと、トップ階層のみを表示できます。

ファイル操作画面の全景

ファイル・フォルダの新規作成

新規ファイル

  1. ツリーで作成先のフォルダを選択します。
  2. ツールバーの 新規ファイル ボタンをクリックします。
  3. 表示されたダイアログでファイル名を入力します。
  4. OK をクリックすると、ツリーにファイルが追加され、編集エリアが開きます。

新規フォルダ

  1. ツリーで作成先のフォルダを選択します。
  2. ツールバーの 新規フォルダ ボタンをクリックします。
  3. フォルダ名を入力して OK をクリックします。

名前を付けるときの注意

  • 既に同じ名前のファイル・フォルダが存在する場合はエラーになります。
  • スペースを含めないこと、/\ などのパス区切り記号を含めないことを推奨します。
  • 拡張子(.html.css.js など)はファイル種別の判定に使われます。コードエディタのシンタックスハイライトも拡張子に応じて切り替わります。

ファイルの編集

コードエディタ

HTML・CSS・JavaScript・JSON・XML などのテキストファイルは、コードエディタで編集します。

  • シンタックスハイライト — ファイル拡張子に応じて自動的に色分け
  • 行番号と改行表示 — 折り返しと自動インデント
  • 検索・置換 — エディタ上でショートカットキーから利用可能(環境により Cmd/Ctrl + F
  • 保存 — エディタ右上の 保存 ボタン、またはツールバーの 保存 ボタン
  • 言語モード — ファイル拡張子から自動で判定されます。誤判定があった場合は モード切り替え メニューから変更できます。

保存しても即時に公開はされません。保存内容は次に申請されるまで「編集中」の扱いになります。

自動保存と同時編集

  • 自動保存はありません。 編集途中の内容は明示的に 保存 を押すまで失われる可能性があります。ブラウザの予期せぬ終了や、別ファイルへの切り替え前には必ず保存してください。
  • 別タブ・別ユーザーで同じファイルを開いて編集することは可能ですが、後から保存した側が先に保存された内容を上書きします。ツリー上で 競合 マークが出た場合は、差分で確認してから上書きしてください。
  • 「他のユーザーが同時編集中」を明示するロック機能はありません。チーム間の調整は チーム を活用してください。

大容量ファイル編集時の挙動

  • 数 MB を超えるテキストファイルでは、エディタの応答が遅くなることがあります。シンタックスハイライトや差分処理がブラウザ側で実行されるためです。
  • ファイルサイズが極端に大きい(数十 MB 以上)場合、エディタが開かずダウンロードリンクのみが表示されることがあります。ファイルを分割するか、外部で編集してからアップロードしてください。

画像ファイル

JPEG / PNG / GIF / SVG などの画像を開くと、編集エリアにプレビューが表示されます。プレビュー下部のリンクから、画像をローカルにダウンロードできます。

PDF ファイル

PDF を開くと、サムネイルプレビューとダウンロードリンクが表示されます。

動画・その他のバイナリファイル

動画ファイルや CMS で直接編集できない形式のファイルは、ダウンロードリンクのみ表示されます。差し替える場合は、新しいファイルをアップロードして上書きしてください。

アップロード

外部で作成・編集したファイルを CMS に取り込むときに使います。

  1. ツリーで配置先のフォルダを選択します。
  2. ツールバーの アップロード ボタンをクリックします。
  3. ファイル選択ダイアログで、アップロードするファイル(複数選択可)を選びます。
  4. アップロードの進行状況が表示され、完了すると自動的にツリーに反映されます。

アップロード時の制限

サイト管理者が次の制限を設定できます。アップロード時に制限を超えるとエラーになります。

制限項目 既定値 設定箇所
最大ファイルサイズ 8 MB(固定) (変更不可)
禁止ファイル名パターン (未設定) サイト設定 > アップロード制限
受け入れる MIME タイプ 用途別に設定 サイト設定

エラー時の典型的な原因と対処:

原因 対処
ファイルサイズが上限を超えている ファイルを圧縮するか分割する
サイトで禁止されているファイル名パターンに該当 ファイル名を変更する

詳細は サイト設定 / アップロード制限 を参照してください。

ドラッグ&ドロップの対応範囲

ドラッグ&ドロップでのアップロード対応は、画面によって異なります。

画面 ドラッグ&ドロップでのアップロード
ファイル操作画面(本ページが扱う画面) 非対応。アップロード ボタンから選択
データエディタの新規ファイル追加 対応(ドロップエリアにファイルをドロップ)
リッチエディタの「画像を挿入」から開くファイル一覧 非対応(呼び出し元のファイル操作画面の挙動と同じ)

ファイル操作画面で大量のファイルをまとめて扱うときは、ZIP のアップロードと自動展開を使うと効率的です(後述)。

ZIP の操作

複数のファイルを一括でやり取りするときに使用します。

ZIP のダウンロード(圧縮)

  1. 対象フォルダを選択します。
  2. ZIP ダウンロード をクリックすると、フォルダ配下のサブフォルダ構造ごと ZIP 化されてダウンロードされます。

ZIP のアップロード(展開)

  1. アップロード から ZIP ファイルを選択します。
  2. アップロード時に自動展開 オプションを有効にすると、サーバー側で自動展開され、サブフォルダ構造がそのまま反映されます。
  3. 展開処理はバックグラウンドで実行されます。完了までしばらく時間がかかる場合があります。

ファイル名に CMSoD で使用できない文字(一部の記号など)が含まれているファイルは、展開時にスキップされます。展開後に、ファイル一覧で取りこぼしがないか確認してください。

ダウンロード

  1. ダウンロードしたいファイルをツリーで選択します。
  2. ツールバーの ダウンロード ボタンをクリックします。
  3. ブラウザの保存ダイアログから保存先を指定します。

複数ファイルや、フォルダごとの一括ダウンロードを行いたい場合は、ZIP の操作 を参照してください。

ファイルの移動・コピー

ドラッグ&ドロップでの移動

ツリー上のファイルをマウスでドラッグして別フォルダにドロップすると、移動できます。

  • 同名のファイルがあるフォルダにはドロップできません。
  • 編集中の変更がある場合は、先に保存するか取り消してから移動してください。

コピー&ペースト

ファイルを別のフォルダに複製したいときに使用します。

  1. コピーしたいファイルを選択します。
  2. ツールバーの コピー ボタンをクリックします(コピー対象としてマークされます)。
  3. ツリーでコピー先のフォルダを選択します。
  4. 貼り付け ボタンをクリックします。

コピー先に同じ名前のファイルが存在する場合は、上書きまたはキャンセルを選ぶダイアログが表示されます。

リネーム

  1. リネームしたいファイルを選択します。
  2. ツールバーの リネーム ボタンをクリックします。
  3. 新しい名前を入力して OK をクリックします。

拡張子を変更すると、コンテンツタイプ(MIME)の判定やサムネイル生成の挙動が変わる場合があります。拡張子を変更する操作には確認ダイアログが表示されます。

ファイル・フォルダの削除

  1. 削除したいファイルまたはフォルダをツリーで選択します。
  2. ツールバーの 削除 ボタンをクリックします。
  3. 確認ダイアログで OK をクリックします。

削除した直後、対象は「削除予定」としてマークされます。実際の公開反映は、削除を含む申請が承認・公開されたタイミングで行われます。申請前であれば、ツールバーの 変更を取り消す で取り消せます。

フォルダを削除すると、そのフォルダ配下のすべてのファイルとサブフォルダも、まとめて削除予定としてマークされます。フォルダ削除前に、不要なファイルがないか必ず確認してください。

削除済みのファイルは、他のページや HTML から参照されているかどうかにかかわらず公開時に反映されます。リッチエディタや HTML に挿入していた画像も表示されなくなるため、削除前に参照箇所を確認してください。

サムネイル

画像をアップロードすると、一覧表示用のサムネイルが自動生成されます。

生成対象と条件

形式 サムネイル生成 備考
JPEG / PNG / GIF あり 標準幅 360px(環境により変動)
SVG あり 原画像をそのまま表示(ラスタライズなし)
WebP あり 環境依存。表示できない場合は元画像にフォールバック
PDF 1 ページ目をサムネイル化 環境依存
動画(MP4 等) なし 別途画像ファイルをアップロードしてサムネイル代わりに使用
その他バイナリ なし 汎用アイコンを表示

失敗時の挙動

  • サムネイル生成に失敗した場合は、汎用アイコンが表示されます(ファイル本体のアップロードは成功しています)。
  • 表示が崩れる場合は、画像を再エクスポート(破損していない元データから書き出し)してから、再アップロードしてください。
  • リネームで拡張子を変更すると、サムネイルの判定もやり直されます。

EXIF 情報の取り扱い

JPEG 画像にはカメラの機種・撮影位置・撮影日時などの EXIF 情報が埋め込まれていることがあります。CMSoD では次の 2 通りの方法で EXIF を削除できます。

操作 タイミング
アップロード/差し替え時のオプション ファイルを送るときに「EXIF を削除する」オプションを ON にすると、アップロード時に EXIF を取り除いて保存します
既存ファイルへの EXIF 情報削除 アクション 対象を選び、コンテキストメニューから EXIF 情報削除 を実行します。確認ダイアログで承認すると削除されます

社外公開サイトでは情報漏洩防止のため、アップロード時オプションを ON にした運用を推奨します。

ファイルプロパティ

各ファイルを選択すると、以下の情報が表示されます。

項目 内容
パス ファイルの格納パス
サイズ ファイルサイズ(バイト)
コンテンツタイプ MIME タイプ
最終更新者 アップロードまたは差し替えを行ったユーザー
最終更新日時 最終更新のタイムスタンプ

alt テキストやキャプションは、ファイル単体のメタデータとしては保持されません。表示先の HTML 側で個別に指定してください。

リッチエディタからの画像挿入

HTML 編集のリッチテキストエリアで画像を挿入するときは、次の手順で操作します。

  1. リッチエディタの 画像を挿入 ボタンをクリックします。
  2. ファイル一覧が別ウィンドウで開きます。
  3. 対象のフォルダを開き、挿入したい画像を選択します。
  4. 画像がリッチエディタに挿入されます。
  5. 挿入後、エディタ上で alt テキストやサイズを調整できます。

編集内容の確認と取り消し

差分の表示

公開済みのバージョンと、現在の編集内容を並べて比較できます。

  1. 差分を確認したいファイルを選択します。
  2. ツールバーの 差分 ボタンをクリックします。
  3. 左に公開中、右に編集中の内容が表示されます。
  4. 変更箇所はハイライトで色分けされます(行単位で表示)。

差分の表示は HTML や CSS などのテキストファイルでのみ有効です。画像やバイナリファイルは差分表示ができません。

変更を取り消す

編集内容を破棄して、最後に保存・公開された状態に戻します。

  1. 取り消したいファイルを選択します。
  2. ツールバーの 変更を取り消す ボタンをクリックします。
  3. 確認ダイアログで OK をクリックします。

取り消しは 1 ファイル単位で行います。複数のファイルをまとめて取り消したい場合は、申請画面の すべての変更を破棄 を使用してください(申請 / 変更の破棄)。

プレビュー

編集中のコンテンツを、別タブで実際の表示として確認できます。

  1. プレビューしたいファイルを選択します。
  2. ツールバーの プレビュー ボタンをクリックします。
  3. 別タブにプレビューページが表示されます。

プレビュー URL はサイト固有のホスト名を含みます。承認者と URL を共有したい場合は、申請画面の プレビュー URL セクションを利用してください(申請 / プレビュー URL)。

コンテンツのステータス

ファイルツリー上のアイコン・色で、各ファイルの状態が一目で分かります。

ステータス 表示 意味
通常 (標準アイコン) 公開済みの状態(編集中の変更なし)
更新(Updated) 編集マーク 公開済みのファイルに編集中の変更がある
追加(Added) 追加マーク 新しく作成され、まだ公開されていない
削除(Deleted) 削除マーク 削除予定。申請・承認後に消える
競合(Conflict) 競合マーク 自分の編集中に、他のユーザーが先に公開した変更がある

「競合」ステータスが出た場合は、差分ボタンで他のユーザーの変更内容を確認し、自分の編集と整合性を取ってから申請してください。詳細な対処法は トラブルシューティング / ファイルの競合 を参照してください。

次に読むページ