フェイスブックなどのアイコンを作成しマウスオーバーした時に色が変わるようにしたいです。
グレー表示のアイコンがマウスオーバーでカラーになるような仕組みです。
これを画像テキストリンクで配置したいのですがどのようにすれば良いでしょうか？
店舗様にて作成した内容のリンク画像やテキストリンクを含め、イージーマイショップにて登録した内容のリンク画像/テキストリンクをマウスオーバーにて色を変えるようにするにはCSSでの記述が必要となります。
※ご不便をおかけしますが、専用の設定はございません。
また、CSSでの記述を行う場合、表示場所や指定する内容によりclassの指定などが異なります。
以上から、基本的には追加する内容に対しclassを充てて頂き、その後にclassに対しスタイルを追加する流れとなります。
尚、画像での表示の場合は、共通ファイル（デザイン設定＞共通画像/ファイルタブ）にて登録して頂き、登録画像をご指定下さい。
CSSの知識が必要となる案内となり大変恐れ入りますが、ご参照頂きスタイルの追加をお試し下さい。
マウスオーバー時の画像の色を変更する記述を教えてください。
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
上記をマウスオーバーで画像が入れ替わるようにしたいです。
スタイルの追加はスクリーンのギアアイコンに記述でよいでしょうか？
記述例を教えてください。
![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"](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"){kind=link}
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コードの記述方法についてはサポート範囲外となりますので、
ご不便をおかけしますが、以後サンプルコードの記載も含めサポートは致しかねます。
予めご了承下さい。
ごれんらくありがとうございます。
最後に質問ですが、classの指定<div class="insta">は上級者モードに変えなければできませんか？
レイアウトタブから上級者設定に切り替えソーシャルエリアかどこかに記載知ればいいのでしょうか？
それとも、テンプレートタブからＨＴＭＬページで共通フッターに書き込めばいいのでしょうか？
またＣＳＳコード例の「通常時の画像URL」は「共通画像/ファイル」のリソースパスでよいですか？
違う場合は登録した画像のＵＲＬ確認方法をおしえてください。
いろいろと細かい設定の確認申し訳ないですが、作成するなら良いものを作りたいのでご確認よろしくお願いします。
通常、標準モードにて使用されている場合、上級モードに切り替えるとデータの参照元が異なり初期設定の様な状態となってしまいますので、モードの切り替えは行われない事をお勧め致します。
※標準モードで使用されている場合は上級モードへの切り替えは行われないことをお勧め致します。
以上を踏まえ回答致します。
> 最後に質問ですが、classの指定<div class="insta">は上級者モードに変えな
> ければできませんか？
> レイアウトタブから上級者設定に切り替えソーシャルエリアかどこかに記載知
> ればいいのでしょうか？
> それとも、テンプレートタブからＨＴＭＬページで共通フッターに書き込めば
> いいのでしょうか？
上級モードに切り替える必要はございません。
ページレイアウト管理（デザイン設定＞レイアウトタブ）にてHTMLコードを記述する場合は「フリーパーツ」を作成頂き、[HTMLモードに切り替える]を押してHTMLコードを記載して下さい。
作成されたパーツをレイアウト図へ配置すればページに反映されます。
※上記の通り標準モードのままで登録を行って下さい。
> またＣＳＳコード例の「通常時の画像URL」は「共通画像/ファイル」のリソー
> スパスでよいですか？
> 違う場合は登録した画像のＵＲＬ確認方法をおしえてください。
リソースパス（{resource_url}/ファイル名）で反映されます。
回答は以上です。