バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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用ブラウザで幅を縮めてみた時に(レスポンシブという事なので、幅を縮めるとスマホ用の表示になるかと思います)
ロゴ画像のリンクは反応しますか?


----------------
株式会社シロハチ
■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
居住地:
投稿: 3217
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
居住地: 東京
投稿: 30
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公式 Amazon Payプラグイン

統計情報

総メンバー数は88,290名です
総投稿数は109,689件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.