ホームページ制作
■HTMLの基本
HTMLとは?
ブログが優秀?
初心者ミス・疑問
階層とファイル名
基本構成
改行と段落
文字の大きさ
強調/斜体/打消し
文字の色指定
中央寄せ
行揃え(段落)
行揃え
見出し
+-で文字指定
箇条書きリスト
順番有りリスト
ハイパーリンク
メールリンク
■メタタグ
説明文/キーワード

16進数色見本
色名で指定

■実践的
JavaScript・CSS
画面内で広告固定

■無料レンタル
HPスペース
アクセスランキング
アクセス解析
ブログパーツ
□R指定サイト可
掲示板
アクセスランキング
アクセス解析

■無料配布CGI
画像掲示板
1行掲示板

■CSS
px,em,%対応表

■無料ツール
構文チェック
HTML Validator
リンク切れチェック
リンク切れチェッカー

別ジャンルへ飛ぶ
別サイト(創作専門)
掲示板・ろだ
年齢制限/広告非表示
GoogleAds非表示
コピペ
スマホ向けページ有
忍者

interz
Google
忍者
点数の見方
殿堂入り 6点 殿
5点 5
4点 4
3点 3
2点 2
1点 1
評価不能
サイト名変更/移転
変更
サイト合併/休止
合併
サイト閉鎖/年齢指制限
閉鎖年齢制限
Amazon
Amazon
人気記事
ブログパーツ
Ads
■ まとめブログの用に広告を固定させたい
□画像を画面内に固定させるJavaScript
宣伝効果の高い広告固定
まとめブログの中には、サイドにある「160×600のAdSense系広告」が画面内に入ると固定され、広告がスクロールに付いていくサイトがあります。あれは邪魔ですが素晴らしい宣伝効果です。
今回はその方法を調べていきたいと思います。

GoogleAdSenseでは禁止されておりますので、他社のAdSense系で利用可能の所を使用しましょう。忍者AdMaxさんに質問をぶつけてみました。


アダルト可AdSense | Ads比較 アイモバイル・忍者AdMaxで広告収入を得る
http://www.interz.jp/hp/ads18.html

□配布サイト
簡単な「JavaScript」で出来るかと思いましたが、調べてみると結構複雑です。タグを配布しているサイトがありましたので、そちらを使わせて頂くことに致しました。


ぼくはまちちゃん!(Hatena)
ライブドアみたいにスクロールしたらサイドバーの広告を固定する
http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder

実はこのまま貼っても使えず、使い方も書いてありません。
よって今回はこの使い方を記載したいと思います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
(function($) {
$(document).ready(function() {
/*
Ads Sidewinder
by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder
*/
var main = $('#main'); // メインカラムのID
var side = $('#side'); // サイドバーのID
var wrapper = $('#ad1'); // 広告を包む要素のID

var w = $(window);
var wrapperHeight = wrapper.outerHeight();
var wrapperTop = wrapper.offset().top;
var sideLeft = side.offset().left;

var sideMargin = {
top: side.css('margin-top') ? side.css('margin-top') : 0,
right: side.css('margin-right') ? side.css('margin-right') : 0,
bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0,
left: side.css('margin-left') ? side.css('margin-left') : 0
};

var winLeft;
var pos;

var scrollAdjust = function() {
sideHeight = side.outerHeight();
mainHeight = main.outerHeight();
mainAbs = main.offset().top + mainHeight;
var winTop = w.scrollTop();
winLeft = w.scrollLeft();
var winHeight = w.height();
var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed';
if (pos === 'fixed') {
side.css({
position: pos,
top: '',
bottom: winHeight - wrapperHeight,
left: sideLeft - winLeft,
margin: 0
});

} else if (pos === 'absolute') {
side.css({
position: pos,
top: mainAbs - sideHeight,
bottom: '',
left: sideLeft,
margin: 0
});

} else {
side.css({
position: pos,
marginTop: sideMargin.top,
marginRight: sideMargin.right,
marginBottom: sideMargin.bottom,
marginLeft: sideMargin.left
});
}
};

var resizeAdjust = function() {
side.css({
position:'static',
marginTop: sideMargin.top,
marginRight: sideMargin.right,
marginBottom: sideMargin.bottom,
marginLeft: sideMargin.left
});
sideLeft = side.offset().left;
winLeft = w.scrollLeft();
if (pos === 'fixed') {
side.css({
position: pos,
left: sideLeft - winLeft,
margin: 0
});

} else if (pos === 'absolute') {
side.css({
position: pos,
left: sideLeft,
margin: 0
});
}
};
w.on('load', scrollAdjust);
w.on('scroll', scrollAdjust);
w.on('resize', resizeAdjust);
});
})(jQuery);
</script>


■ 使い方
□呼び出し用Javascriptの作成
1.コピペ
ぼくはまちちゃん!(Hatena) 」様から
タグをコピペしてテキストエディタに全て貼り付けます。

2.削除
最初の部分
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

と最後の部分
</script>

を消してしまいます。

2.保存
適当な場所に「ファイル名.js」で保存します。
当方は「css/ads.js」に致しました。

□本文に記載
jQueryを使用しますので、GoogleからjQueryと先ほどのJavascriptを呼び出します。
本文<head>~</head>の中に記載します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="○○○.js" type="text/javascript"></script>

.jsの階層を間違わないようにしましょう。上手くいかないときは絶対パスで、http://~とするのが宜しいでしょう。当方は「css/ads.js」となります。


□広告枠の設定
サイドバーに広告を設置致します。この時にIDを決め

<div id="○○">
広告呼び出しタグ
</div>

とします。当方はIDを「ads」にし広告表記用のイメージを上部に表示するように致しました。



□Javascriptの設定
以下の構文を自分のサイトに合わせて変えます。これはCSSにて2カラム・3カラムのデザインでIDをふっているサイトでなければ使えません。

var main = $('#main'); // メインカラムのID
var side = $('#side'); // サイドバーのID
var wrapper = $('#ad1'); // 広告を包む要素のID

当サイトは以下の様なID構成となっております。


当方は左側「sidebarl」内に広告を入れIDが「ads」なので

var main = $('#mainContent'); // メインカラムのID
var side = $('#sidebarl'); // サイドバーのID
var wrapper = $('#ads'); // 広告を包む要素のID

となり、これで完了です。FTPでアップロードし動作確認してみましょう。
当方も中々上手くいきませんでした。

■ 動作確認
動作確認
サンプルでは2カラム右側に設置されていましたが、当方はデザインの関係上3カラム左側に設置致しました。思考覚悟の結果、固定されるようになりました。


左側では本文と重なってしまう
全ページに設置し動作確認を行っていたところ、左サイドバーよりメインカラムの方が長いと、左サイドバーが無くなった部分からメインカラムが左にずれ、固定広告が記事の上に重なってしまう様になりました。


右側で正常動作
HTML・CSSの性質上右側にずれることはありませんので、急遽全ページ右側に直しました。
正常動作を確認。サンプルが右側で固定させている為、右側専用かとも思いましたが「ハム速」様では左に固定広告があります。当サイトの構成上の関係か。

(2013年1月27日記載)

参考文献
ぼくはまちちゃん!(Hatena)
http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder