フォトショップsliceツールについて

Question

いつもお世話になっております。
現在楽天のトップをECステーションのページクリエイターにて作成しております。
フォトショップページを画像で作成し、スライスツールで編集し保存し、素材画像ブロックで画像を入れていますが、どうしてもフォトショップで作成した画像と同じように配置できません。
横幅960で、ページクリエイターも960サイズで作成しています。

Answer

ECマスターズの田中です。

実際に配置された様子を確認させていただく必要がございます。

表示が乱れるなどの理由で、
現在のトップページに反映していただくことが難しい場合は、
トップページの内容を別名で保存し、複製したページをご用意の上、
そのページに実際に設置していただいた上で
「投稿内容について報告する」より、
複製したページのURLをお知らせいただきますようお願いします。

Answer

ECマスターズの田中です。

URLをお知らせいただき、ありがとうございました。

一度お試しいただきたいのですが、
ページクリエイターを通さず、
フォトショップで作成したソースをそのまま
HTMLファイルに貼り付けて、ページを作成していただくと
どのような表示になりますでしょうか。

難しい場合は、元質問右下の「投稿内容について報告する」より、
フォトショップで作成したHTMLソースを
お知らせいただきますようお願いします。

どちらも難しい場合は、その旨ご返信ください。

Answer

作成いたしました。
https://www.rakuten.ne.jp/gold/アカウント/top-slice.html
フォトショップでHTMLの書き出しが行えるのを知らず、初めてやってみました。
こちらをいつもの手順でアイフレームで囲めば表示されるのでしょうか？
マウスオーバーなど付けたい場合はどのように作業になるのでしょう・・
それもフォトショップ上で可能なのでしょうか?

Answer

GOLDにアップしたら表示されなくなりました・・

Answer

ECマスターズの田中です。


> GOLDにアップしたら表示されなくなりました・・

パソコン内に作成された「top-slice.html」と同じフォルダに、
「images」というフォルダはないでしょうか。

その中に、ページに含まれる画像が入っているのですが、
楽天GOLDに「top-slice.html」と一緒にアップロードされていないため、
「top-slice.html」から画像が見つけられず、表示されなくなっております。

そのため、一緒にアップロードしていただきたいのですが、
「images」という名前は一般的に画像を設置するためによく使われるフォルダ名であり、
特に今回のようなフォトショップによるページを今後も作成される場合、
画像名が重複し、前のページの画像を上書きしてしまう可能性がございます。

まずは、GOLD内にフォルダを１つ作成していただき、
（名前は、他と重複しない半角英数字の組み合わせで作成してください。
　「store-ranking」など）
その中に「top-slice.html」と「images」フォルダをアップロードしていただきますよう
お願いします。
そうすることで、まずは「top-slice.html」を表示することができるはずです。


> こちらをいつもの手順でアイフレームで囲めば表示されるのでしょうか？

はい。正確には、表示させたいページにタグを書くことで
表示させることができます。


> マウスオーバーなど付けたい場合はどのように作業になるのでしょう・・
> それもフォトショップ上で可能なのでしょうか?　

バージョンによって操作方法も、可能かどうかも
変わってまいりますので、
ご利用中のPhotoshopのバージョンをお知らせいただきますようお願いします。
（わからない場合はその旨ご返信ください）

Answer

ご返答ありがとうございます。
フォトショップは【CS6 64Bit】です。

パソコン内に保存された「images」を【top-slice】の名前に変更しました。

GOLDにstore-rankingというフォルダを作成しました。
その中に
【top-slice】画像フォルダ
【top-slice.html】のふたつをアップロードしましたが、あっていますでしょうか？

Answer

フォトショップでの保存の仕方をそもそも間違えているかもしれません。

WEB用に保存→JPEGで保存→デスクトップに保存する際に、
ファイル名＝top-slice.html
フォーマット：HTMLと画像
設定：カスタム
スライス：すべてのスライス

このように
保存しておりました。

すると、デスクトップ上にHTMLと画像フォルダが表示されます。

Answer

ECマスターズの田中です。

> パソコン内に保存された「images」を【top-slice】の名前に変更しました。
こちら、名前を元の「images」に戻していただきますようお願いします。

top-slice.htmlでは、要するに
【同じフォルダにある「images」フォルダの中の画像を表示する】
という動作をしようとするのですが、
フォルダ名を変えたことで見失い、画像が表示されなくなってしまいます。

フォルダ名を「images」に戻すとページが表示されますので、
まずはフォルダ名を戻し、問題なく表示されることをご確認ください。

このままiframeタグで別のページに設置されますと、
リンク先がiframeタグの内側で開いてしまいますので、

フォトショップの、各スライスのスライスオプションにて
「ターゲット」を「_top」にご指定いただいた上で、
再度top-slice.htmlを作成し、
楽天GOLDに上書きアップロードしていただきますようお願いします。

マウスオーバー（フォトショップでは「ロールオーバー」と呼ばれます）で
どのような効果をつけたい、といったご希望はございますでしょうか。

