画像を半透明にする方法

Question

商品ページで、他の商品へのリンク出来る画像を載せたく、（画像を小さく表示）その部分にマウスを持っていくと画像を半透明させる方法を教えてください。
またスマートフォンでも可能でしょうか。

Answer

ECマスターズの橋本です。＞その部分にマウスを持っていくと画像を半透明させる方法を教えてください。具体的なイメージがわからない為、実現したいイメージのサイトURLを記載いただけますと助かります。

Answer

http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/こちらの商品カテゴリや関連商品や「ネコポス対応商品です」の画像にマウスを持っていくと半透明になります。http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/上の方の画像ですもしくはhttp://item.rakuten.co.jp/SHOP-URL/ITEM-URL/この店舗さんの「売れ筋アイテム」でマウスを持っていくと枠線が出てリンクがわかるような形などPC用販売説明文に、どちらかの方法で、クリックしてみようかなと思ってもらえる画像表示にしたいのですが。

Answer

ECマスターズの橋本です。以下のタグを、お好きな場所（ヘッダー、共通説明文など）に貼り付けていただくと、リンク付き画像や文字を含め、全てのリンクが、マウスをあてると白くなるようになります。なお、上記タグを入れると全てが対象になる為簡単な方法ですが、お送りいただいたショップの事例は、指定した画像のみが白くなるような設定をしております。この場合ですと、画像単位で多少のカスタマイズが必要となり、少々複雑となります。keiさんのご希望に応じて回答させていただきたく思いますが、まずは上記にてご確認いただければと思います。

Answer

お忙しい中、ありがとうございます。現状の状態でしたら、リンク付き画像はさほどありませんので、一度その方法で貼り付けてみます。その上で、指定した部分のみ白くできればとなりました際は、再度お尋ねさせていただくようにいたします。貼り付けはヘッダー部分もしくは共通説明文のどちらの方がいいのでしょうか。また共通説明文の場合、大の方か小の方、どちらになりますか。また、スマートフォンでも可能でしょうか。スマートフォンでリンクページを設置し、タップしてもらえるような効果的な画像の表示の仕方は、どのようなものでしょうか。

Answer

度々すみません。http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/のショップさんの「売れ筋アイテム」の表示の仕方のタグを教えてください。枠があり、上の枠に背景色、その中に文字を入力、画像をタグで小さく表示したいです。

Answer

ECマスターズの橋本です。＞貼り付けはヘッダー部分もしくは共通説明文のどちらの方がいいのでしょうか。どちらでも大丈夫です。＞また共通説明文の場合、大の方か小の方、どちらになりますか。共通説明文に入れる場合は、小にはテキストとリンクのみしか入れられませんので、HTMLを入れられる大のみとなります。＞また、スマートフォンでも可能でしょうか。スマートフォンでは、オンマウスという概念が無く、画像を触った時点でリンクに飛びますので、PCと同様の事は難しいと思います。＞スマートフォンでリンクページを設置し、＞タップしてもらえるような効果的な画像の表示の仕方は、＞どのようなものでしょうか。説明文に画像を設置される場合ですが、画像だけだとクリックされにくいですので、できるだけ以下のようにテキストリンクも設置してみるのもおすすめです。┌─────┐│　画像 │└─────┘テキストリンク￣￣￣￣￣￣￣一般的に画像とテキストですと画像が３割、テキストが７割クリックされると言われてますので、クリック率の上昇が期待できるかと思います。これはPCなど全てでも共通ですので、参考にしてみてください。テキストリンクに下線を入れるのがポイントです。

Answer

ECマスターズの田中です。＞http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ ＞のショップさんの「売れ筋アイテム」の表示の仕方のタグを教えてください。実際のタグは、下記URLのソースをご参照ください。http//www.rakuten.ne.jp/gold/SHOP-URL/medama.html商品画像が小さく表示されている件ですが、タグに「width="125" height="125"」と表示サイズを指定した上で、スタイルシート（ #item .main01 .itemimg a img { から } までの部分）で幅3pxの白い枠線を引き、小さく表示させているように見せておいて、マウスを載せた時のスタイルシートスタイルシート（ #item .main01 .itemimg a:hover img { から } までの部分）で白い枠線の色を灰色に変更させるように設定しております。背景色のついた枠の中に文字を入力する方法ですが、このHTMLでは、

タグ、もしくはdisplay:block;を指定したタグに横幅、高さ、背景色、文字色、文字揃えの方向（中央揃え）を指定して表示を調整しております。ページ一番上の枠の表示設定は #newitem { から } までの部分を、各商品画像下の枠の表示設定は #item .main01 .itemimg a span.pa { から } までの部分をご参照ください。

Answer

リンク画像の下に下線付き文字表示ですが、PC版でためしてみたところ、画像の右横下にしか表示できません、
画像の下に表示するにはどうすればいいでしょうか。
下………（省略）………

Answer

ECマスターズの橋本です。＞PC版でためしてみたところ、画像の右横下にしか表示できません、改行タグを入れても横に出てしまいますでしょうか。一度改行タグを入れて改行していただければと思います。＞下線は、文字で合ってますか？PCの場合はそうなります。ただし、スマートフォンではuタグが使えない為、以前以下の過去の投稿にてご案内した方法にて力技で適用する事になりますね。先ほどの回答では重要な部分を触れず大変失礼いたしました。https://forum.ec-masters.net/post_view.php?id=1857上記をお読みいただければわかると思いますが、テキストに対して改行をし、上に出る￣のようなものを入れる事で、テキストに対して下線付きのリンク表示が可能になります。

