リンクをクリップボードにコピー
コピー完了
ローカルプレビューの時には表示されていた画像が、公開したサイトには表示されません。リモートサーバーへの接続はできていて、同期した後、指定したURLでサイトを開いてみるとcssは適応されているのに挿入した画像が一切反映されていません。
どうすれば改善できるでしょうか?
when I did local preview, images had been displayed, but if I look at pulished site, those are not displayed.Already connected remote server and after synchronized, when I tryed open site, CSS has been adapted but inserted images not displayed at all.
How can I improve it?
リンクをクリップボードにコピー
コピー完了
allm1346 さん、こんにちは。
HTMLコードでは、URLの文字列に 全角(漢字・かな等)を使う場合、URLエンコードした形式に変換する必要があります。
次の図は、このページのパンくずリストにある「Dreamweaverフォーラム」の部分のHTMLソースコードです。
a要素 href属性を見るとURLの一部の全角文字「Dreamweaverフォーラム」が「%」がついた文字に書き換わっています。これが、全角文字をURLエンコードした状態です。
修正する方法としては、ページデータの「フォルダ名/ファイル名(画像・html)」に使われている全角文字を「URLの全角をエンコードする」もしくは「URLに全角を使わず、半角の英数字に変更する」のいずれかです。
都度、全角文字を手動でURLエンコードするのは面倒ですし、指定ミスの原因にもなりますので、全角を使わずに半角だけを用いた「フォルダ名/ファイル名(画像・html)」に名前変更した方が作業しやすいのでは?と思います。(私が作業するなら、こちらの方法を選びます。)
【参考URL】
▼URLエンコード(パーセントエンコーディング)とは - IT用語辞典 e-Words
https://e-words.jp/w/URL%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89.html
↑このURLにも「エンコード」という全角が使われていますが、URLエンコードされています。
以上、ご参考になれば幸いです。
(^_^)
追記:
すみません💦↑を書いた後で、Dreamweaverにある関連の設定を思い出したので追記です。
編集>環境設定メニューの「コードの書き換え」で、「%を使用してURLの特殊文字をエンコード」にチェックを入れた状態でDreamweaverを使うと「新しく作業したURLから、全角部分を自動的にURLエンコード」してくれます。
※残念ながら、すでに作ってしまったページを、自動的にURLエンコード変換することはできません。
リンクをクリップボードにコピー
コピー完了
フォルダとファイルのリネームを行いました。更新したところ、パスの間に赤い点のようなものが出てきて、同期やputをしようとしてもftpエラーが出てしまいます。
同じような問題を扱っている記事を見つけたのですが、一方の記事は投稿の時期が2008年ごろ且つwindowsエクスプローラーを使っているということで今の状況とあまり噛み合いそうになく、もう一方の記事は状況は似ているけれど、「破損ファイルを削除してみる」と言うアドバイス以外はあまり明確な回答が記載されていませんでした。
どうすればリネーム後のフォルダやファイルを正常にアップロードできますか?
ちなみにサイトオプションで「サイト全体のリンクチェック」を実行しましたがリネームしたフォルダやファイルは破損していません。
リンクをクリップボードにコピー
コピー完了
allm1346 さん、添付頂いたスクリーンショットからでは、大まかな推察しかできないのですが、気がついたことをコメントします。
●スクリーンショット 2021-10-13 20.17.33.png
コードビューの「パスの間に赤い点のようなもの」ですが、コードビューでは表示できない文字コードのように見えます。
Dreamweaverでサイト設定が完了しており、ローカルサイトフォルダーの登録がされていれば、[ファイルパネル]上でフォルダ・ファイルの名前変更に合わせて、コード側のフォルダ・ファイルの名前も書き換わるはずなので、今回の名前変更作業の過程で、半角ではない何かしらのコードがフォルダ・ファイル名にまぎれこんでしまったでは?推察します。
●スクリーンショット 2021-10-13 20.23.24.png
わたしはこのエラーは初めて目するため、過去に経験はないのですが、
「images:book-cover:2030-np-bc.jpeg」のように、FTPでPUT(アップロード)を試みたデータのパスに「:」がついているのが気になります。
アップロードができる場合は、「images/book-cover/2030-np-bc.jpeg」と、/(スラッシュ)区切りになると思うのですが……
このことから、フォルダ名(book-coverなど)やファイル名(2030-np-bc.jpegなど)に、処理できないコードが混じっているのではと推察します。
以上です。
スクリーンショットからわかることは、このぐらいでした。
なにかのヒントになれば幸いです。
リンクをクリップボードにコピー
コピー完了
アドバイスありがとうございます。フォルダ名やファイル名を半角にして同期し直しましたがやはりうまくいかなかったので、imageフォルダごと一度削除し、再度作成して、リネームしたファイルを読み込んで同期したところ、無事表示されるようになりました。フォルダの削除はできれば避けたかったですがうまく反映されたので良しとしておきます。
別のアドバイスで、「ローカルルートフォルダの名前に「'(アポストロフィ)」が入っていることが問題だ」と指摘を受けました。ここのフォルダ名に関しても全て半角英数字にしておかないとファイル転送の際にエラーが出る恐れがあるとのことだったので、これも原因だったのかもしれません。
いずれにせよ画像は無事表示することができましたので、アドバイスに感謝します。ありがとうございました。また不明点が質問するので、機会があればまたお願いします。
リンクをクリップボードにコピー
コピー完了
allm1346 さん、結果のご連絡ありがとうございます。
こちらは、Adobe のユーザーコミュニティのため、後からこのページをご覧になる方のために、結果までわかるのは、ありがたいです。
さて。「'(アポストロフィ)」の件ですが、たまたまチェックできるサーバー環境が作れたので、ローカルルートフォルダ(Windows10 Pro 環境、デスクトップに abc'deフォルダを作成)を作って、アップロードの実験をしてみたところ、こちらでは問題なくアップできました。また、HTMLに記述した画像もブラウザで表示ができました。
私が使っているサーバーでは、URLエンコードすれば日本語のファイル名もサーバーへアップできますし、「'(アポストロフィ)」が含まれるフォルダのアップロードもできました。
ウェブ用データでは、ファイル名に利用する文字は「半角英数字、「-」(ハイフン)、「_」(アンダースコア)」にとどめるのが基本で、安全な策だと思います。
その他の文字が使えるかどうか?に関しては、ご利用のウェブサーバーの仕様によるのかもしれません(今回問題なくいけたのは、わたしが利用しているサーバー環境によったもので、別のサーバーではうまくいかないかもしれない、という意味合いです)。
補足ですが、ご連絡まで。
リンクをクリップボードにコピー
コピー完了
すみません、横から失礼します。
ご提供頂いたスクリーンショットで気になったのですが、デスクトップに作成された「alm's_st」で始まる名前のフォルダを、Dreamweaverのローカルルートフォルダに設定されているかと思います。おそらくこのアポストロフィーが原因になっているのではないかと思います。
Dreamweaverはサーバーと同じファイルパス構造を把握してファイル転送を行うのですが、途中に記号や日本語が含まれているとパスを誤認する場合があります。ローカルルートフォルダにつきましても、必ず半角英数字のみをご利用ください。
リンクをクリップボードにコピー
コピー完了
アドバイスありがとうございます。そうだったのですね。
画像の表示は昨日、エラーのあったimageフォルダごと一度削除して、再度作成、ファイルのリネームをした後に同期したら無事表示されましたが、パスの間に出現した赤い点(恐らくエラー信号の類だと思うのですが)がなんだったのかはまだはっきりと分からず、またフォルダごと削除して作り直すというのは、今後同じエラーが出てくる可能性を考えるとあまり取りたくない対策だったので、「ローカルルートフォルダの名前の付け方に気をつけろ」と言うのはとても参考になります。マークアップ言語に限らず全てのプログラミング言語にも言えることだと思ったので、今後はファイルやフォルダの名前の付け方に注意します。ありがとうございます。
また不明点があれば質問するので、機会がありましたらまたお願いします。