ハテナブログに追跡型バナーをつけたいのですが、どうやってつければよいかわかりません。

ライブドアは色々なサイトを参考に普通に設置できるのですがハテナブログに追跡型バナーをつけるにはどうしたらいいでしょうか。

同じ質問を一度したことがあるのですが解決しなかったため再度投稿しました。

可能でしたら細かく教えて頂けると幸いです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2016/08/31 05:26:44
  • 終了:2016/09/02 20:38:26

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/08/31 08:00:44

こんな感じでしょうか。

<style>
#chase-banner {
    position: fixed;
    right: 1em;
    bottom: 1em;
}
</style>
<a id="chase-banner" href="http://a-kuma3.hatenablog.com/" title="本宅">
    <img src="http://cdn1.www.st-hatena.com/users/a-/a-kuma3/profile.gif">
</a>

a タグの href がリンク先で、img タグの src が画像の URL です。

上記のコードを、「デザイン」→「カスタマイズ」→「フッタ」のところに貼り付けてください。


ぼくのブログに設置してみました。
右下に出てるぼくのアイコン画像が、追跡型バナーのつもりです。
http://a-kuma3-alt.hatenablog.jp/






追記です。

早速つけてみたのですが、

バナーと言ってたのは、縦長の広告でしたか。
「追跡型」と言ってたのは、こんなイメージのものですか?
http://a-kuma3-alt.hatenablog.jp/


サイドバーに HTML モジュールを追加して(って、ここまではできてますね)、以下のコードを貼り付けてください。

<span id="chaser-module-mark"></span><!-- 目印 -->

<!-- ここに忍者のスクリプトを貼る -->
<script src="http://adm.shinobi.jp/s/..."></script>

<style>
.chaser-module {
    position: fixed;
    top: 16px;  /* ★固定する位置 */
}
</style>
<script>
(function() {
    document.addEventListener("DOMContentLoaded", function() {
        var e = document.getElementById("chaser-module-mark");
        if (e) {
            var PAD = 16;   /* ★固定する位置 */
            var mod = e.parentNode.parentNode;
            var mod_original_top = 0;
            var fixed = false;
            window.addEventListener("scroll", function(ev) {
                if (fixed) {
                    if (document.documentElement.scrollTop <= mod_original_top - PAD) {
                        mod.classList.remove("chaser-module");
                        fixed = false;
                    }
                } else {
                    var t = mod.getBoundingClientRect().top;
                    if (t <= PAD) {
                        mod_original_top = document.documentElement.scrollTop;
                        mod.classList.add("chaser-module");
                        fixed = true;
                    }
                }
            });
        }
    });
})();
</script>

ウィンドウの内側ピッタリで止まるよりも、少しすき間を空けた方が良いかなと思い、位置の調整をしています。
「★」をつけた 2ヶ所の 16 がすき間です。

他1件のコメントを見る
id:a-kuma3

早速つけてみたのですが、

バナーと言ってたのは、縦長の広告でしたか。

回答に追記しました。
ぼくのブログでも、サイドバーのモジュールが追いかけるようにしてみました。

2016/09/01 11:33:45
id:sakazaki-ryou3

回答ありがとうございます。本当に助かりました!有難うございます!

2016/09/02 20:38:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません