• 文字サイズ


解決済

スマホフローティングヘッダーCSS

  • 相談者:非公開
  • 2016/08/31 14:10
スマホ用フローティングヘッターを設置しています。現在メニューの背景がブラックでオレンジ(#FF6600)に変更したいのですが、CSSでどこを変更すればよいかわからないので教えていただけますでしょうか。


@charset "utf-8";

/*-------------------------------------------------------
RESET
-------------------------------------------------------*/

div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre,
form, fieldset, input, textarea,
p, blockquote,
th, td, legend {
margin: 0;
padding: 0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
border: 0 none;
margin: 0;
outline: 0 none;

}

/* IEすきまバグ対策 */

ul li img {
vertical-align:bottom;
}

/*-------------------------------------------------------
STYLE_COMMON
-------------------------------------------------------*/

* {
margin: 0;
padding: 0;
list-style: none;
}
html {
font-size: 62.5%; /* 10px */
background: #ffffff;
}
@media screen and (min-width: 320px) and (max-width: 413px){
html {
font-size: 62.5%; /* 10px */
/*background: yellow;*/
}
}
@media screen and (min-width: 414px) and (max-width: 599px){
html {
font-size: 81.5%; /* 12px */
/*background: blue;*/
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
html {
font-size: 106.5%; /* 17px */
/*background: green;*/
}
}
@media screen and (min-width: 961px) {
html {
font-size: 112.5%; /* 18px */
/*background: #ff6666;*/
}
}
body {
/*font-family: "MS Pゴシック", "MS P Gothic", sans-serif;*/
font-family:'Arial','helvetica nures','helvetica','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','MS ゴシック','MS Gothic', sans-serif;
line-height: 1.5;
font-size: 11px; font-size: 1.1rem;
letter-spacing: 0.0em;
color: #333333;
width: auto;
/* applied only IE6 */
_letter-spacing: 0.0em;
/* applied IE6 and IE7 */
>letter-spacing: 0.0em;
/* applied only IE8 */
letter-spacing /*\**/: 0.0em;\9
}

body p {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: auto;
width: 100%;
margin: 0 auto;
display: block;
}

a {
color: #1e8ff2;
text-decoration: none;
}
a:hover {
color: #1e8ff2;
cursor: pointer;
}
img {
border: none;
-ms-interpolation-mode: bicubic;
}
.alpha a:hover {
cursor: pointer;
opacity: 0.8;
filter:alpha(opacity=80);
background: #ffffff;
_zoom:1
}
* html .alpha a:hover {
filter:alpha(opacity=80);
background: #ffffff;
}
.alpha a:hover img {
cursor: pointer;
opacity: 0.8;
filter:alpha(opacity=80);
background: #ffffff;
_zoom:1
}
* html .alpha a:hover img {
filter:alpha(opacity=80);
background: #ffffff;
}
input:hover.alpha {
cursor: pointer;
opacity: 0.8;
filter:alpha(opacity=80);
background: #ffffff;
}
* html input:hover.alpha {
filter:alpha(opacity=80);
background: #ffffff;
}
.red {
color: #ff6666;
}
#content {
position:relative;

}
.pinkbold {
color: #ff6666;
font-weight: bold;
}

/*-----------------------------
iframe位置
-----------------------------*/

#smf-item-header{
position:fixed;
top:0;
left:0;
z-index:999;
margin:0;
padding:0;
display:block;
width:100%;
height:103px
}

/*-----------------------------
トップナビ
-----------------------------*/
#top-nav {
width: 100%;
text-align: center;
font-size: 10px;
}
#top-nav li a img {
width: 20px;
}
#top-nav li a {
float: left;
display: block;
width: 24.6%;
padding: 7px 0;
color: #ffffff;
border-right: 1px solid #ffffff;
background: #000000;
}
#top-nav li.info a {
border-right: 0px solid #ffffff;
}
#top-nav li.001 a,#top-nav li.002 a
,#top-nav li.003 a,#top-nav li.004 a,#top-nav li.005 a {
background-size: 30%;
}

/*-----------------------------
トップ検索窓
-----------------------------*/

#search-sp {
width: 98%;
padding: 5px;


border-top: 5px solid #cccccc;
border-bottom: 5px solid #cccccc;
background: #efefef;
}
#search-sp #txt-area {
float: left;
font-size: 10px;
width: 69%;
padding: 8px;
border: 2px solid #bf0000;
}
#search-sp #search-btn {
display: block;
color: #ffffff;
font-size: 10px;
width: 22%;
padding: 8px;
border: 0px solid #bf0000;
border-bottom: 1px solid #bf0000;
background: #bf0000;
}
input[type="button"],input[type="text"],input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}


/*-----------------------------
PCボタン等表示位置
-----------------------------*/
.topbtn{
margin-top:100px;
}
h1{
margin-top:50px;
}



/*-----------------------------
デフォルトナビ削除
-----------------------------*/
/*ナビ*/
.topFuncShop{
visibility:hidden;
}




/*検索窓*/
#rstTopSearch{
visibility:hidden;
}
/*ヘッダーロゴ*/
#ipnsh-header{
visibility:hidden;
}
.logo{
visibility:hidden;
}
.campBnr{
visibility:hidden;
}


/*店名(リンク)位置*/
.shopname-info .itemtitle{
margin:-62px 0 0;
display:block;
}
/*店名(リンク)フォントサイズ*/
.shopname-info .itemtitle h1{
font-size:15px !important;
display:block;
}

/*-----------------------------
デフォルトナビ(カテゴリ)削除
-----------------------------*/
.ctgTtl{
margin:-63px 0 0;
padding:2px 0 0 0;
}
.ctgTtl h1{
font-size:12px !important;
}
.ctgTtl nav{
font-size:11px !important;
}
.ctgBreadcrumbs{
margin:0 0 -12px;
}
/*-------------------------------------------------------
COMMON
-------------------------------------------------------*/
nav,section {
margin-bottom: 5%;
}

/*-------------------------------------------------------
CLEAR_FIX
-------------------------------------------------------*/

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}




/*-----------------------------
カテゴリ絞り込み画像用
-----------------------------*/

b b a img{
display:block;
}
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2016/08/31 19:45
ECマスターズの田中です。

===== この下の行から ================
#top-nav li a {
float………(省略)………
  • 返信者:非公開(質問者)
  • 2016/09/01 10:51
お返事ありがとうございます。記述変更しましたが背景ブラックのまま変わりませんでした。何故でしょうか・・・?………(省略)………
  • 返信者:非公開(質問者)
  • 2016/09/01 10:56
HTML記述は添付しますのでよろしくお願いします



………(省略)………
  • 返信者:非公開(質問者)
  • 2016/09/01 10:57
HTML………(省略)………
  • 返信者:非公開
  • 2016/09/01 13:35
ECマスターズの田中です。

確認したところ、yuzupapaさんの楽天GOLDに保存されている
「css_sp-menu.css」には
正しく記載され………(省略)………
  • 返信者:非公開(質問者)
  • 2016/09/01 15:27
解決しました!ありがとうございます^^………(省略)………
このフォーラムへの質問は終了しました