バージョン選択

フォーラム

メニュー

オンライン状況

67 人のユーザが現在オンラインです。 (54 人のユーザが フォーラム を参照しています。)
登録ユーザ: 2
ゲスト: 65
vofecesovi shun123 もっと...

サイト内検索

質問 > その他 > ロゴへのリンク追加

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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
居住地:
投稿: 1287
Re: ロゴへのリンク追加
特に記述に問題は無いように見受けられますが、
例えば、PC用ブラウザで幅を縮めてみた時に(レスポンシブという事なので、幅を縮めるとスマホ用の表示になるかと思います)
ロゴ画像のリンクは反応しますか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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
居住地:
投稿: 1287
Re: ロゴへのリンク追加
どのようにスタイルシートを記述されているのか分からないので何とも言えないのですが、
デフォルトのテンプレートでは、h1タグ内のaタグが外れる事は無いようです。

スマホ用にロゴの差し替え等を行っていますか?
差し替えを行っているのであれば、該当のHTMLタグの所在は、
スタイルを作った方にしか分からないかと思います。
デフォルトでは、PC用、スマホ用とは別れていないと思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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
居住地: 東京
投稿: 26
Re: ロゴへのリンク追加
実際のページを見たわけではないので全然違うかもしれませんが、このあたりが関係しているように思えますよ。

http://upa-pc.blogspot.com/2014/05/cssfloat.html

https://webkikaku.co.jp/blog/htmlcss/img-link-click/


----------------
◆◆
◆ Web制作全般(EC-CUBE、Wordpressなど)
◆ ご相談承ります。
アーキペラゴ株式会社 - 作成プラグイン一覧

naiagara34
投稿日時: 2018/9/11 13:41
対応状況: −−−
新米
登録日: 2018/9/6
居住地:
投稿: 4
Re: ロゴへのリンク追加
x002dc様


ご返信ありがとうございます。
参考URLにかなりニアリーでした!原因は、カートバナーの領域がレスポンシブの時もPCのwidthのままで、LOGOに被ってしまったためでした。

修正も問題なくできました。ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

統計情報

総メンバー数は35,094名です
総投稿数は88,193件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1835
4
yuh
1521
5
468
1287
6
red
1186
7
umebius
1007
8
fukap
907
9
shutta
827
10
tsuji
815
11 ramrun 789
12
tao_s
667
13 karin 656
14 sumida 641
15
homan
633
16
h_tanaka
588
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© LOCKON CO.,LTD. All Rights Reserved.