楽天ショップでページの横に固定で表示されるタブバナーの作り方

公開日:  最終更新日:2018/06/14

なんだか最近楽天のショップで良く目にするこれ。(このページの右下にもあります)名前は良く分かりませんが、タブみたいな形でページの端っこに固定されていて、スクロールしても隠れる事無くずっとそこにあります。

楽天ショップタブバナー

今回はコレの作り方を解説してみます。もちろんコピペでいけちゃいます。

若干邪魔な気もしますが、これならどんな時にも表示されていますので「目に入る」事は間違いないはずですので、ここぞと言う時にイチオシの商品などのバナーとして使えば、店舗全体のアクセスをかなりの割合でそのページに導けるかも知れません。

しかし、何事もやり過ぎは厳禁です。イチオシバナーが10個もあると結局どれがイチオシなのかお客様は分かりません。

「これも売りたい」「あれも売りたい」「こっちだって売りたい」などと、売り手のエゴだけが先行すると、バナーがどんどんでっかくなっていったり、アニメーションgifのバナーがめちゃくちゃチカチカしだしたり、動くバナーだらけでクリックすら難しくなったりします。

まるで最初の敵は同じ学校の番長だったのが、となり町の番長、暴走族のリーダーとどんどん敵が強くなり、もっと強い敵を!とエスカレートしていくうちにやがて、宇宙の諸悪の根源みたいな、謎の生命体とバトルをし始め、収集がつかなくなり打ち切りになる、昔の少年漫画の様にインフレが止まらなくなります。

人間の欲望はとどまることを知らないのだ

話がかなり脱線しましたが、このバナーの名前を勝手に「タブバナー」とします。みなさんも使って下さい。普段の会話の中で「タブバナー」って言葉を普通に使って「なにそれ?」って言ってきた人に「えっ?知らないの?」って本気の驚きを見せる位、自然に使って見て下さい。

命名「タブバナー」

コピペでOK「タブバナー」の作り方

参考ショップ:自然の都 タマチャンショップ
http://www.rakuten.ne.jp/gold/kyunan/

参考ショップ「自然の都 タマチャンショップ」イメージ

今回はこんな感じを目指してみます。

流れ

  1. 画像を用意する
  2. HTMLを書いてページに追加
  3. CSSを書いて楽天GOLDにアップ

まずは見本。こんな感じ。 見本

画像を用意する

マウスのカーソルが置かれた時に「びよ~ん」って伸びる様にしたいので、予め伸びる事を想定して作っておきます。サイズは自由ですが、見本では幅200px、高さ100pxで最初は左側の40px分だけ見える状態になります。

作ったら保存して楽天GOLDなりR-cabinetなりにアップします。保存形式もWEBで使える形式なら何でも良いですが、見本は角丸に透明部分があるためPNG形式で保存しています。この場合R-cabinetは使えませんので楽天GOLDにアップします。(R-cabinetはjpgとgifのみ対応しています。)

見本用にこんな感じで作りました。
タブバナー見本

HTMLを書いてページに追加

HTMLを使用するページに追加します。全ページに付けたいなら、R-storefront>デザイン設定>ヘッダー・フッター・レフトナビのテンプレートでフッターコンテンツあたりに記載します。

<div id="tab"><a href="リンク先URL"></a>
    <!-- /#tab -->
</div>

たったこれだけ!カンタン!

CSSを書いて楽天GOLDにアップ

