[戻る]
No.2889

スマートフォンでのヘッダーメニューの表示について

ワタナベさん  投稿日:2018/01/05(Fri) 09:16
key

お世話になっております。
スマートフォンでヘッダーメニューを開くと文字が表示されません。空白で表示されて触れている間だけ文字が見える、という風なのですが、初めから文字を表示させるには、どうしたらよいか教えていただきたいです。
テンプレートはc14-Ceruleanになっています。
よろしくお願いいたします。

Re: スマートフォンでのヘッダーメニューの表示について

おたすけマイショップさん  2018/01/05(Fri) 20:46 No.2893
key

スマートフォン表示のヘッダーメニューの文字色が白になている為に表示されないように見えているようです。

以下の手順でスタイルを追加して頂くことで文字が表示されます。

<style>
@media screen and (max-width: 700px) {
.top_menu_pulldown > li > a, .top_menu_pulldown > li:last-child > a {
color: #000000;
}
</style>

スタイルは以下の方法で追加して下さい。

1. 店長ナビトップ > デザイン設定 > [レイアウト]タブ でページレイアウト管理を表示
2. スクリーンの設定ボタン(ギアアイコン)をクリック
3. [<head>追加]内に内容を追記して「保存」をクリック

以上をご参照いただき設定をご確認下さい。


Re: スマートフォンでのヘッダーメニューの表示について

ワタナベさん  2018/01/06(Sat) 20:44 No.2898
key

ご回答ありがとうございます。
教えて頂いた手順で試してみたのですが、
文字は見えないままでした。以前と同じように文字のあたりに触れている時だけ、水色で文字が見えます。
ほかの方法があればお教えいただきたいです。
お手数おかけします。


Re: スマートフォンでのヘッダーメニューの表示について

おたすけマイショップさん  2018/01/09(Tue) 15:08 No.2902
key

大変申し訳ございません。
ご案内のスタイルに閉じカッコ「}」が抜けていました。

以下のスタイルに置き換えて再度ご確認をお願い致します。

<style>
@media screen and (max-width: 700px) {
.top_menu_pulldown > li > a, .top_menu_pulldown > li:last-child > a {
color: #000000;
}
}
</style>

またスタイルを置き換えても反映が確認できない場合は、キャッシュが影響している可能性がございます。

 キャッシュ
 ⇒2回目以降の表示を早くするために端末内に一時的に保存されている情報。

この場合、以下の方法でページを最新の情報にすることで確認ができます。

・ページを更新する
⇒ブラウザの更新またはF5キーを押して更新して下さい。

・キャッシュをクリアしてページを更新する
⇒「Ctrl+F5」キーを押して、ページ更新を行って下さい。

・ブラウザを再起動する

・スマートフォンなど別の端末で確認する

・別のブラウザを立ち上げて確認
⇒別の種類のブラウザ(Chromeを利用されている場合はInternetExplorer等を利用)でご確認下さい。

以上を参照いただき、再度反映をご確認頂きますようお願い致します。


Re: スマートフォンでのヘッダーメニューの表示について

ワタナベさん  2018/01/09(Tue) 17:56 No.2903
key

確認してみたのですが、できませんでした。
お手数おかけして申し訳ありません。
よろしくお願いいたします。


Re: スマートフォンでのヘッダーメニューの表示について

おたすけマイショップさん  2018/01/09(Tue) 20:39 No.2906
key

ご利用アカウントの<head>タグを確認したところ、既にご登録頂いておりますGoogleSearchConsoleと思われるタグの閉じカッコ等(">)が削除されておりました。
これが影響して追加いただいた<style>タグが正常に機能していないことが確認できました。

以下の手順でタグの閉じカッコ等を追加して下さい。

1. 店長ナビトップ > デザイン設定 > [レイアウト]タブ でページレイアウト管理を表示
2. スクリーンの設定ボタン(ギアアイコン)をクリック
3. [<head>追加]内にある「<meta name="google・・・ 」の行の最後に「 "> 」を追加して保存して下さい。

以上でスタイルが正常に反映されますのでページを更新頂き、再度ご確認下さい。

※GoogleSearchConsoleと思われるタグのコードは「 "> 」だけではなく他の文字列も削除されてしまっている可能性もございます。
 GoogleSearchConsoleにログインして頂き登録サイトを選択後、歯車アイコン をクリックし、[ユーザーとプロパティ所有者] をクリックします。
 [プロパティ所有者の管理]、[別の方法で確認する] の順にクリックします。
 「HTMLタグ」をクリックして表示されるタグ(<meta name="google・・・ )をご確認下さい。
 異なるコードであった場合は、再度貼り付けなおして[確認]ボタンを押して下さい。


Re: スマートフォンでのヘッダーメニューの表示について

ワタナベさん  2018/01/10(Wed) 08:34 No.2907
key

無事文字の色が変更できました。
本当にお手数おかけしました。
ありがとうございます。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

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