戯れ言葉

スマホ対応のレスポンシブ アフィリの横幅

カテゴリ:レスポンシブ
タグ:

 スマホ対応のレスポンシブにした結果、派生した問題の第3弾です。

 私も人様のまねをして記事内やサイドカラムに広告をいれています。
 で、問題になるのは横幅が狭まったときに右側がケラレてしまう記事内の横長な広告と、横配置したブログランキングのバナーです。
 特に、アフィリエイトリンクのHTML のソースやサイズ等の変更は禁止されているので、縮小表示とかはできません。

 色々調べて見ると、横幅が狭くなったとき横スクロールバーを表示させる方法が見つかったので、それを使ってみました。
 ついでに、記事内のセンターに表示させます。
 HTML のアフィリエイトリンクの部分を div タグで2重に囲ってセンター表示を可能にしました。

<div class="int_cm">
    <div class="int_cm_table">
        <script
・・・・・・・・ここがアフィリエイトリンク部分
       </script>
    </div>
</div>


 次にCSS で、

.int_cm {
    width: 100%;
    padding: 30px 0 0;
    overflow-y: hidden;
    overflow-x: auto;
}

  /*  -- スマホ用スライドバー常時表示 -- */
  .int_cm::-webkit-scrollbar {
    height: 15px;
  }
  .int_cm::-webkit-scrollbar-track {
    border-radius: 15px;
    background: #f8f8f8;
  }
  .int_cm::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: #aaaaaa;
  }

.int_cm_table {
    width: 470px;/*
アフィリエイトの表示サイズ */
    margin: 0 auto;
}

 とやって、スマホ上でスライドバーの常時表示ができました。
 .int_cm_table の中身を変えてやれば、右寄せもできます。
 ブログランキングのバナーの部分は同じ手法で、ここを変えました。

 これで、Chrome や IE で見てみると、Chrome のスライドバーはスマホと同じ形ですね。

 これは URAKOTA BLOG 様の スクロールバーをスマホでも常に表示させるメモ(webkit系ブラウザでのみ) の記事を参考にさせていただきました。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます