Yahooスマホページについて

Question

お世話になります。
Yahoo!ショップのスマホページにつきまして、下記参考サイトのように、

ショップ内で、リンクの付いているパーツにマウスカーソルを当てると ふわっと光るような効果をつけたいのですが、どのようにすればよろしいでしょうか。

ご教示頂けますようお願いいたします。

参考サイト
https://store.shopping.yahoo.co.jp/air-r/

Answer

ECマスターズの田中美帆です。

> ショップ内で、リンクの付いているパーツにマウスカーソルを当てると ふわっと光るような効果をつけたいのですが、どのようにすればよろしいでしょうか。

確認させていただきたいのですが、
画像にカーソルを当てたときに
白半透明の効果がかかる部分のことで
よろしいでしょうか。

https://ec-masters.gyazo.com/a0aa69f70feb4e38e5f675fee692bea4

Answer

お世話になります。

はい、そうです。
よろしくお願いいたします。

Answer

ECマスターズの田中美帆です。

ご返信ありがとうございます。

トップページに適用している
CSSファイルに以下を追加することで、
画像リンクにカーソルを合わせた際に
白半透明の効果をつけることが可能です。

a:hover img {
    opacity: 0.5;
}

数値を調整することで効果の強弱が
つけられますので、お好みで
調整してみてください。

Answer

ご連絡いただきましてありがとうございます。
今回外注さんにスマホページのコーディングをお願いしたのですが、
白半透明の効果をつけるやり方がわからないとのことで御社へ質問させていただきました。
教えていただきましたやり方をお伝えしたところ、以下の返答がございました。

トリプルにcssを入れる設定ができませんでした。
必要なタグがスマホでは使えませんでした。
そのため、cssはすべてインラインでhtmlのタグ内に書きました。
そのため、a;hoverなどの疑似クラスが使えておりません。

とのことでした。
どのようにすれば実現可能かご教示いただけますでしょうか。
よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> トリプルにcssを入れる設定ができませんでした。
> 必要なタグがスマホでは使えませんでした。
> そのため、cssはすべてインラインでhtmlのタグ内に書きました。
> そのため、a;hoverなどの疑似クラスが使えておりません。
> 
> とのことでした。

ご確認ありがとうございます。

トリプルは、自由にHTMLやCSSが記述できるため、

> 必要なタグがスマホでは使えませんでした。

といったことはないはずです。

ストアクリエイターPro ＞ 8 -B-Space・トリプル ＞ トリプル管理ツール
上のファイルを編集頂いているか、
ご確認いただけますでしょうか。

なお、
ストアクリエイターPro ＞ ストア構築より
編集頂いている場合は、
おっしゃるとおり、
> 必要なタグがスマホでは使えませんでした。
となりますが、

JENIさんのスマホトップは、
トリプルをご利用頂いていますので、
ストア構築の編集内容は、反映されませんので、
こちらを編集する必要はございません。

Answer

早速のご連絡ありがとうございます。

実は以前までトリプルで制作したサイトを表示していたのですが、
ベンチマークしている企業がこぞってトリプル（geocities）ではなく、（store.shopping）での表示に
切り替えておりますので、弊社もスマートフォンはリダイレクトを停止して（store.shopping）で運営しております。
ちなみにPCページはトリプルです。

参考サイトは（store.shopping）で、白半透明の効果をつけているので、何かやり方があるのかな？と質問をさせていただきました。

よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> ベンチマークしている企業がこぞってトリプル（geocities）ではなく、（store.shopping）での表示に
> 切り替えておりますので、弊社もスマートフォンはリダイレクトを停止して（store.shopping）で運営しております。
> ちなみにPCページはトリプルです。
>
> 参考サイトは（store.shopping）で、白半透明の効果をつけているので、何かやり方があるのかな？と質問をさせていただきました。

詳細のご連絡ありがとうございます。
ご対応されたい内容が理解できました。

参考に頂いておりました店舗さんですが、


〜〜略〜〜
a:hover img {
opacity: 0.5;
}
〜〜略〜〜


がHTMLに記載されておりましたが、
こちらは、linkタグ同様、
ストアクリエイターには登録いただけない
タグとなっております。

対象の店舗さんは、どのようにされているかと
申しますと、元々Paypayモールで
利用されていた店舗さんとなっており、
標準でHTMLに上記タグが含まれております。

下記の店舗さんも、元々Paypayモールだった
店舗さんとなり、同様の効果が適用されています。
https://store.shopping.yahoo.co.jp/osharewalker/

Paypayモールを利用されていた店舗さんと、
利用されていない店舗さんでは、
HTMLの構造がことなるため、このように、
表示に差が出ております。

そのため、お力になれず、申し訳ありませんが
ご希望の効果を適用することはできません。

Answer

お世話になります。
お調べいただきありがとうございました。
そういうことですね！
適用できない旨承知いたしました。
ありがとうございました。