はじめに
皆さんこんにちは、こんばんは。
techblogchan（ @techblogchan ）です。
手動ではてなブログにいい感じにGoogle Adsenseを貼り付ける手動広告のやり方について私なりの工夫を備忘録も兼ねて書いていきたいと思います。
前回はインフィード広告の導入方法についてまとめました！まだチェックしていない方がいたらぜひ以下リンクから確認してみてください。
今回は、サイドバーに挿入するときに少しこだわったやり方についてまとめたいと思います。
はてなブログでサイドバーに手動広告を貼る方法
ここでは、すでにGoogle AdSenseで手動広告のスクリプトを発行している前提で話をすすめていきます。
まだ手動広告を作成してないよ、という方は以下のリンクを参考にまず作成をしてみてください！
そこで生成されたコードはサイドバーに広告を貼るときに必要になるのでコピーしておいてください。
はてブロの管理画面 > デザイン > サイドバーにアクセスします。
一番下の「モジュールを追加」を押して広告用のモジュールを作成します。
モードは「HTML」を選択し、先程コピーしたGoogle AdSenseのコードをコピー&ペーストします。
私は上の図のように設定しました！
モジュールのタイトルは分かりやすいように「広告」という名前をつけました。
このままの状態でプレビューを見てみると、、、
うーん、、、広告に対してタイトルつけるのデザイン的に微妙だな、、、と思ったわけです。
じゃあ、モジュールを作成するときにタイトルをつけなければいいんじゃないかと思い先程モジュールにつけた「広告」という文字を消してみると…
今度は上のモジュールと同じ扱いになってしまいました。
いや、こういうことじゃないんだ！と思い、今回はCSSでタイトル部分を消す作業を行いました！
はてなブログのデザインCSSに以下の追記を行ってみてください。
div.hatena-module:nth-child(モジュールが配置してある位置の数字) > div:nth-child(1){
font-size:0;
}
モジュールが配置してある位置の数字というのはサイドバーの何個目に広告がくるか、ということです。
例えばtechblogchanだったら、プロフィールのすぐ下に広告が来ているので「2」という数字を入れればタイトルのフォントサイズが0になり表示されなくなります！
CSSに一行足すだけで簡単にタイトルを消すことができるのでぜひやってみてください！
まとめ
今回は、Google AdSenseをサイドバーに挿入した際にすこしこだわった部分についてまとめました。
実はサイドバーでも自動広告が悪さをして、デザインが崩れたことがあり…。
きっとGoogleのことなのでそのうちめちゃくちゃ精度が上がった自動広告が出てきそうですが、当分は手動で広告を貼ったほうが良さそうです！
他の部分のGoogle AdSenseの手動設置に関しても記事をまとめますのでまたぜひ見ていただけたらと思います！
それではまた別の記事で〜！