CSSで位置やら画像URLやら動きやら大きさやらを指定します。

  #tab {
  width: 40px;/* 最初に表示されるバナーの幅 */
  height: 100px;/* バナーの高さ */
  background: url(tab.png) no-repeat;/* 画像のURL */
  position: fixed;/* バナーを固定します */
  right: 0;/* 右から0pxの位置に指定 */
  bottom: 100px;/* 下から100pxの位置に指定 */
  }
  #tab a {/* リンクするエリアをバナー全体に広げる設定 */
  display: block;
  width: 100%;
  height: 100%;
  }
  #tab:hover {/* カーソルが乗った時の動きを指定 */
  width: 200px;/* バナーが伸びた時の幅 */
  /* 以下アニメーションの設定 */
  -webkit-transition: width ease-in-out 0.5s;
  -moz-transition: width ease-in-out 0.5s;
  -ms-transition: width ease-in-out 0.5s;
  -o-transition: width ease-in-out 0.5s;
  transition: width ease-in-out 0.5s;
  }
  

それぞれ何を意味しているのかはコメントに書いてありますので、カスタマイズ時は参考にして下さい。

お問い合わせがあったので追記

    #tab {
    width: 40px;/* 最初に表示されるバナーの幅 */
    height: 100px;/* バナーの高さ */
    background: url(tab.png) no-repeat;/* 画像のURL */
    position: fixed;/* バナーを固定します */
    right: 0;/* 右から0pxの位置に指定 */
    bottom: 100px;/* 下から100pxの位置に指定 */
    }
    

ここの「right: 0;/* 右から0pxの位置に指定 */」を「left:0;」に変えると左側になります。 0を10pxとかにするとブラウザの端から10pxの隙間が出来ます。
同様に「bottom: 100px;/* 下から100pxの位置に指定 */」を「top:100px;」にすると上から100pxの位置に変わります。
お店の用途にあわせて、適当に変更してね。

-webkit-transition: width ease-in-out 0.5s; -moz-transition: width ease-in-out 0.5s; -ms-transition: width ease-in-out 0.5s; -o-transition: width ease-in-out 0.5s; transition: width ease-in-out 0.5s;

この5行は1行ごとにブラウザの種類ごとに動きを指定しています。

width ease-in-out 0.5s の部分はwidth(幅)をease-in-out(って方式のスピード調整)で2s(2秒)かけて変化させるって意味です。(多分…)

見本では悪ふざけで2秒に設定していますが、0.5sぐらいがバナーとしては良いのでは無いでしょうか。

当サイトではあくまでもHTML/CSSが若干苦手なネットショップ担当者を想定して記事を書いていますので、詳しい説明は省いていますが、アイデアしだいではカスタマイズして色々使えると思います。

それではまた。

複数のタブバナーを設置するバージョン

お問い合わせがあったので追加します。複数のタブバナーを設置する場合は下記の様にしてみて下さい。共通の指定をまとめているのでIDとClassの両方が付与されています。見本では3つになっていますが、応用して修正すれば、2つでも4つでも設置可能です。

ページに追加するHTML

リンク先をそれぞれ設定してからコピペして下さい。

<div id="tab01" class="tab_ban"><a href=""></a>
    <!-- /#tab1.tab_ban -->
</div>
<div id="tab02" class="tab_ban"><a href=""></a>
    <!-- /#tab2.tab_ban -->
</div>
<div id="tab03" class="tab_ban"><a href=""></a>
    <!-- /#tab3.tab_ban -->
</div>

CSSのファイルに追記して下さい

タブバナーの画像URLを設定してから、GOLDにアップするCSSファイルに追記して下さい。#tab01~#tab03の「bottom:00px;」の部分で縦位置を調整出来ます。

また、IE9で動かない可能性があったので、IE9用の設定を追加しています。※IE8以前のバージョンではチェックしてません・・・。

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.tab_ban {
	width: 40px;/* 最初に表示されるバナーの幅 */
	height: 100px;/* バナーの高さ */
	position: fixed !important;/* バナーを固定します */
	position: absolute;
	right: 0;/* 右から0pxの位置に指定 */
}
.tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */
	display: block;
	width: 100%;
	height: 100%;
}
.tab_ban:hover {/* カーソルが乗った時の動きを指定 */
	width: 200px;/* バナーが伸びた時の幅 */

	/* 以下アニメーションの設定 */
	-webkit-transition: width ease-in-out 0.5s;
	-moz-transition: width ease-in-out 0.5s;
	-ms-transition: width ease-in-out 0.5s;
	-o-transition: width ease-in-out 0.5s;
	transition: width ease-in-out 0.5s;
}
.tab_ban a:hover {
	/* IE9用 */
	width: 200px\9;
}
#tab01 {
	background: url(test01.gif) 0 0 no-repeat;
	bottom: 50px;
}
#tab02 {
	background: url(test02.gif) 0 0 no-repeat;
	bottom: 170px;
}
#tab03 {
	background: url(test03.gif) 0 0 no-repeat;
	bottom: 290px;
}

