画像のアップロードと管理

2018.11.26

最終更新日：2019.12.06

画像はWEBサイトの内容を理解しやすくしたり、デザイン性を高めたりとWEBサイトには重要な存在です。
しかし、画像を多く使うと差し替えや管理が大変といった問題もあります。
Rabbity-CMSは、画像のアップロードや管理が簡単にできる機能を備えています。
本記事ではそんな画像に関する機能について解説していきます。

画像の管理は「サーバーブラウザ」機能を使用

画像やPDFなどの各種ファイルのアップロードやフォルダ管理は「サーバーブラウザ」機能を使用します。
サイトで使用する画像や各種ファイルは基本的にこのサーバーブラウザにアップロードする必要があります。

サーバーブラウザはコントロールパネルの[作成]→[素材]→[画像の管理]または[ファイルの管理]から立ち上げることができます。
※[画像の管理]と[ファイルの管理]では立ち上がるサーバーブラウザのタイプが異なります。画像のアップロードや管理は[画像の管理]メニューからサーバーブラウザを立ち上げてください。

サーバーブラウザウィンドウの見方

番号	項目	機能
A
1	ファイルタイプ	Image：[画像]メニューからサーバーブラウザを立ち上げる File：[ファイル]メニューからサーバーブラウザを立ち上げる
B
2	並び替え機能	選択した条件で画像やファイルを並び替えます。選択肢：名前順、日付順、サイズ順
3	素材サイト選択	画像などの素材サイトを開くことができます。選択肢：pixabay[無料]、Unsplash[無料]、fotolia[有料] ※pixabayとUnsplashは、画像を直接ダウンロードすることができます。
4	最適化チェック機能	表示されているフォルダ内の画像（JPEG・PNG・GIF）を最適化（ロスレス圧縮）します。
C
5	階層表示ボタン	クリックすると上の階層を表示します。
6	フォルダ	選択中のフォルダと同階層のフォルダリストを表示します。フォルダ名をクリックすると、そのフォルダ内の画像やファイルが「画像・ファイル表示領域（9）」に表示されます。
7	フォルダの新規作成機能	クリックすると選択したフォルダ内にフォルダを作成します。 ※フォルダ名は必ず半角英数字（大文字不可）で作成してください。
D
8	フォルダ階層	現在のフォルダ階層を表示します。
9	画像・ファイル表示領域	選択中のフォルダ内の画像やファイルの一覧を表示します。
10	画像・ファイルのサムネイル	画像やファイルのサムネイルです。サムネイル画像、名称、サイズ、説明、その他機能アイコンで構成されています。（各機能アイコンの説明は下記11〜19を参照）
11	メニューボタン	フォルダ、画像、ファイルのメニューを開きます。
12	名前の変更（11：メニュー内）	フォルダ、画像、ファイルの名称を変更します。 ※フォルダ、画像、ファイルの名称は必ず半角英数字（大文字不可）で作成してください。
13	ファイルの説明（11：メニュー内）	画像、ファイルの説明文を変更します。 ※未入力の場合はサムネイル上に「無題」と表示されます。 ※画像の説明を入力しておくと、画像使用時にalt属性としてHTMLに表示されます（alt属性：画像の代替テキスト）。
14	サイズの変更（11：メニュー内）	画像やファイルのサイズを変更できます。画像のアップロードサイズを任意に変更できます（アップロード元の画像ファイルは変更されません)。 ●縦横比固定アイコン（）縦横比を固定してサイズを変更することができます。 ●縦横比解除アイコン（）自由にサイズを変更することができます（比率が変わるので注意）。 ●画質 JPEG形式の画像の画質を現在の画質（100％）から低画質（80％）まで下げることができます。 ※変更前の画質100％に対して画質を下げるため、下げた画質を上げることはできません。 ※JPEG形式以外の画像には表示されません。
15	PicMonkey （11：メニュー内）	無料オンライン画像編集ソフト『PicMonkey』が立ち上がり、画像を編集することができます。 ※ファイル用のサーバーブラウザには表示されません。
16	Photopea （11：メニュー内）	無料オンライン画像編集ソフト『Photopea』が立ち上がり、画像を編集することができます。 ※ファイル用のサーバーブラウザには表示されません。
17	ファイルの回転ボタン	ボタンをクリックすると画像が時計回り90度で回転します。
18	ダウンロードボタン	ボタンをクリックすると画像やファイル、フォルダをダウンロードします。 ※フォルダはZIP形式でダウンロードされます。
19	削除ボタン	画像やファイル、フォルダを削除します。
E
20	使用状況モード	クリックすることで全ファイルの使用状況をアイコン（）で確認できます。
21	アップロード機能領域	画像やファイルのアップロード機能を表示した領域です。
22	ファイルを選択ボタン	ボタンをクリックするとアップロードしたい画像やファイルを選択できます。
23	アップロードボタン	ボタンをクリックすると選択した画像やファイルをアップロードします。 ※アップロードサイズの変更は、ボタンを押す前に行ってください。
24	画像アップロードサイズ変更（横：px　縦：px）	画像のアップロードサイズを変更できます。 ※ファイル用のサーバーブラウザには表示されません。
25	縦横比設定ボタン or	画像アップロードサイズの変更時、縦横比を固定することがきます。ボタンをクリックすることで縦横比の固定（）と解除（）を設定できます。 ※ファイル用のサーバーブラウザには表示されません。
26	画像サイズを戻すボタン	ボタンをクリックすることで画像サイズをオリジナルのサイズに戻すことができます。変更したサイズを戻したい時に使用してください。 ※ファイル用のサーバーブラウザには表示されません。
27	「大きい画像は自動縮小する」機能	画像アップロードサイズを自動で縮小する機能です。チェックを入れると、元画像の縦横どちらかのサイズが1280pxを超える場合に縦横比を固定したまま1280px以内に自動縮小されます。 ※ファイル用のサーバーブラウザには表示されません。