ソースコード編集で画像の差替え

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

サイト職人での画像の差し替えは、入力補助機能を使って簡単に行えるのですが、いざ差し換えてみると思ったように表示されなかったということがあります。そんな時は「ソースコード」を使って差し替えてみてください。HTMLの編集となると敷居が高く感じられるかもしれませんが、実はこちらも簡単なんです。

画像の差替えが上手くいかない…

サイト職人での画像の差替えは、ページ編集画面で対象の画像を選択した状態で「画像アップロード」で差し替えます。

※バージョン6の場合

1. 新画像を用意する。
2. ページ編集画面ブロック内にある差し替えたい画像をクリックして選択。
3. 画像が選択されたままの状態で、ブロック上部にある入力補助機能「画像アップロード」ボタンをクリック。
4. 画像アップロード画面が表示されるので「1. ファイルの指定」で新画像を選択、「7. 反映方法の指定」で「ページに反映」を選択し、「アップロード」ボタンをクリック。

詳細な手順は下記のブログでご確認ください。

実は、画像の差替えは簡単なんです！
https://www.site-shokunin.com/user/blog/howto/20201020.html

しかし、この手順で差し替えると、画像に付けられ表示位置やサイズの指定などが消えてしまう場合があります。それらの指定が消えてしまうと差し替えた画像が元とは異なって表示されてしまいます。

ソースコード編集で画像の差替え

このような場合には「ソースコード」を使って画像を差し替えます。

《新画像のアップロード》と《「ソースコード」でHTMLを編集する》という2つの作業を行います。

新画像のアップロード

1. 新画像を用意する。
2. 「画像アップロード」ボタンをクリック。
3. 画像アップロード画面で「1. ファイルの指定」で新画像を選択、「7. 反映方法の指定」で「アップロードのみ」を選択し、「アップロード」ボタンをクリック。

「ソースコード」でHTMLを編集する

1. ブロック上部にある入力補助機能「ソースコード」ボタンをクリック。
2. ソースコード編集画面が表示されるので、差し替えたい画像のファイル名を新画像に書き換える。
3. 画面右下の「ブロックに反映」ボタンを押して保存。

ソースコード編集画面が閉じるとブロックの中の画像も変わります。

変わっていない場合は、編集画面下部の赤い保存ボタンを押して編集内容を保存した後に、ブラウザを更新してください。それでも変わらない場合はキャッシュの影響ですので「Ctrl」+「F5」キー（Macの場合は Shift ＋ command ＋ Rキー）を同時に押して強制再読込（スーパーリロード）をお試しください。

ページの確認でステージングサイト（テストサイト）の画像が差し替わっていない場合も、ブラウザの更新と強制再読込をお試しください。

画像一括アップロードでも

差し替える画像が複数ある時、ソースコード編集で画像の差替えを行う場合には、《新画像のアップロード》に「画像一括アップロード」が利用できます。

複数の画像を一括でアップロードして、ソースコードの編集もまとめて行うことができます。

「画像一括アップロード」については、下記のブログでご確認ください。

使わないなんてもったいない！～画像一括アップロード～
https://www.site-shokunin.com/user/blog/howto/20210518.html

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

今回はソースコード編集で画像を差し替える方法についてお話させていただきました。HTMLの使い方はサポートの対象外ですが、記述のある場所のご案内は可能ですので、「ソースコードの中の画像ファイル名が見つからない」というような場合にはサポートまでご連絡ください。

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

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