人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ハテナブログに追跡型バナーをつけたいのですが、どうやってつければよいかわかりません。
ライブドアは色々なサイトを参考に普通に設置できるのですがハテナブログに追跡型バナーをつけるにはどうしたらいいでしょうか。

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

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

●質問者: オナ禁戦士だめ男
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

こんな感じでしょうか。

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


オナ禁戦士だめ男さんのコメント
とてもわかりやすい説明ありがとうございます^^ 早速つけてみたのですが、フッタにつけたらブログが見にくくなってしまったため、可能ならサイドバーにつけたいと思いサイドバーにそのままURLを載せたところ、サイドバーにコピーしても表示が変わりませんでした;; サイドバーに表示するようにするにはどうしたらよいでしょうか?

a-kuma3さんのコメント
>> 早速つけてみたのですが、 << バナーと言ってたのは、縦長の広告でしたか。 回答に追記しました。 [http://a-kuma3-alt.hatenablog.jp/:title=ぼくのブログ]でも、サイドバーのモジュールが追いかけるようにしてみました。

オナ禁戦士だめ男さんのコメント
回答ありがとうございます。本当に助かりました!有難うございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