質問 > その他 > ロゴへのリンク追加 |
その他
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
naiagara34 |
投稿日時: 2018/9/6 16:11
対応状況: −−−
|
新米 登録日: 2018/9/6 居住地: 投稿: 4 |
ロゴへのリンク追加 フォーラム内で検索してみましたが、見当たらなかったので質問させてください。
ECキューブ3系にてスマホレスポンシブでサイトを組み上げましたが、スマホの時だけ、ヘッダーロゴへのリンク(TOPページに戻る)が機能しません。PCの時には、きちんとリンクは機能しております。 コンテンツ管理<ブロック管理<ロゴ(logo.twig)でのタグは、下記のような形となっております。 ----------------------------------------------------- <div class="header_logo_area"> <h1 class="header_logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/common/●●logo.png" /></a></h1> </div> ----------------------------------------------------- ※●●は、ロゴ名が入っております。 スマホ表示時のロゴへのリンク修正箇所を教えていただければ助かります。 以上、よろしくお願いします。 |
468 |
投稿日時: 2018/9/7 10:09
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: ロゴへのリンク追加 特に記述に問題は無いように見受けられますが、
例えば、PC用ブラウザで幅を縮めてみた時に(レスポンシブという事なので、幅を縮めるとスマホ用の表示になるかと思います) ロゴ画像のリンクは反応しますか?
|
naiagara34 |
投稿日時: 2018/9/7 10:23
対応状況: −−−
|
新米 登録日: 2018/9/6 居住地: 投稿: 4 |
Re: ロゴへのリンク追加 468様
ご返信ありがとうございます。 レスポンシブで、ブラウザを縮めるとロゴ画像のリンクは外れてしまいます。通常のサイズにブラウザを戻すとまたリンクは復活します。 参考になるか分かりませんが、スクリプトは、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/ec/html/template/default/js/vendor/jquery-1.11.3.min.js?v=3.0.16"><\/script>')</script> が入っています。 |
468 |
投稿日時: 2018/9/7 10:49
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: ロゴへのリンク追加 どのようにスタイルシートを記述されているのか分からないので何とも言えないのですが、
デフォルトのテンプレートでは、h1タグ内のaタグが外れる事は無いようです。 スマホ用にロゴの差し替え等を行っていますか? 差し替えを行っているのであれば、該当のHTMLタグの所在は、 スタイルを作った方にしか分からないかと思います。 デフォルトでは、PC用、スマホ用とは別れていないと思います。
|
naiagara34 |
投稿日時: 2018/9/7 11:44
対応状況: −−−
|
新米 登録日: 2018/9/6 居住地: 投稿: 4 |
Re: ロゴへのリンク追加 468様
ご返信ありがとうございます。 スマホ用にロゴの差し替えは行っていないようです。ブラウザを動かしてもロゴのサイズ等何も変化がおこりませんでしたし、imgフォルダー内にも1種類しかロゴはありませんでしたので。 スタイルシートで、【header_logo】検索をしてみたので、関係ありそうな記述を記載させていただきます。 ■style.cssでのheader_logoの記述 .header_logo_area { position: relative; z-index: 10; min-height: 54px; } .header_logo_area .header_logo { font-size: 20px; font-size: 2rem; margin: 0; } ------------------中略------------------ .header_logo_area { position: relative; } #contents { min-height: 100%; z-index: 2; } #side_left { float: left; width: 25%; padding-right: 16px; } #side_right { float: right; width: 25%; padding-left: 16px; } ------------------中略------------------ .header_logo_area .header_logo { font-size: 40px; font-size: 4rem; margin: 0; } ■default.cssでのheader_logoの記述 .header_logo_area { margin-right: 100px; } .header_logo_area .header_logo a:link, .header_logo_area .header_logo a:visited, .header_logo_area .header_logo a:hover, .header_logo_area .header_logo a:active { text-decoration: none; color: #000; } .header_logo_area .header_logo a:hover { color: #666; } ------------------中略------------------ #header .header_logo_area { float: left; margin-right: 265px; } ■add.cssでのheader_logoの記述 .header_logo_area { padding-top: 2vw; } |
x002dc |
投稿日時: 2018/9/7 11:51
対応状況: −−−
|
半人前 登録日: 2018/6/27 居住地: 東京 投稿: 30 |
Re: ロゴへのリンク追加 実際のページを見たわけではないので全然違うかもしれませんが、このあたりが関係しているように思えますよ。
http://upa-pc.blogspot.com/2014/05/cssfloat.html https://webkikaku.co.jp/blog/htmlcss/img-link-click/
|
naiagara34 |
投稿日時: 2018/9/11 13:41
対応状況: −−−
|
新米 登録日: 2018/9/6 居住地: 投稿: 4 |
Re: ロゴへのリンク追加 x002dc様
ご返信ありがとうございます。 参考URLにかなりニアリーでした!原因は、カートバナーの領域がレスポンシブの時もPCのwidthのままで、LOGOに被ってしまったためでした。 修正も問題なくできました。ありがとうございました。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |