画像やPDFなどのファイル管理(サーバーブラウザー) | マニュアル一覧 | CMSなら「ant2-ASP」でホームページ制作!

Manual

CMS操作マニュアル

CMSの操作方法を作業から探せるようにマニュアル一覧にしました。
「こんな時はどうするの?」と迷った場合は、こちらをご覧ください。

画像やPDFなどのファイル管理(サーバーブラウザー)

画像やPDFなど、各種ファイルは“サーバーブラウザー”で管理しており、サイトで使用する画像や各種ファイルは、このサーバーブラウザーにアップロードする必要があります。

アップできる拡張子とサイズの上限

画像
拡張子 3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、heic、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、jpg、gif、jpeg、png、tiff、tif、swf、fla、flv、zip、txt
上限 32MB
  • YouTubeモジュールを利用している場合、動画リストのサムネイルが「/images/YTimage/」に保存されます。このフォルダを削除しないようにご注意ください。削除した場合は、“YouTubeダイアログ”を表示すると、「/images/YTimage/」のサムネイルは最新の状態に更新されます。
    ⇒ YouTubeについてはこちら
ファイル
拡張子 csv、doc、csv、doc、docm、docx、ods、odt、otf、pdf、ps、rtf、ttf、xls、xlsm、xlsx、odp、pps、ppsm、ppsx、ppt、pptm、pptx、3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、heic、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、aac、m4a、mp3、oga、wav、as、as3、asm、cpp、cs、css、cxx、diff、erb、erl、groovy、gvy、h、haml、hh、hxx、js、json、jsx、less、lst、markdown、md、mdown、mkdn、ml、mm、out、plist、properties、sass、scm、script、scss、sml、sql、txt、vb、vi、vim、xhtml、xml、xsd、xsl、yaml、yml、htm、html、lzh、zip、tar、gz、7z、rar
上限 32MB
  • index.htmlという名称のファイルにつきましては、プログラムの仕様上、サイト公開時にファイルが削除されます。別の名称にリネームしていただくか、拡張子を.htmに変更してアップしてください。

サーバーブラウザーの操作

1
コントロールパネルの[作成][素材][画像]もしくは[ファイル]をクリックします。

2
“サーバーブラウザー”が別ウィンドウ、もしくは別タブで立ち上がります。

項目 機能
(a)
ファイルタイプ 画像のサーバーブラウザーが立ち上がると「Image」、ファイルのサーバーブラウザーが立ち上がると「File」と表示されます。
(b)
並び替え 選択した並び替え順に並び替えします。
【選択肢】名前順、日付順、サイズ順
素材 素材サイトへのリンクが立ち上がり、素材サイトを選択することができます。
【選択肢】pixabay、Unsplash、fotolia
※無料素材サイト「pixabay」「Unsplash」は直接ダウンロードすることができます。
→素材サイトからの直接ダウンロードする方法
[最適化チェック]ボタンです。表示されているフォルダ内の画像(JPEG形式、PNG形式、GIF形式)を最適化(ロスレス圧縮)します。
(c)
クリックすると上の階層を表示します。
(フォルダ表示) 現在のフォルダ内のフォルダリストを表示します。フォルダ名をクリックすると、そのフォルダ内の画像やファイル、フォルダを表示します。
[フォルダの新規作成]ボタンです。フォルダを作成することができます。先に各ページごとのフォルダを作成し、そのフォルダの中に画像やファイルをアップロードすると、管理がしやすくなります。
(詳しくは下記の「フォルダの新規作成」をご確認ください。)
(d)
(フォルダ階層) 現在のフォルダ階層を表示します。

フォルダおよびファイルのメニューを展開/縮小します。

フォルダのメニュー

ファイルのメニュー

該当する画像やファイル、およびフォルダの名称を変更します。ファイル名およびフォルダ名は必ず半角英数字にする必要があります。
  • フォルダ名・ファイル名を変更するとページ内に挿入されている画像やファイルのリンクは変更されないため、リンク切れになりますのでご注意ください。
