[戻る]
No.3262

マウスオーバーした時の画像

キャラアイコン musterbrandさん 投稿日:2018/10/09(Tue) 20:55 home

フェイスブックなどのアイコンを作成しマウスオーバーした時に色が変わるようにしたいです。
グレー表示のアイコンがマウスオーバーでカラーになるような仕組みです。
これを画像テキストリンクで配置したいのですがどのようにすれば良いでしょうか?

key
No.3263

Re: マウスオーバーした時の画像

キャラアイコン おたすけマイショップさん 投稿日:2018/10/09(Tue) 21:20 home

店舗様にて作成した内容のリンク画像やテキストリンクを含め、イージーマイショップにて登録した内容のリンク画像/テキストリンクをマウスオーバーにて色を変えるようにするにはCSSでの記述が必要となります。

※ご不便をおかけしますが、専用の設定はございません。

また、CSSでの記述を行う場合、表示場所や指定する内容によりclassの指定などが異なります。

以上から、基本的には追加する内容に対しclassを充てて頂き、その後にclassに対しスタイルを追加する流れとなります。

尚、画像での表示の場合は、共通ファイル(デザイン設定>共通画像/ファイルタブ)にて登録して頂き、登録画像をご指定下さい。

CSSの知識が必要となる案内となり大変恐れ入りますが、ご参照頂きスタイルの追加をお試し下さい。

key
No.3265

Re: マウスオーバーした時の画像

キャラアイコン musterbrandさん 投稿日:2018/10/11(Thu) 19:44 home

マウスオーバー時の画像の色を変更する記述を教えてください。

classは

<div class="pane_foot_mid_2_contents">
<table class="clImageTable">
<td align="center">
<img class=""style="border: 0px solid currentColor; border-image: none;" alt="" src="https://www03.easy-myshop.jp/emsrsc/musterbrand/res/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%A0G.png" />

この画像に登録した
{resource_url}/インスタグラム.png
上記をマウスオーバーで画像が入れ替わるようにしたいです。
スタイルの追加はスクリーンのギアアイコンに記述でよいでしょうか?
記述例を教えてください。

key
No.3267

Re: マウスオーバーした時の画像

キャラアイコン おたすけマイショップさん 投稿日:2018/10/11(Thu) 22:00 home

CSSを含むHTMLなどのコードの記述方法についてはサポート範囲外となりますのでお手数ですが、ご利用者様にて記述方法をご確認下さいますようお願い致します。

また、classとして記載されていますが、<img>タグへのclassが空欄でございますので、この画像に対してピンポイントでスタイルを充てることは困難ですので、任意のclassを充てて頂きますようお願い致します。

サンプルとして以下にHTML及びCSSのコード例を記載致します。

・HTMLコード例
<div class="insta">
<a href="リンク先"></a>
</div>

・CSSコード例
 スタイルはご認識の通りスクリーンの設定内にある<head>追加へ記載して下さい。
<style>
.insta {
background: url("通常時の画像URL") no-repeat;
}
.insta a {
width: 画像の幅;
height: 画像の高さ;
background: url("通常時の画像URL") no-repeat;
display: block;
}
.insta a:hover {
background-image: url("マウスホバー時の画像URL");
}
</style>

上記コードは基本的なコードのサンプルとなりますので動作に関する保証は致しかねます。
また、上記の通り、HTML・CSSコードの記述方法についてはサポート範囲外となりますので、
ご不便をおかけしますが、以後サンプルコードの記載も含めサポートは致しかねます。
予めご了承下さい。

key
No.3268

Re: マウスオーバーした時の画像

キャラアイコン musterbrandさん 投稿日:2018/10/12(Fri) 13:36 home

ごれんらくありがとうございます。

最後に質問ですが、classの指定<div class="insta">は上級者モードに変えなければできませんか?
レイアウトタブから上級者設定に切り替えソーシャルエリアかどこかに記載知ればいいのでしょうか?
それとも、テンプレートタブからHTMLページで共通フッターに書き込めばいいのでしょうか?

またCSSコード例の「通常時の画像URL」は「共通画像/ファイル」のリソースパスでよいですか?
違う場合は登録した画像のURL確認方法をおしえてください。

いろいろと細かい設定の確認申し訳ないですが、作成するなら良いものを作りたいのでご確認よろしくお願いします。

key
No.3270

Re: マウスオーバーした時の画像

キャラアイコン おたすけマイショップさん 投稿日:2018/10/12(Fri) 18:59 home

通常、標準モードにて使用されている場合、上級モードに切り替えるとデータの参照元が異なり初期設定の様な状態となってしまいますので、モードの切り替えは行われない事をお勧め致します。
※標準モードで使用されている場合は上級モードへの切り替えは行われないことをお勧め致します。

以上を踏まえ回答致します。

> 最後に質問ですが、classの指定<div class="insta">は上級者モードに変えな
> ければできませんか?
> レイアウトタブから上級者設定に切り替えソーシャルエリアかどこかに記載知
> ればいいのでしょうか?
> それとも、テンプレートタブからHTMLページで共通フッターに書き込めば
> いいのでしょうか?
上級モードに切り替える必要はございません。
ページレイアウト管理(デザイン設定>レイアウトタブ)にてHTMLコードを記述する場合は「フリーパーツ」を作成頂き、[HTMLモードに切り替える]を押してHTMLコードを記載して下さい。
作成されたパーツをレイアウト図へ配置すればページに反映されます。

※上記の通り標準モードのままで登録を行って下さい。


> またCSSコード例の「通常時の画像URL」は「共通画像/ファイル」のリソー
> スパスでよいですか?
> 違う場合は登録した画像のURL確認方法をおしえてください。
リソースパス({resource_url}/ファイル名)で反映されます。


回答は以上です。

key

返信
*おなまえ アイコン [sample]
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)
*画像認証 投稿キー

無料で本格的なネットショップ開業できるのは『イージーマイショップ』

- YY-BOARD -