だめ男回答ポイントなし

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

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

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

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

ログインして回答する

ベストアンサー

a-kuma32016/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 がすき間です。

スター

3件のコメントを見る
だめ男 2016/09/01 03:35:08

とてもわかりやすい説明ありがとうございます＾＾

早速つけてみたのですが、フッタにつけたらブログが見にくくなってしまったため、可能ならサイドバーにつけたいと思いサイドバーにそのままＵＲＬを載せたところ、サイドバーにコピーしても表示が変わりませんでした；；

サイドバーに表示するようにするにはどうしたらよいでしょうか？

スター
a-kuma3 2016/09/01 11:33:45

早速つけてみたのですが、
バナーと言ってたのは、縦長の広告でしたか。

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

スター
だめ男 2016/09/02 20:38:17

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

スター

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

ベストアンサー

a-kuma32016/08/31 08:00:44

だめ男 2016/09/01 03:35:08

a-kuma3 2016/09/01 11:33:45

だめ男 2016/09/02 20:38:17

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版