はじめの一歩！上書き保存で画像を差替え

いつもサイト職人をご利用いただきましてありがとうございます。

画像の差替え方法については、サポートへのお問い合わせも多く、過去のブログでもご紹介しています。その方法は、今ホームページに載せているものと同じサイズの画像を用意し、「画像アップロード」機能を使ってアップロードするだけです。さて今回は、過去記事でご紹介しきれなかった部分を「はじめの一歩！」としてお話ししたいと思います。

画像の差替え手順は？

画像の差替えについては、過去のブログでご紹介しています。それがこちら。

ブロックにある画像の差し替え方法を知りたい

https://www.site-shokunin.com/user/blog/howto/20201020.html

すでにお読みいただいているでしょうか。差替え手順はここに書かれた通りですが、今回はこの記事をベースに、もう少し簡単な方法をご紹介したいと思います。

ホームページに掲載された画像を差替える一番簡単な方法は、今掲載されている画像と同じサイズのものを用意して、上書きしてしまう方法です。

ファイルの上書きをするためには、新しい画像を今掲載されているものと同じ名前にしなければなりません。まずは、今掲載されている画像のファイル名とサイズを調べてみましょう。

これが分かったら、同じサイズで同じファイル名の新しい画像を作成します。

作成した画像は、サイト職人管理画面でページ編集画面から、「画像アップロード」アイコンをクリックしてアップロードしていきます。

今の画像の情報を確認しよう！

前出のブログ記事では、今の画像の情報をサイト職人の編集画面で確認する方法をご紹介していますので、ここではホームページ上で確認する方法をご紹介します。

ブラウザでホームページを開いたら、差し替えたい画像の上にカーソルを乗せて右クリック。「新しいタブで画像を開く」を選択。別タブで画像が表示され、そのタブにファイル名とサイズが表示されます。タブが狭くて全行が表示されていない時は、タブの上にカーソルを乗せるとポップアップで表示されます。（Google Cromeをお使いの場合の例。Safariをお使いの場合は「イメージを新規タブで開く」など、ブラウザにより異なります。）

「300×200」といった数字部分が横幅(width)×高さ(height)のサイズで、単位はピクセルです。

画像サイズを変更しよう！

元の画像サイズが分かったら、新しい画像をそのサイズにしていきましょう。

フォトショップなどの特別な画像編集ソフトがなくても大丈夫です。ブラウザ検索するとネット上には画像編集サイトや便利なアプリなどたくさんありますので、それらをお使いになっても良いですし、Windowsに標準搭載されている画像処理ソフト「ペイント」でもサイズの編集ができます。

「ペイント」でサイズ変更をする際は単位はピクセルで、「縦横比を維持する」にチェックを入れます。これで水平方向を数値で指定すれば垂直方向は自動計算で合わせてくれます。

その後、縦をちょっと削りたいなど微調整が必要なら、四角形選択で下部のステータスバーの数値を見ながら選択し、トリミングできます。

ただ、縦がちょっと長い短いくらいでしたら、そのまま差し替えてもデザインが大きく崩れることはあまりありませんので、多少の誤差程度なら気にされなくても良いでしょう。

新しい画像のサイズ編集ができたら、元の画像と同じファイル名にして保存しておきましょう。

ペイントを使った画像の編集についても、詳しいブログ記事がありますのでぜひご覧ください。

初心者でも簡単！ペイントを使った画像のサイズ変更／切り抜き方法

https://www.weblab.co.jp/staff/creator/6694.html

新しい画像をアップロードしよう！

新しい画像ができたら、元の画像に上書きします。

サイト職人管理画面でページ編集画面を開き、ブロックのビジュアルモードを表示して、「画像アップロード」アイコンをクリック。ダイアログが開きますので、1. ファイルの指定で新しい画像を選択（新しい画像のアイコンを「ファイル選択」ボタンにドラック＆ドロップしてもOK）、7. 反映方法の指定は「アップロードのみ」を選び、アップロードボタンをクリックしてください。

この時「上書きしても良いですか？」と聞かれますので「OK」を選択して進んでください。

もしも聞かれなかったら新しい画像のファイル名が元のものと違っていたということですので、ファイル名を確認してください。

上書きした直後、ビジュアルモードの画像はまだ変わっていないかもしれませんが、そんな時は一度HTMLモードに切り替えて、再度ビジュアルモードに戻してしてみてください。そうすると新しい画像になっていることが確認できます。

※上書き保存をした場合、旧画像のキャッシュがブラウザに残っているために反映されないことが考えられます。その場合は「スーパーリロード」、キーボードのCtrl + F5キーをお試しください。

Q.更新したのに反映されていない

https://www.site-shokunin.com/user/blog/defect/update.html

もしも新しい画像に元の画像と違うファイル名をつけた時は、上書きせずに別の画像としてアプロードされます。

元とは違うファイル名の画像で差し替えたい時は、ブロックのビジュアルモードを表示して、差し替えたい元の画像を選択した状態で「画像アップロード」アイコンをクリック。1. ファイルの指定で新しい画像を選択、7. 反映方法の指定は「ページに反映」を選んでアップロードしてください。

差し替え前の元画像はimgフォルダ内に残っていますが、「ファイル管理」アイコンから開くダイアログの作業で、削除することもできます。

いかがでしたでしょうか。

今回は、画像を上書き保存で差替える方法をお話しさせていただきました。過去にも画像の差替え方法の記事がありますが、日々サポートにお問い合わせをいただく中で、この部分のご説明が足りなかったかな、分かりにくいかな、と思った部分を補足させていただければと思います。しかしお客様によってホームページのデザインや仕様が異なりますので、ご不明な点がございましたらサポートまでお気軽にお問い合わせください。

サイト職人を使っている中で疑問に思っていること、取り扱って欲しい題材などありましたら、ぜひサポートまでお知らせください。ご意見、ご感想もお待ちしております。

｜よくあるご質問TOPにもどる｜