フォトショップ上でロールオーバー前後の画像を作成して完結させたい場合は、
http://w3q.jp/t/3499
で紹介されている、下記の方法をお試しください。

= この下の行から ====================
01）ロールオーバーする部分専用のレイヤーを作成。
02）上記以外のレイヤーを「レイヤーを複数ステートで共有」させる。
03）ステートを複製して、画像をロールオーバー用に編集（色を変える等）。
04）スライスを書き出す際に「現在のステートのみ」のチェックを外す。
05）1枚のスライスから（中略）同サイズのファイルが2点書き出されます。
= この上の行まで ====================

Answer

「images」に直してアップロードしましたが、表示されません・・
保存の仕方が原因でしょうか？難しい・・

ロールオーバーは、マウスを置いた箇所を少し白く表示されるようにしたいです。

Answer

ECマスターズの田中です。

> 「images」に直してアップロードしましたが、表示されません・・

私にて確認したところ、問題なく表示されておりました。
今一度、下記URLにてご確認いただけますでしょうか。
https://www.rakuten.ne.jp/gold/アカウント/store-ranking/top-slice.html

「store-ranking」フォルダの中に入れてあるため、
URLにも「/store-ranking」が追加されております。

> ロールオーバーは、マウスを置いた箇所を少し白く表示されるようにしたいです。

承知しました。
まずは、先の返信にて申し上げた方法をお試しいただきたいのですが、
難しい場合は、「top-slice.html」の、の直前などに
下記styleタグを挿入していただくことでも実現できます。

= この下の行から ====================

a { transition: 0.5s; }
a:hover{ opacity: 0.5; }

= この上の行まで ====================

Answer

フォトショップにてロールオーバーは難しそうなので、
styleタグを挿入してみましたが、できておりますでしょうか？

Answer

ECマスターズの田中です。

https://www.rakuten.ne.jp/gold/アカウント/store-ranking/top-slice.html
を確認したところ、
私より申し上げたタグは入っておりましたが、
画像が表示されなくなっておりました。

どうやら、
PC内の「top-slice.html」をブラウザで開いて、保存したファイルに
タグを追加してGOLDにアップロードされているようなのですが、
そうすることで、ブラウザで開いて保存した際に、
HTMLタグが書き換えられてしまっております。

そのため、
フォトショップで保存した「top-slice.html」を
編集ソフトで開いてタグを追加し、上書き保存してアップロードする、
といった形で、ブラウザで開かないように修正していただきたいのですが、

普段、ビーバイさんは、HTMLファイルをどのように編集されておりますでしょうか。
GOLDにアップロードするまでの手順を、なるべく詳しくお知らせいただけますでしょうか。
（WクリックしてChromeで見る、◯◯の画面でタグを加える、など）

Answer

ECマスターズの田中です。

手順をお知らせいただき、ありがとうございます。
GOLDにアップロード、および書き換え時にデスクトップにドラッグされる際は
どちらのソフトをご利用されておりますでしょうか。
（FFFTP、Ribrary など）

また、書き換えの際もメモ帳を使われておりますでしょうか。
その場合、今回のtop-slice.htmlのように、
メモ帳以外で作成したファイルを編集しようとすると、
うまく改行されていなかったり、文字化けしてしまう可能性がございますので、

「Mery」フリーの高機能テキストエディター
https://forest.watch.impress.co.jp/library/software/mery/

などのテキストエディタ（つまり、高性能なメモ帳）を
ご利用いただきますようお願いします。

ちなみに、top-slice.htmlは、Photoshopで自動で作成されたHTMLのため、
txtファイルはアップロードされていないようなのですが、
今回、top-slice.htmlの書き換えはどのような手順で行われておりますでしょうか。
ブラウザ（IE、Chromeなど）で開いた、メモ帳で編集した、
FFFTP（Ribrary）でアップロードした、など、ソフト名と共にご教示いただければ幸いです。

Answer

ECマスターズの田中です。

top-slice.htmlの書き換え手順をお知らせいただき、ありがとうございました。

開発者ツールの「Edit as HTML」からstyleタグを書き込んでいただくまでは
問題なかったのですが、
「Ctrl+Sで保存」した時に、ブラウザによってタグが書き換えられてしまっております。

書き換えられた後のHTMLをもとに戻すのは非常に難しいので、
まずは、改めてPhotoshopにて、
WEB用に保存→JPEGで保存→デスクトップに保存
を行っていただきますようお願いします。

そして、ダウンロードしていただいたMeryを開き、
デスクトップにあるtop-slice.htmlを
Meryのウィンドウにドラッグ＆ドロップしていただければ、
top-slice.htmlの内容をMeryにて開くことができますので、
そこでstyleタグを書き込み、Ctrl+Sで保存していただき、アップロードしていただくことで
正しくページを反映させることができます。

以上、お試しいただき、不明な点がございましたらご返信ください。

Answer