該当する画像やファイルの説明を変更します。
※ファイルの説明はサーバーブラウザーのサムネイル表示の下部に表示されます。未入力の場合は「無題」と表示されます。
※画像のコンテンツパーツにはalt属性として表示されます。
該当する画像やファイルのサイズを変更できます。画像のアップロードサイズを任意に変更できます。(元の画像ファイルは変更されません。)
※ファイル用のサーバーブラウザーには表示されません。
・縦横比固定アイコン(
縦横比固定になっている場合は、横か縦どちらかの数値を変更すると、縦横比を維持してもう一方の数値が拡大、もしくは縮小されます。
・縦横比解除アイコン(
縦横比解除になっている場合は、横と縦の幅を自由に入力することができます。
・画質

JPEG形式の画像の画質を現在の画質(100%)から低画質(80%)まで下げることができます。
※変更前の画質100%に対して画質を下げるため、下げた画質を上げることはできません。
※JPEG形式以外の画像には表示されません。
無料オンラインサービスの編集ソフト『PicMonkey』が立ち上がり、該当する画像を編集することができます。
※ファイル用のサーバーブラウザーには表示されません。
無料オンラインサービスの編集ソフト『Photopea』が立ち上がり、該当する画像を編集することができます。
※ファイル用のサーバーブラウザーには表示されません。
※httpでの動作を保証していないため、https(SSL有効)でご利用ください。
[ダウンロード]ボタンです。該当する画像やファイル、およびフォルダをダウンロードします。
※フォルダの場合、ZIP形式でダウンロードされます。
[削除]ボタンです。該当するフォルダや画像、およびファイルを削除します。
[ファイルの回転]ボタンです。該当する画像を時計回りに90度回転します。
(e)
[使用状況モード]ボタンです。全ファイルの使用状況を確認します。クリックすると公開サイトおよび編集サイトのいずれかに使用されている画像およびファイルをチェックし、使用されている場合はファイル表示の右上にと表示します。
アップロード ファイルを選択し、アップロードします。
(詳しくは下記の「サーバーブラウザーへアップロードする」をご確認ください。)
横: px 縦: px 画像のアップロードサイズを任意に変更できます。(元の画像ファイルは変更されません。)
鍵アイコンが(縦横比固定)になっている場合、横か縦どちらかの数値を変更すると、縦横比を維持してもう一方の数値が拡大、もしくは縮小されます。鍵アイコンが(縦横比解除)になっている場合は、横と縦の幅を自由に入力することができます。
※ファイル用のサーバーブラウザーには表示されません。
[縦横比]ボタンです。アップロードする画像の縦横比の固定と解除を選択できます。クリックで画像の縦横比の固定、解除を設定できます。
※ファイル用のサーバーブラウザーには表示されません。
画像のサイズをオリジナルに戻します。横幅等の数値を変更した後で、元のサイズのままアップロードしたい場合はここをクリックすると、数値がオリジナルのものに戻ります。
※ファイル用のサーバーブラウザーには表示されません。
大きい画像は自動縮小する ここにチェックが入っていると、アップロードする元画像のサイズが縦横どちらかが1280pxを超える場合、縦横比を固定したまま1280px以内に自動縮小されます。チェックを外すと自動縮小されなくなります。
※ファイル用のサーバーブラウザーには表示されません。

サーバーブラウザーへアップロードする

使いたい画像やファイルはあらかじめパソコンに保存しておきます。この時、ファイル名は必ず半角英数字のものをご用意ください。

1
上記の1~2と同じ方法で“サーバーブラウザー”を立ち上げます。

2
画像、もしくはファイルをアップロードしたいフォルダを開きます。
(フォルダの新規作成方法に関しては、下記の「フォルダを新規作成する」をご確認ください。)

3
[参照]]ボタンまたは[ファイルを選択]ボタンをクリックします。

4
お使いのパソコンから使いたい画像、もしくはファイルを選択し、[開く]ボタンをクリックします。

5
横・縦のサイズ等を確認して、[アップロード]ボタンをクリックします。

6
選択した画像がサーバーブラウザーに表示されます。

 Hint

ドラッグ&ドロップでのアップロード

ローカルフォルダからサーバーブラウザーへ、またはウェブサイトからサーバーブラウザーへ目的の画像をドラッグ&ドロップするだけで簡単にアップロードすることができます。複数枚の画像を一度にアップすることも可能です。

  • 縦横のサイズが大きい画像は「大きい画像は縮小する」にチェックを入れると自動縮小され、チェックを外すと自動縮小されずにアップロードされます。

フォルダを新規作成する

ホームページを更新していくと、サーバーブラウザーには多くの画像やファイルがアップロードされ、管理や作業が大変になってきます。そのため、各ページのフォルダを作成して、その中に画像やファイルをアップロードするなど、前もって一定のルールを決めておくと、管理や作業ががしやすくなります。

  • フォルダの中にフォルダを作成することも可能です。

1
上記の1~2と同じ方法で“サーバーブラウザー”を立ち上げます。

2
[フォルダの新規作成]ボタンをクリックします。

3
フォルダ名を入力します。フォルダ名は必ず半角英数字で入力してください。

4
[OK]ボタンを押して作成完了です。

アップロードしたファイルを移動する

ファイルをドラッグすると、アップロードしたファイルを別のフォルダや階層に移動することができます。

  • 移動できるのはファイルのみになります。フォルダを移動することはできません。
  • サイト内で移動したファイルが挿入されていたり、リンクが貼られている場合はリンク切れが発生しますのでご注意ください。

1
ファイルを移動したいフォルダまでドラッグします。

2
マウスをはなすとメッセージが表示されますので、内容を確認して[OK]ボタンを押します。

アップロードしたファイルを並び替える

アップロードしたファイルを、そのフォルダの中で「名前順」「日付順」「サイズ順」のいずれかに並び替えることができます。なお、並び替えは「日付順」「サイズ順」は昇順、「日付順」は降順となり、フォルダは対象外となっています。

コンテンツでアップロードした画像やファイルを使用する