複数タブバナーの見本

タブバナー「左側から出て来るバージョン」

お問い合わせがあったので再追記
左側に置くタブバナー見本
HTML前とほぼおんなじ
IDとClassだけ変えてます。

<div id="tab_left" class="tab_ban2">
  <a href="https://hakase-labo.com/"></a>
<!-- /#tab_left --></div>

CSS
9行目の「left: 0;」でタブバナーを左側にします。 30行目の「background: url(tab_left.png) right top no-repeat;」で背景画像の位置を右側と上に合わせます。

.tab_ban2 {
	position: fixed!important;
	position: absolute;
}
.tab_ban2 {
	width: 40px;/* 最初に表示されるバナーの幅 */
	height: 100px;/* バナーの高さ */
	position: fixed;/* バナーを固定します */
	left: 0;/* 右から0pxの位置に指定 */
}
.tab_ban2 a {/* リンクするエリアをバナー全体に広げる設定 */
	display: block;
	width: 100%;
	height: 100%;
}
.tab_ban2:hover {/* カーソルが乗った時の動きを指定 */
	width: 200px;/* バナーが伸びた時の幅 */
	/* 以下アニメーションの設定 */
	-webkit-transition: width ease-in-out 0.5s;
	-moz-transition: width ease-in-out 0.5s;
	-ms-transition: width ease-in-out 0.5s;
	-o-transition: width ease-in-out 0.5s;
	transition: width ease-in-out 0.5s;
}
.tab_ban2 a:hover {
	/* IE9用 */
	width: 200px\9;
}
#tab_left {
	background: url(tab_left.png) right top no-repeat;
	bottom: 100px;
}

これで出来るはず!

マウスが離れた時にもアニメーションさせたい!

minami様よりお問合せがあり、調べてみました。 見本のCSSの19行目から24行目のアニメーションの設定部分を 「#tab」の部分に移動させます。
#tab {
  width: 40px;/* 最初に表示されるバナーの幅 */
  height: 100px;/* バナーの高さ */
  background: url(tab.png) no-repeat;/* 画像のURL */
  position: fixed;/* バナーを固定します */
  right: 0;/* 右から0pxの位置に指定 */
  bottom: 100px;/* 下から100pxの位置に指定 */
}
#tab a {
  /* リンクするエリアをバナー全体に広げる設定 */
  display: block;
  width: 100%;
  height: 100%;
}
#tab:hover {
  /* カーソルが乗った時の動きを指定 */
  width: 200px;/* バナーが伸びた時の幅 */

  /* 以下アニメーションの設定 */
  -webkit-transition: width ease-in-out 0.5s;
  -moz-transition: width ease-in-out 0.5s;
  -ms-transition: width ease-in-out 0.5s;
  -o-transition: width ease-in-out 0.5s;
  transition: width ease-in-out 0.5s;
}
コレ↑こう↓する
#tab {
  width: 40px;/* 最初に表示されるバナーの幅 */
  height: 100px;/* バナーの高さ */
  background: url(tab.png) no-repeat;/* 画像のURL */
  position: fixed;/* バナーを固定します */
  right: 0;/* 右から0pxの位置に指定 */
  bottom: 100px;/* 下から100pxの位置に指定 */

  /* 以下アニメーションの設定 */
  -webkit-transition: width ease-in-out 0.5s;
  -moz-transition: width ease-in-out 0.5s;
  -ms-transition: width ease-in-out 0.5s;
  -o-transition: width ease-in-out 0.5s;
  transition: width ease-in-out 0.5s;
}
#tab a {
  /* リンクするエリアをバナー全体に広げる設定 */
  display: block;
  width: 100%;
  height: 100%;
}
#tab:hover {
  /* カーソルが乗った時の動きを指定 */
  width: 200px;/* バナーが伸びた時の幅 */
}
これでマウスを離した時にもびよ~んってなります。