ありがとうございます！
早速やってみて、RMSで表示させるとこまで行きましたが、
PSで幅1100で作成しているためかよ横が切れて表示されてしまったのと、
画像の表示も両サイドがガッタガタにずれてしまい、慌てて直しました。。
top-slice.htmlのみ見てみると、きちんと表示されています。

https://www.rakuten.ne.jp/gold/アカウント/pc-ranking/top-slice.html

Answer

ECマスターズの田中です。

> PSで幅1100で作成しているためか

そうですね、test.htmlの他の内容は900px強で作成されておりますので、
1100pxですとかなりはみ出るかと思います。
Photoshop上の、そのままのサイズでHTMLファイルに埋め込むことを想定した上で、
test.html内の他の要素のサイズに合わせて、
改めてtop-slice.htmlを作成していただきますようお願いします。

Answer

ガタガタにずれてしまう原因はわかりますでしょうか？

Answer

ECマスターズの田中です。

ガタガタにずれてしまうとのことですが、たとえば、



のようにiframeタグで挿入していただくと、
ページの一部が見切れるだけで、特にガタガタになることはないと思うのですが、
別の手順で挿入されようとしておりますでしょうか。
その場合は、詳しい手順をお伺いさせていただきますようお願いします。

なお、最終的にこのランキングを挿入する
http://www.rakuten.co.jp/アカウント/
のページ内容の部分は、
横幅960で作成されている、ということでしたら、
そのサイズに合わせて、改めてPhotoshopでの作成をお願いいたします。

Answer

がたがたではないのですが、添付画像のようになってしまいました。###HR######IMG046fa1cf2630b44fad003bc35ceb8407a.pngIMG0######BR###

Answer

https://www.rakuten.ne.jp/gold/アカウント/pc-ranking/top-slice960.html

こちらで表示させました。

Answer

ECマスターズの田中です。

> がたがたではないのですが、添付画像のようになってしまいました。
私にて、
https://www.rakuten.ne.jp/gold/アカウント/pc-ranking/top-slice960.html
を、MacのChrome、WindowsのChrome・IE・Edgeにて表示したところ、
いただいたスクリーンショットのように継ぎ目が出ることなく
問題なく表示することができました。

ビーバイさんの閲覧環境にて、古い画像を読み込んでいるのではないでしょうか。
top-slice960.htmlを開いた状態で、

・スーパーリロードを行う
https://liginc.co.jp/web/tool/browser/47339
・ブラウザの設定画面から、キャッシュを削除する
・普段ご利用されているブラウザ以外のブラウザ・PC（またはスマートフォン）で表示

といった方法をお試しいただき、
問題なく表示されるようになりましたら、
RMSへの設置をお試しいただきますようお願いします。

万が一、添付画像のような継ぎ目が解決しない場合は、その旨ご返信ください。

Answer

IEでは正常に表示、普段利用しているクロームではつなぎ目が入ったままでした‥
キャッシュのクリアは行いましたが、それでもだめでした。

Answer

ECマスターズの田中です。

IEでは無事ご確認いただけたということですね。
Chromeでのスーパーリロード、つまり
top-slice960.htmlを表示した状態で
Ctrlキーを押しながらF5キー、もしくはウィンドウの更新ボタンを
クリックしていただいても同じでしょうか。
あるいは、右上のメニュー→「新しいシークレット ウィンドウ」より、
シークレットモードでご覧いただくといかがでしょうか。

また、社内もしくはご自宅などに、
他のPCがございましたら、そちらのChromeでもご確認いただけますでしょうか。

Answer

教わった通りChromeでのスーパーリロード・シークレットモードで見る、教えていただいた手順でやってみましたが改善されず、
自宅にあるほかのPCで、クロームで見てみましたがだめでしたm(__)m

Answer

ECマスターズの田中です。

なるほど、他のPCで閲覧していただいてもダメだった、ということですね。

私にて、ズームの倍率を変更すると
スクリーンショットでいただいたような溝ができることを
確認いたしました。

ご利用いただいたChromeにて、右上のメニューボタンより
「ズーム」の右側が100%でない数字になっておりましたら、
100%にして、表示をご確認いただけますでしょうか。
100%にもかかわらず乱れる場合は、その旨お知らせください。

Answer

100%にするとすきまがなくなりました！！
100%にしていなくても乱れない方法はないのでしょうか？

Answer

ECマスターズの田中です。

無事ご確認いただけて何よりです。

> 100%にしていなくても乱れない方法はないのでしょうか？

画像を隙間なくつなぎ合わせて組み立てる構造が、ズームによる乱れの原因であり、
乱れなくするには、スタイルシートを駆使して構造から組み換え直す必要がございます。

作成も更新も難しくなることと、ズーム機能を利用する方はさほどいないと予想されることから、
現在の仕組みのままご利用いただくことをオススメします。

Answer

わかりました！長くなってしまい申し訳ございませんでした。
このまま、隙間ができても目立たないようなページに作り直してみようと思います。
ありがとうございました。