はてなブログ版:アフィリエイト最大手A8netに登録後にするべきこと

f:id:tamurasann:20190323162200p:plain

A8netはGoogleアドセンスと違って審査は特にないので誰でも登録することができるということもあり、ブログで収益を稼ぎたい人はまず、A8netに登録している人が多いと思います。

 

また、A8netはGoogleアドセンスでは規約違反でできないこともできるのでGoogleアドセンスとセットで併用している方もいると思います。

 

今回は、Googleアドセンスでは規約違反でできない『サイドバーの追従スクロールの設定』を紹介させていただきます。

 

 

www.notitle-weblog.com

swankyst.hatenablog.com


notitleさん、swankysさんが書いておられる記事を参考にさせていただきました。

 

A8netの広告をサイドバーへ貼る

①A8netにログイン後、青枠部分で書く記事に関するキーワードを検索してください。

f:id:tamurasann:20190321224048p:plain

②キーワードを検索したら、色々な会社の広告が表示されるので自分が書く記事と関連する広告を出している会社のページの青枠部分をクリックして、詳細を見てください。

f:id:tamurasann:20190321232040p:plain

 

③記載されてる内容確認して、OKだったら提携申請します。

f:id:tamurasann:20190321232420p:plain

 

④提携承認されれば、トップページのプログラム管理から参加中のプログラムをクリックしてください。

f:id:tamurasann:20190321232724p:plain

 

⑤その後、さきほど提携申請をして、承認された広告リンクをクリック

f:id:tamurasann:20190321233044p:plain


⑥つけたい広告の種類を選んで、その広告のコードをコピー

f:id:tamurasann:20190321233430p:plain

 

⑦はてなブログのデザイン設定からサイドバーをクリックし、モジュールを追加からHTMLを追加してください。

f:id:tamurasann:20190321233813p:plain

f:id:tamurasann:20190321233737p:plain

適当にタイトルをつけて、さきほどの広告のコードを貼り付けします。

以上がA8netの広告をサイドバーに貼る作業になります。サイドバー以外にも記事上や記事下、記事内に貼ることもできます。

記事内に貼る場合は見たままモードだと、HTML編集モードにしてから貼り付けしてください。

サイドバーの追従スクロール設定(下二つを固定)

サイドバーの幅を狭くする設定

デザイン➡デザインCSSに以下のコードを貼り付ける。

f:id:tamurasann:20190322194030p:plain

/*サイドバー*/
.hatena-module {
    margin-bottom: 20px;
}
.hatena-module-title {
    margin-bottom: 2px;
}

 

jQueryの読み込みコードを追加

デザイン➡フッタorヘッダに以下のコードを追加する。

f:id:tamurasann:20190322194308p:plain

<!--jQuery-->
<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->

 jQueryは簡単に言うとWebサイトに動きを付けるようなものです。

 

サイドバー(下二つを固定)の追従スクロール設定コードを追加

①以下のコードをデザイン➡フッタに追加する。

<script>
// ユーザーごとで書き換える
var oneColumnWidth = 919;
var timer = 5000;
// 上下固定位置
var fixTop = 10;
var fixBottom = 100;

// サイドバーの固定
$(window).load(setTimeout(function (){
    // サイドバーの一番最後のモジュール
    var $module = $('.hatena-module:eq(-2)');
    var $module_last = $('.hatena-module:last');
    // 最上位モジュールの位置
	var modulePosition = $module.offset().top;
    // モジュールの高さ
    var fixTop_eq = $module.outerHeight(true);
    var fixTop_last = $module_last.outerHeight(true);
	var moduleHeight = fixTop_eq + fixTop_last;
	// サイドバー全体
	var sidebarHeight = $('#box2').outerHeight();
	var sidebarWidth = $('#box2').width();
	// メインコンテンツ
	var mainHeight = $('#main').outerHeight();
	// サイドバーを固定にする関数
	function fixedLastModule(){
		// メインコンテンツよりサイドバーが長い場合は無効化
		if(sidebarHeight > mainHeight){return;}
		// 2カラムで、モジュールの一番最後までスクロールされたらCSSの書き換え
		if($(window).outerWidth() > oneColumnWidth && $(window).scrollTop() > modulePosition) {
			$module.css({
				'position': 'fixed',
				'top': fixTop + 'px',
				'width': sidebarWidth
			});
            $module_last.css({
				'position': 'fixed',
				'top': (fixTop_eq + fixTop) + 'px',
				'width': sidebarWidth
			});
		} else {
			$module.css({
				'position': '',
				'top': '',
				'width': ''
			});
			$module_last.css({
				'position': '',
				'top': '',
				'width': ''
			});
		}
		// フッターの位置まで来たらストップ
		// 高さの設定
		var bodyHeight = $('body').outerHeight();
		var windowHeight = $(window).outerHeight();
		var footerHeight = $('#footer').outerHeight();
		var scrollBottom = bodyHeight - windowHeight - footerHeight;
		if(moduleHeight > windowHeight - footerHeight - fixBottom){
			if($(window).outerWidth() > oneColumnWidth && $(window).scrollTop() >= scrollBottom){
				$('#content').css({
					'position': 'relative'
				});
				$module.css({
					'position': 'absolute',
					'top': '',
					'bottom': fixTop_last + 'px'
				});
                $module_last.css({
					'position': 'absolute',
					'top': '',
					'bottom': 0
				});
			} else {
				$('#content').css({
					'position': ''
				});
				$module.css({
					'bottom': ''
				});
                $module_last.css({
					'bottom': ''
				});
			}
		}
	}
	// イベントの設定
	$(window).scroll(fixedLastModule);
	$('body').on('touchmove', fixedLastModule);
	$(window).resize(fixedLastModule);	
}, timer));
</script>

 

②上記3行目の部分 var oneColumnWidth = 919; の数字部分(919)を自分のブログテーマによって変更する。

 

テーマ

Innocent  1023
Brooklyn  919
DUDE  768
Blank  959
Naked  768
Written  768
CONTENTS  768
Spirea  900
Minimalism 769

詳しくは以下のnotitleさんのブログに記載されております。

www.notitle-weblog.com

 

以上でサイドバー下2つの追従スクロール設定となります。既に知っている方もいるかかもしれませんが、わたしの読者さんで知らなかった人はぜひ活用してみてください。