コメント

  1. 梅谷 より:

    タブバナーのブログ読ませて頂きました。
    大変分かりやすくためになりました。

    1点質問なのですが、タブバナーの位置を左にしたとき、
    飛び出すアニメーションになりません。
    (画像の右から表示されずに左から表示されます。)

    左側に設置する場合はどのように設定すればいいのでしょうか?
    お忙しい中お手数をお掛けしますが、お返事頂ければ幸いです。
    どうぞよろしくお願いいたします。

    CSSで
    right: 0;/* 右から0pxの位置に指定 */

    • ハカセ より:

      梅谷様
      コメントありがとうございます。
      記事中に追記しましたので、ご確認下さい。
      よろしくお願い致します。

  2. maki より:

    いつも楽しくコピらせていただいております。
    このタブバナーもうまく設置することが、できました。
    ありがとうございましたm−−m
    一言御礼が言いたいのと、あと→に出てくる
    「■コメント欄から〜」という文章の設置方法も、おもしろ、わかりやすく
    教えていただけると幸いです。
    気長に待っておりますので、よろしくお願いします。

  3. kaka より:

    スクロールしても位置が固定されて表示されるバナーで、
    (このページ左下の「ページ先頭に戻る」というバナーのような)
    閲覧している人が非表示、表示を選べるようにしたいのですが、どこにどういうタグを設置したらよいでしょうか。※非表示、表示ボタンは常に表示です。
    サイト例:http://www.rakuten.ne.jp/gold/1096dog/

    • ハカセ より:

      kaka様
      サイトを見てみるとJavaScriptでCSSを制御しているようです。

      <a href="javascript:void(0);" onclick="javascript:disp();">
      <img src="hoge.jpg">
      </a>
      

      こんなボタンを作って、

      <script type="text/javascript">
          var i=0;
          function disp(){
           if(i%2==0)
            document.getElementById("btn").style.display="none";
           else
            document.getElementById("btn").style.display="block";
           i++;
          }
          </script>
      

      こんなJavaScriptで要素の表示非表示(displayプロパティ)を制御しているみたいです。
      ※WEBページのソースコードに著作権は無い認識ですが、自己責任でお願いします。

  4. minami より:

    はじめまして、こんばんは。

    この記事のタイトル通り、楽天の横から出てくるメニューが作りたくて
    ここにたどり着き、この記事の通りにしたら無事にできたのですが、
    出来ればもうひとつ追加で教えてほしいことがあります。

    マウスを合わせた時にゆっくり出るのはいいのですが、離した時にゆっくり
    戻らずにいきなり元の位置に戻ってしまいます。
    楽天のものはゆっくり戻っているので、出来ればそれも再現したいのですが。。

    自分でいろいろ調べてみましたが、力不足で出来ませんでした。
    可能であれば、ぜひご教示ください。

    宜しくお願い致します。

    • ハカセ より:

      minamiさん
      コメントありがとうございます。
      「戻るときにもアニメーション」ですが、
      マウスが乗った時と同じアニメーションであれば実はカンタンです。
      見本のCSSは下記のように「:hover」と言う擬似要素に対して「transition」の設定をしています。

      .tab {}
      .tab:hover {transition: width ease-in-out 0.5s;}
      

      この時はマウスをが離れると一瞬で元の位置に戻ってしまいます。
      しかし、下記の様に元の要素に「transition」の設定をしてあげると
      マウスが離れ戻るときにもアニメーションが適用されるようになります。

      .tab {transition: width ease-in-out 0.5s;}
      .tab:hover {}
      

      と、偉そうに書いていますが、私も知りませんでした(笑)
      勉強になりました。ありがとうございます。
      今後ともよろしくお願い致します。

      • minami より:

        ご回答ありがとうございます。

        無事にできました!
        こちらこそ、とても勉強になりました。今後ともこのサイトを
        参考にさせて頂きます。

        ありがとうございました!

  5. minmin より:

    はじめまして、こんにちわ。
    いつも参考にさせていただいてます!
    複数タブバナーを設定してみたのですが、ページをスクロールすると
    表示が消えてしまいます。
    どうすれば常に表示できるようになりますか?
    可能であれば、ぜひご教示ください。

    宜しくお願い致します。

    • ハカセ より:

      minmin様
      コメントありがとうございます。
      スクロールすると消えてしまうとの事ですが、
      それが「ページのスクロールに合わせて、タブバナーもスクロールしてしまう」
      という状態でしたら、タブナーの入っている要素(見本で言えば#tabのdiv要素)に
      「position: fixed;」が記載されているかをご確認下さい。

      それ以外の現象でしたら、ちょっと原因は分からないです・・・。

      ソースコードとその現象が発生するブラウザの種類が分かれば、
      もう少し詳しく分かるかも知れません。
      よろしくお願い致します。

  6. minmin より:

    ハカセ様

    ご回答ありがとうございます!
    いろいろ試してみたのですが、、やはりスクロールするとみえなくなって
    しまうようです。。

    IE9を使用しております。
    どうぞよろしくお願いいたします。

    スタイルシート
    ーーーーー

    html, body {
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
    }

    div.tab_ban {
    position: fixed;
    position: absolute;
    }
    .tab_ban {
    width: 98px;/* 最初に表示されるバナーの幅 */
    height: 163px;/* バナーの高さ */
    position: fixed;/* バナーを固定します */
    position: absolute;
    right: 0;/* 右から0pxの位置に指定 */
    }
    .tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */
    display: block;
    width: 100%;
    height: 100%;
    }
    .tab_ban:hover {/* カーソルが乗った時の動きを指定 */
    width: 347px;/* バナーが伸びた時の幅 */

    /* 以下アニメーションの設定 */
    -webkit-transition: width ease-in-out 0.5s;
    -moz-transition: width ease-in-out 0.5s;
    -ms-transition: width ease-in-out 0.5s;
    -o-transition: width ease-in-out 0.5s;
    transition: width ease-in-out 0.5s;
    }
    .tab_ban a:hover {
    /* IE9用 */
    width: 347px\9;

    }
    #tab01 {
    background: url(201406.jpg) 0 0 no-repeat;
    top: 150px;

    }
    #tab02 {
    background: url(2014061.jpg) 0 0 no-repeat;
    top: 321px;

    }
    #tab03 {
    background: url(2014062.jpg) 0 0 no-repeat;
    top: 492px;

    }

    ーーーーー

    サイト例:http://www.rakuten.ne.jp/gold/ksfoods/

    • ハカセ より:

      minmin様
      返信がすっかり遅くなりました。

      div.tab_ban {
      position: fixed;
      position: absolute;
      }
      
      「position: absolute;」

      この一行を外したら多分固定されると思います。
      よろしくお願い致します。

      • minmin より:

        ハカセ 様

        本当に申し訳ありません。教えてくださいm(__)m
        消してみたのですが、うまくいきません。。
        もしほかに手がありましたら、ぜひお願いします!
        自分でもやってみます。
        ありがとうございました!

        • ハカセ より:

          minmin様
          返信遅くなりました。
          御社のトップページを見ると、
          tab.cssの中で一部重要な部分が抜けています。

          div.tab_ban {
          	position: fixed!important;
          	position: absolute;
          }
          

          position: fixed!important;の部分が消えているので
          それを入れれば大丈夫だと思います。
          複数バージョンの見本をIE9で確認してみてら大丈夫っぽいので
          きちんとコピペ出来てればいけるはず。
          頑張ってください!
          よろしくお願い致します。

          • minmin より:

            ハカセ さま

            ありがとうございますーー!なおりました!!
            お手数をおかけいたしました!
            その後なおそうかと思っていたのですが、、、
            見て見ぬふりをしておりました…笑
            これからも拝見させていただきますm(__)m

  7. kudo より:

    初めまして、いつも拝見させていただいています。
    ご質問をお願いしたいのですが・・・

    サンプルとして掲載されているショップ様タマチャンショップ様のように楽天ショップの商品ページやトップページに背景画像を表示させたいと思っており色々調べているのですが、なかなか判明しません。

    もしなにかご存じであればご教授ください。宜しくお願いします。

    • ハカセ より:

      kudo様
      コメントありがとうございます。
      背景に画像を使用する方法は幾つかありますが、
      タマチャンショップ様ではCSSを使用して

      body {
      background: transparent  url("http://www.rakuten.ne.jp/gold/kyunan/img/back0501-2.jpg") no-repeat center -15px;
      }
      

      みたいな感じで背景画像を指定しているようです。
      コンテンツ領域の白い角丸も背景に含まれているのが味噌ですね。
      近いうちに詳しい記事を書いてみたいと思います。
      期待せずにそちらもお待ちください。
      よろしくお願い致します。

      • kudo より:

        ハカセ様
        ご回答ありがとうございます。
        試しにソースをCSSに張ってみましたが背景表示されませんでした。

        詳しい記事を楽しみにお待ちしております。
        よろしくお願いします。

  8. takesita より:

    ハカセさま

    いつも、ほんと為になるサイトをありがとうございます。

    前回は、スライドショーバナーの際には、大変お世話になります。
    無事UP出来て、サイトも動きがあって社内でも好評化です。
    ほんと、ハカセさまのおかげです。

    今回、タブバナーを設置したくサイトで勉強させていただいてますが、
    すみません。まったくのど素人でして、見よう見まねで作れたのですが、
    サイトへのUPの方法がわかりません。

    常に表示させたいと考えてます。
    下記の「リンク先URL」とは、どのURLなのでしょうか。

    また、下記、サイトを見て作成したCSSです。(GOLDにはUPしました。)
    何か間違えがあるのでしょうか。

    すみませんが、教えていただきたくメールさせていただきます。
    お忙しいかと思いますが、よろしくお願いします。

    住友タブバナー

    #tab {
    width: 150px;/* 最初に表示されるバナーの幅 */
    height: 320px;/* バナーの高さ */
    background: url(/imgrc0066105238.jpg) no-repeat;/* 画像のURL */
    position: fixed;/* バナーを固定します */
    right: 0;/* 右から0pxの位置に指定 */
    bottom: 100px;/* 下から100pxの位置に指定 */
    }
    #tab a {/* リンクするエリアをバナー全体に広げる設定 */
    display: block;
    width: 100%;
    height: 100%;
    }
    #tab:hover {/* カーソルが乗った時の動きを指定 */
    width: 450px;/* バナーが伸びた時の幅 */
    /* 以下アニメーションの設定 */
    -webkit-transition: width ease-in-out 0.5s;
    -moz-transition: width ease-in-out 0.5s;
    -ms-transition: width ease-in-out 0.5s;
    -o-transition: width ease-in-out 0.5s;
    transition: width ease-in-out 0.5s;

    • ハカセ より:

      takesita様

      HTMLはRMSからページに貼り付けます。
      CSSファイルはGOLDにアップします。
      リンク先URLは、タブバナーをクリックした時に移動する先のURLです。

      リンクが上手く飛ばないとの事ですが、商品ページにリンクしてあれば
      GOLDのページに飛ぶ事はあり得ないはずです。
      再度リンク先のURLをご確認下さい。

      よろしくお願い致します。

  9. takesita より:

    ハカセ さま

    何度もすみません。
    UP出来ましたが、リンクがきれいに飛びません。

    商品ページに飛ばしたいのですが、一度GOLDのページに飛んでしまいます。

    先程、メールさせていただいたHTMLをフッターに貼り付けました。
    GOLDへのUPは必要なかったとの事でしょうか。

    ど素人で本当にすみません。教えていただけましたら幸いです。

    takeista

  10. mairo より:

    いつも分かり易く説明していただき、参考にさせていただいております。
    今回、タブバナーを実装してみましたが、indexのみ、タブバナーが飛び出してきた際、画像にかぶって見切れてしまいます。

    その他の階層ページに関しては問題がないようですが、これはindexのhtmlの記載に問題があるのでしょうか?
    宜しくお願い致します。

    • ハカセ より:

      mairo様
      コメントありがとうございます。
      恐らく要素の重なり順(z-index)を指定すると直ると思います。

      .tab_ban {
          width: 40px;
          height: 100px;
          position: fixed !important;
          position: absolute;
          right: 0;
          z-index: 100;
      }
      

      みたいな感じで、指定してみてください。
      詳しくはこちら(他のサイトです)
      http://www.htmq.com/style/z-index.shtml

      • mairo より:

        ありがとうございます!
        できました^^
        迅速にご対応いただき、感謝いたします。
        今後とも宜しくお願い致します。

  11. みゅう より:

    はじめまして!
    こちらのサイトを参考に、無事、楽天でバナーを設置することができました。
    ありがとうございます。

    ひとつ、ご質問なのですが…
    楽天のスマホ商品ページで、下部に(横は100%表示で)固定バナーを設置することはできますでしょうか?
    お教えいただけるとうれしいです(>_<)

  12. みゅう より:

    矢継ぎ早でごめんなさい。
    先ほどのご質問なのですが…
    上記のバナーを、CSSは外部ファイルにすることはできますでしょうか?
    その場合、htmlにどんな記述をすればよいでしょう?
    わからないことばかりで、ご迷惑をおかけします・・・。
    どうか、よろしくお願いいたします。

    • ハカセ より:

      みゅう様
      コメントありがとうございます。
      「スマホページでの固定バナー」
      出来ます!やりかたは近日中に記事を書く予定なので
      期待せずにお待ち下さい。

      CSSですが、外部ファイルも使用出来ます。
      と言ってもちょっと「バグ利用」っぽいやり方なので
      自己責任でお願いします。(大手ショップもやっているので怒られたりはしないと思いますが・・・)
      普通にlinkタグを書こうとすると「禁止されているタグが使用されてます」的な事を言われてエラーが出るので

      <link rel="stylesheet"                                                                        href="hoge.css">
      

      こんな感じで半角スペースを大量に入れて記入します。
      これによりRMSが禁止タグと認識せず、なおかつスマホのブラウザではlinkタグとして認識する様です。
      以上、お役に立てれば幸いです。

  13. みゅう より:

    さっそくありがとうございます!
    スマホ版も、お待ちしていますね。
    いつも本当に助けられています。
    心からの感謝をこめて。

  14. UUP より:

    スマホの固定追従バナーの設置を試みており、
    みゅうさんへのお返事コメント欄に検索でたどり着いた者です。

    にめっちゃ半角スペースの部分はクリアしたのですが、
    外部cssを反映させるためのidを振るとエラーが出て進めません。
    これもめっちゃ半角スペースをやってみましたが、もももどこにidを振ってもエラーでした。
    こちらも何かバグ利用の方法があるのでしょうか?

    みゅうさんと同じく、スマホ版の記事お待ちしております!
    何卒よろしくお願いいたします。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る