第8章 画像・動画を管理する
ページや記事に使う写真・動画は、「画像ブラウザー」 という専用の画面でまとめて管理します。 この章では、画像ブラウザーの開き方から、アップロード・整理のしかたまでを説明します。
画像ブラウザーとは
画像ブラウザーは、サイトで使う画像や動画を保管しておく「アルバム」のような画面です。
（画面上部に 📁 FineCMS Image ブラウザー と表示されます）
- 編集画面の中に開くのではなく、別の小さなウィンドウ（ポップアップ） として開きます。
- ここに一度アップロードした画像は、どのページ・どの記事からでもくりかえし選んで使えます。
ワンポイント 画像は「使うたびにアップロードする」のではなく、「一度アップロードして、必要なときに選ぶ」しくみです。 同じ写真を何ページでも使い回せます。
画像ブラウザーを開く
開き方は 2 通りあります。どちらを開いても、中身は同じ画像ブラウザーです。
① 「画像管理」から開く（整理したいとき）
左側のメニューの 「管理」 の中にある 「画像管理」 をクリックします。 アップロードや整理だけをしたいときは、こちらが便利です。
② 編集画面の「選択」ボタンから開く（画像を差し込みたいとき）
ページや記事の編集中、画像を入れる欄にある 「選択」 ボタンをクリックすると、 同じ画像ブラウザーが開きます。画像を選ぶと、その場所に画像が差し込まれます。
①は「アルバムを開いて整理する」、②は「アルバムから1枚選んで貼る」イメージです。
フォルダを作る
画像ブラウザーでは、画像を フォルダ（入れ物） に分けて保管します。
⚠️ 大切なポイント：画像は必ずフォルダの中に入れます。 いちばん上の階層（ルート）には直接アップロードできません。まずフォルダを作ってください。
- 左側の 「フォルダ」 の下にある 「＋ 新規フォルダ」 をクリックします。
- フォルダ名（英数字・ハイフン）を入力して 「作成」 を押します。
ワンポイント 「news（お知らせ用）」「works（施工事例用）」のように、用途ごとにフォルダを分けておくと、 あとから画像を探しやすくなります。
画像・動画をアップロードする
フォルダを選んだ状態で、画像や動画を取り込みます。
アップロードのしかた
中央の 「クリックしてファイルを選択（このエリアにドロップも可）」 と書かれた場所に、
- パソコンから ファイルをドラッグ＆ドロップ する、または
- そのエリアを クリックしてファイルを選ぶ
のどちらかで取り込めます。複数のファイルをまとめて取り込むこともできます。
圧縮・サイズの設定
アップロードする前に、上部のツールバーで画像の仕上がりを選べます。
| 設定 | 内容 |
|---|---|
| 圧縮 | 画質を選びます（80% / 60% / 45%）。数字が小さいほどファイルが軽くなりますが、画質は下がります |
| 最大幅 | 画像の横はばの上限を選びます（初期値は 1000px）。大きすぎる写真は自動で縮小されます |
ワンポイント ホームページ用の写真は、大きすぎると表示が重くなります。 特にこだわりがなければ、初期設定（圧縮80%・最大幅1000px）のままで十分きれいに表示されます。
⚠️ アップロードできるファイルサイズには上限があります 1ファイルあたり 20MB までです。動画など大きいファイルでアップロードに失敗する場合は、まずファイルサイズをご確認ください。
⚠️ 圧縮が効くのは「JPG」形式です この圧縮（%）の設定が効くのは、写真に向いた JPG 形式のときだけです。PNG・GIFなどには効きません。 （「最大幅」による縮小はPNGにも効きます。効かないのは圧縮率（%）の設定だけです。GIFは縮小・圧縮とも効きません） 写真は、できるだけ圧縮率を高めた（数字を小さくした）JPGで保存すると、画質を保ちつつファイルを軽くでき、 ページの表示が速くなります。写真をアップロードするときは、まずJPG形式を選ぶのがおすすめです。
使えるファイルの種類
| 種類 | 対応形式 |
|---|---|
| 画像 | JPG・PNG・WebP・GIF |
| 動画 | MP4・WebM |
| その他 | SVG・PDF |
※ GIF（動くイラスト）とWebP・SVGは、画質を保つため自動縮小されません。動画も縮小されずにそのまま保管されます。 ※ PDFの扱いについては、次の「PDFを画像として取り込む」で説明します。
PDFを画像として取り込む（チラシ・資料に便利）
FineCMSには、PDFをアップロードすると、その1ページ目が自動で画像（JPG）に変換される べんりな機能があります。
チラシ・メニュー表・料金表・お知らせなど、紙の資料（PDF）をそのまま画像としてページに載せたいときに役立ちます。
使いかた
- 画像ブラウザーで、PDFファイルをほかの画像と同じようにアップロードします。
- アップロードすると、元のPDF と、そこから作られた 1ページ目の画像（JPG） の両方が保管されます。
- あとは、その画像を通常の写真と同じように選んでページに差し込むだけです。
ワンポイント ふつう、PDFはそのままではホームページの中にきれいに表示できません。 この機能を使えば、チラシなどを わざわざ画像に作り直さなくても、PDFを入れるだけで画像として掲載できます。 ※ 変換されるのは 1ページ目だけ です。複数ページを見せたい場合は、ページごとに画像を用意してください。
画像をページに差し込む
編集画面の「選択」ボタン（前述②）から画像ブラウザーを開いた場合は、次の流れで差し込みます。
- フォルダを開いて、使いたい画像をクリックして選びます。
- 画面下の 「この画像を選択」 を押します。
- ボタンが 「✅ 反映しました」 に変わり、編集画面の画像欄に反映されます。
ワンポイント 選択してもポップアップはそのまま開いた状態が続きます（自動では閉じません）。編集画面のタブが前面に表示されるので、確認できたらポップアップは手動で閉じてください。
画像の入れかたの全体的な流れは 👉 4. ページを編集する の「画像を入れる」もあわせてご覧ください。
画像にリンクを付ける（クリックでPDFや別ページへ）
差し込んだ画像には、クリックしたときの飛び先（リンク） を設定できます。 画像の入力欄にある 「🔗 リンク」 をクリックすると、リンクの設定が開きます。
- リンク先：飛び先のURL、または固定ページを指定します。
- 「別タブで開く（target=_blank）」：チェックを入れると、リンク先が新しいタブで開きます。
使いかたの例：画像をクリックしてPDFを開く
前の「PDFを画像として取り込む」と組み合わせると、こんな使い方ができます。
- チラシなどのPDFをアップロードします（1ページ目が画像になります）。
- その 画像をページに差し込みます（チラシのサムネイル代わり）。
- 画像の 「🔗 リンク」 を開き、リンク先に元のPDFを指定します。 （PDFのURLは、画像ブラウザーで右クリック →「パスをコピー」で取得できます）
- これで、画像をクリックするとPDFが開く ようになります。
⚠️ 「別タブで開く」をおすすめします PDFやほかのサイトへのリンクは、「別タブで開く」にチェックを入れるのがおすすめです。 元のページを閉じずに、PDFを別のタブで見てもらえるので、閲覧者が迷いにくくなります。
画像を整理する
アップロードした画像は、あとから整理できます。画像を右クリックすると、メニューが表示されます。
| 操作 | 内容 |
|---|---|
| リネーム（✏️） | ファイルの名前を変えます |
| リサイズ（🗜️） | 画像の大きさ・画質を変えます（ツールバーの「一括リサイズ」でまとめて処理も可） |
| 移動（📁） | 画像を別のフォルダへ移します |
| パスをコピー（📋） | 画像の場所（URL）をコピーします |
不要になった画像は、選択して 「一括削除」 でまとめて消せます。
⚠️ 注意：移動・名前の変更はURLが変わります 画像を 移動 したり 名前を変更 すると、その画像のURL（住所）が変わります。 すでに公開しているページで使っている画像は、表示されなくなることがあります。 公開中のページで使っている画像は、むやみに移動・リネームしないようご注意ください。
ワンポイント：整理の操作には権限が必要な場合があります アカウントによっては、画像の閲覧・アップロード・フォルダ作成はできても、リネーム・リサイズ・移動・削除などの「整理」操作ができない設定になっていることがあります。右クリックメニューの整理系の項目が出ない・使えない場合は、権限の設定について管理者にご確認ください。
画像に代替テキスト（ALT）を設定する
代替テキスト（ALT） とは、画像の内容を説明する短い文章です。 目の不自由な方が使う「画面読み上げソフト」は、この文章を読み上げて画像の内容を伝えます。また、画像がうまく表示されなかったときに、代わりに表示される文章にもなります。
ワンポイント：すべての画像に必要というわけではありません 飾りとして置いているだけの画像（模様や区切り線など）は、代替テキストを空欄のままで問題ありません。 「その画像が何を伝えているか」を文章にできる場合に入力してください。
日本語のファイル名は自動で入る
日本語のファイル名（例：会社外観.jpg）の画像をアップロードすると、保管時にファイル名は英数字に変換されますが、元の日本語名が代替テキストに自動で入ります（例：「会社外観」）。英数字のファイル名の場合は、代替テキストは空のままです。
画像ブラウザーで確認・変更する
画像ブラウザーの各画像には、名前の下に代替テキストが1行表示されます（未設定の場合は薄い色で「alt未設定」と表示されます）。
- カードにマウスを乗せて少し待つと、代替テキストの全文がポップアップで表示されます。
- 画像を右クリックして 「📝 ALTを変更」 を選ぶと、変更できます（空欄で保存すれば、飾り画像として扱われます）。
編集画面で確認・変更する
編集画面で画像を選択すると、その画像に登録されている代替テキストが自動で入力欄に入ります。内容がそのページに合わない場合は、その場で書き換えられます。
⚠️ リッチテキスト内に直接貼った画像は対象外です 文章エディタ（リッチテキスト）の中に直接貼り付けた画像には、この自動入力は働きません。 代替テキストを付けたい場合は、エディタの 「HTMLモード」 に切りかえて、
<img>タグに直接alt="説明文"を書き込んでください。
動画を使う
動画の使いかたは、大きく 2 通りあります。
① ブロックの背景に動画を流す
ブロック（箱）の背景に、動画（MP4・WebM）を敷くことができます。 ブロックの設定にある 「背景動画」 から、画像ブラウザーで動画を選びます。
- 動画表示セット：動画の見せ方のひな形を選べます。
- 再生区間（秒）：動画のどこからどこまでを流すか、開始・終了の秒数を指定できます。
※ 動画表示セットは、専門の管理者（super権限）があらかじめ用意する項目です。 一覧に何もない場合は、管理者にご相談ください。
② YouTubeなどの動画を埋め込む
YouTubeやVimeoなどの外部動画を埋め込みたいときは、「完全HTML」 という種類のパーツを使います。
- パーツの種類で 「完全HTML」 を選び、動画サービスから取得した「埋め込み用コード（iframe）」を貼り付けます。
- FineCMSには「YouTubeのURLを貼るだけ」の専用欄はありません。埋め込みコードを使う形になります。
ワンポイント 埋め込み用コードは、YouTubeなら動画の「共有」→「埋め込む」からコピーできます。 貼り付け方が分からないときは、無理をせず制作担当者にご相談ください。
まとめ
- 画像管理（または編集画面の「選択」）で画像ブラウザーを開く
- まず フォルダを作る（ルート直下には入れられません）
- ドラッグ＆ドロップでアップロード（圧縮・最大幅を選べる）
- 編集画面からは 「この画像を選択」 で差し込む
- 整理は右クリックメニューから（移動・リネームはURLが変わるので注意）
- 代替テキスト（ALT） は日本語ファイル名なら自動入力・画像ブラウザーや編集画面でも変更できる
- 動画は 背景動画 か 完全HTMLパーツ（埋め込み） で使う
← 目次にもどる ／ 次は 👉 9. フォームを作る