Answer

田中さまこのやり方をしたいと思うとGOLDを使わないといけないのでしょうか？昨晩、ソースを見てみましたが、さっぱりでした。先ほど、PC用説明文の中で、ソースをコピーして自社にあてはめてみようと貼り付けてみましたが、 許可されないHTMLタグ"script"が入力されています 許可されていないURLの記載があります。 HTMLタグの記述に誤りがあります。詳しくはオンラインマニュアルをご参照ください。と表示がでます。GOLDの使い方がさっぱりわかりません。

Answer

橋本さますみません改行タグを入れたら出来ました、が、画像の下左端の方に表示されます、画像のセンターに表示するにはどうすればいいでしょうか。今、テストで作成してますので画像の大きさは360にしています、本番は240ぐらいのおおきさにして、掲載商品の登録が終わりましたら３画像横に並べたいと思います。以前に何時間もかかってしまいましたらが、検索して、横長の枠を作ったのでそれを参考にして枠を作ってみます。枠の件でまた止まってしまいましたらご指導をお願いいたします。

Answer

ECマスターズの田中です。＞このやり方をしたいと思うとGOLDを使わないといけないのでしょうか？GOLDでなくても、ヘッダーや共通説明文（大）をご利用いただくことは可能ですが、GOLDをご利用いただくことで、上記項目に存在する文字数の上限や、使用できないタグといった制限を気にすることなくページを作成することができます。＞GOLDの使い方がさっぱりわかりません。楽天GOLDは、一般的なFTPサーバの仕組みとなっており、お使いのPCのハードディスクと似た感覚で、ファイルやフォルダを設置し、公開できる仕組みとなっております。楽天GOLDの操作は、FFFTPのような、FTPクライアントと呼ばれるアプリケーションを利用する方法が一般的ですが、「Ribrary」という、楽天GOLDやR-Cabinetを操作できるアプリケーションがRMSにて公開されておりますので、下記URLよりご利用ください。https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=service/ribrary/&s=¶m2=0一部HTMLタグの背景色を変えたり、マウスカーソルを載せる/載せないで色を変えるには、スタイルシートを利用する必要があります。今回ご希望いただいたHTMLタグを単純化した形を記載いたしますので、表示サイズの変更など、アレンジしてご活用ください。===== この下の行から ================

キッチンワゴン

===== この上の行まで ================ の間にある{ と } の間に、各種属性を加えることで見た目を変更していくことができます。どのような属性があるかは、下記URLの一覧をご参照ください。http://www.htmq.com/style/まずは、サーチ非表示に設定したダミーの商品ページのPC用販売説明文など、お客様に見えない場所で動作をご確認いただき、属性を追加してみてください。＞画像のセンターに表示するにはどうすればいいでしょうか。画像からテキストまでのタグを、

と

で囲んでいただけますでしょうか。画像と同じ幅の枠に画像とテキストを入れて、中央揃えにするイメージです。

Answer

お世話になります。コチラはヤフーでも可能なのでしょうか？

Answer

ECマスターズの田中です。＞コチラはヤフーでも可能なのでしょうか？マウスを乗せると半透明になる方法でしょうか、それとも、画像に枠をつけて表示させる方法でしょうか。いずれも、トリプルにご契約されていれば可能です。Yahoo!ショッピングでは、ストアクリエイターPro上で

Answer

有難うございます。半透明の方法であっておりました。トリプルの契約を行ないましたが方法がわかりません。大変お手数ですがご教示願います。

Answer

ECマスターズの田中です。それでは、外部スタイルシートファイルをご用意の上トリプルにアップロードしていただき、タグで読み込む、という流れになります。最初に、メモ帳を開き、下記内容を記入して、ファイル名の末尾を「.css」にして保存してください。===== この下の行から ================a:hover img {filter: alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}===== この上の行まで ================保存できましたら、Yahoo!トリプルにアップロードしてください。アップロードに必要な情報は、下記URLのマニュアルをご参照ください。http://storedoc.ec.yahoo.co.jp/s/shopping/toolmanual/triple/c/803.htmlアップロードの手順で不明な点がありましたら、ご使用中のFTPアプリケーションの名前をお知らせください。トリプルへのアップロードができましたら、下記タグを、ストアクリエイターPro ＞ストア構築＞ストアデザイン＞ヘッダー・看板にある、「フリースペース」の中に記入していただくことで、スタイルシートが適用され、マウスを乗せると半透明になるようになります。===== この下の行から ===================== この上の行まで ================「トリプルにアップロードしたスタイルシートファイルのURL」は、実際のURLにご変更をお願いします。例えば、「shopurl」というURLのショップが、トリプルの一番上に「opacity.css」というファイルを保存した場合、このファイルのURLは、http://shopping.geocities.jp/shopurl/opacity.cssとなります。

Answer

いつも有難うございます！問題なく出来ました！これで回遊率アップを少しでもできればと思います！

画像を半透明にする方法

カテゴリーから探す