サイトのコンテンツを操作する
Craft Sitesでは、エディターを使ってサイトのコンテンツを操作します。このページではエディター画面の説明と併せて、次の操作方法を説明します。
- ファイルの作成
- ファイルの編集・保存
- ファイルの削除
- ファイルのアップロード
エディターの説明
サイトの管理画面でサイトを選択するとエディターが表示されます。エディターの主要な要素は次のとおりです。
| エディターの要素 | 画面上の位置 | 説明 |
|---|---|---|
| ファイル操作パネル | 左側 | サイトのコンテンツを構成するファイル一式を表示するパネルです。このパネルでファイルの作成・削除等を行います。 |
| コードエディター・ファイルビューワー | 中央 | HTML/CSS/JavaScriptのようなテキスト形式のファイルを編集するためのテキストエディターです。メディア形式のファイルの場合はファイルビューワーになります。 |
| Copilotパネル | 右側 | Craft SitesにはCopilotというコンテンツの作成補助機能があります。このパネルはではユーザーの質問とCopilotの回答を表示します。 |
以降はこれらのパネルやボタン等を使ってサイトのコンテンツを操作する方法を説明します。
ファイル・フォルダの追加
ファイル操作パネルを使ってファイル・フォルダを追加できます。
ファイルの作成
ファイル操作パネルからファイルを作成します。
- ファイル操作パネル上部の「追加」から「新しいファイルを追加」を選択します。
- ファイルの種別を選択し、「追加」を選択します。
- ファイル名の入力欄に新しいファイルの名前を入力し、Enterキーで確定します。
フォルダの作成
サイトではフォルダを使ってコンテンツの階層構造を表現できます。フォルダは次のようにファイル操作パネルから作成します。
- ファイル操作パネル上部の「追加」から「新しいフォルダを追加」を選択します。
- 入力欄に新しいフォルダの名前を入力し、Enterキーで確定します。
ファイルのアップロード
手元の端末に保存されているファイルをアップロードします。
- ファイル操作パネル上部の「追加」から「ファイルをアップロード」アイコンを選択します。
- ファイル選択ダイアログでアップロードしたいファイルを選択します。
フォルダのアップロード
手元の端末に保存されているファイルをフォルダ単位でアップロードします。
- ファイル操作パネル上部の「追加」から「フォルダをアップロード」アイコンを選択します。
- ファイル選択ダイアログでアップロードしたいフォルダを選択します。
ファイルの表示と編集
作成したファイルを表示・編集・保存する方法を説明します。
ファイルの情報を確認する
ファイル操作パネルで対象のファイルの三点リーダー(…)メニューから「情報を見る」を選択すると、ファイルの情報が確認できます。
ファイルを編集・保存する
ファイル操作パネルでテキストファイル（HTML, CSS, JavaScriptなど）を選択すると、コードエディターにファイルの内容が表示されます。エディター上でファイルを編集し、画面右上の「保存」を選択することで、ファイルの内容が更新されます。
画像ファイルの表示
ファイル操作パネルで画像ファイルを選択すると、画像ファイルが表示されます。「アドレスをコピー」で画像ファイルのURLをクリップボードに保存します。
HTMLファイルのプレビュー
編集中のファイルがHTMLの場合、公開前にブラウザ上での表示を確認できます。
- エディター右上の三点リーダー(…)メニューから「選択のHTMLプレビュー」を選択します。
- 新規タブでプレビュー画面が開きます。
なお、プレビュー画面ではパスを使った参照は無効になります。例えば次のa要素は相対パスで同階層のexample.htmlへのリンクを表現していますが、プレビュー時は無効になります。
<a href="./example.html">プレビュー時は無効リンク</a>名前の変更、移動、コピー
ファイル操作パネルを使ってファイル/フォルダに関する次の操作手順を説明します。
- 名前の変更
- フォルダ間移動
- コピー
ファイル名の変更
- ファイル操作パネルで対象のファイル・フォルダ名の三点リーダー(…)メニューから「名前の変更」を選択します。
- 入力欄に新たな名前を入力し、Enterで決定します。
ファイルの移動
- ファイル操作パネルで対象のファイル・フォルダ名の三点リーダー(…)メニューから「変更」を選択します。
- 移動先を入力し、「保存」を選択します。
移動先フォルダは末尾がスラッシュ / になるように指定します。以下はフォルダ指定の例です。
/… サイトの第一階層に移動します。dir1/… dir1というフォルダに移動します。dir1/inner1/… dir1フォルダ内のinner1フォルダに移動します。
ファイルのコピー
- ファイル操作パネルで対象のファイル・フォルダ名の三点リーダー(…)メニューから「コピー」を選択します。
- 移動先を入力し、「保存」を選択します。
コピー先のフォルダ・ファイル名はスラッシュ / 区切りで指定してください。
ファイルの公開・非公開
ファイル操作パネルを使ってファイルの公開設定を変更します。
- ファイル操作パネルで対象のファイル・フォルダ名の三点リーダー(…)メニューから「公開する」「非公開にする」を選択します。
- ファイルの場合は対象の公開状態に応じて「公開する」と「非公開にする」のどちらかが表示されます。
- ダイアログのメッセージを確認して、問題なければ「公開する」・「非公開にする」を選択します。
ファイルの削除
ファイル操作パネルでファイルを削除できます。
- ファイル操作パネルで対象のファイル・フォルダ名の三点リーダー(…)メニューから「削除」を選択します。
- ダイアログに対象のファイル名・フォルダ名が表示されるので内容を確認し、削除してよければ「削除」を選択します。