【まとめ】はてなブログの設定＆カスタマイズ - 33歳でうつ病を発症し、無職になりました。

はてなブログでブログ開設後、たぬ吉のやった設定やカスタマイズをまとめておこうと思います。

正直コードの事など分からない事ばかりなので、探り探り設定していっています。

・はてなブログPRO申し込み

せっかくブログ始めるならGoogle Adsense（グーグルアドセンス）に登録したいと思い、

独自ドメインの設定が出来るPROに申し込みしました。

・お名前.com でドメイン取得

ドメイン取得は色々な会社が提携していますが、今回はお名前.com でドメイン取得する事にしました。

ここまで設定したところで「Google Adsense（グーグルアドセンス）」に登録したいと思い、記事を5記事くらい書きました。

・Google Adsense（グーグルアドセンス）に申し込み

正直5記事では少ないと思いながらも、取り敢えずGoogle Adsense（グーグルアドセンス）に申し込みました。

・「サイトをAdsenseにリンク」で表示されるコードを貼り付け

＜はてなブログダッシュボード＞→＜設定＞→＜詳細設定＞→＜検索エンジンの最適化＞→＜headに要素を追加＞

＜headに要素を追加＞欄に「サイトをAdsenseにリンク」に表示されたコードを貼り付ける。

さすがに5記事だったからなのか、それともタイミングの問題なのかは分かりませんが、

なかなか審査には通りませんでしたので、申請中にも記事を増やしていったところ、２～3週間後に合格の知らせを頂きました。

・プライバシーポリシーの設置

Googleのプライバシーポリシーを参考に、

Google Adsense（グーグルアドセンス）申し込みしてすぐに作成しました。

・Google Adsense（グーグルアドセンス）の設定

＜設定＞→＜自分のサイト＞→＜新しいサイトを追加（右上にある⊕）＞

アドセンス狩りなるものがあるようで自分のアカウントで広告を表示出来るサイトを登録した方が良いようです。

・Google Adsense（グーグルアドセンス）の広告設定

1．自動広告

＜広告の設定＞→＜コンテンツ＞→＜自動広告＞→＜全般設定＞→＜ペンマーク（全般設定の変更）＞

全般設定では後からでも変更できるので、ひとまず全て選択し、

新しいフォーマットを自動的に取得するにも☑を入れておきました。

コピーしたコードをはてなブログに貼り付ける

＜はてなブログダッシュボード＞→＜設定＞→＜詳細設定＞→＜検索エンジンの最適化＞→＜headに要素を追加＞

＜headに要素を追加＞欄に表示されたコードを貼り付ける。

自動広告の設定をしましたが、なんだかうまく機能していないような気がします。

原因がよく分からないので手動での広告ユニット設置もしました。

２．広告ユニット作成

＜広告の設定＞→＜コンテンツ＞→＜広告ユニット＞→＜新しい広告ユニット＞

たぬ吉はレスポンシブル、レクタングル（大）、レクタングルの3種類をそれぞれ広告位置ごとに名前を付け使用しています。

レスポンシブル広告の設定変更

記事下に設置するレスポンシブル広告の設定を変更しました。

「data-ad-format="auto"」を「data-ad-format="rectangle"」に変更し、

レクタングル型の広告のみ表示するようにしました。

コピーしたコードをはてなブログに貼り付ける

広告を貼り付ける場所は人それぞれだと思いますが、

たぬ吉の場合は、

①記事上にレスポンシブル広告、

②記事下にレスポンシブル広告（レクタングル）、

③記事フッター部分に横並びのレクタングル（300×250）×2を設置しています。

※①に関してはまだまだ改善できそうなので、今後変更検討していきたいと思っています。

①記事上への広告貼り付け

＜はてなブログダッシュボード＞→＜デザイン＞→＜カスタマイズ＞→＜記事＞→＜記事上＞

＜記事上＞欄に作成したレスポンシブル広告の表示されたコードを貼り付ける。

②記事下にレスポンシブル広告（レクタングル）貼り付け

＜はてなブログダッシュボード＞→＜デザイン＞→＜カスタマイズ＞→＜記事＞→＜記事下＞

＜記事下＞欄に作成したレスポンシブル広告の表示されたコードを貼り付ける。

<div id="my-footer">

アドセンス広告コード貼り付け

</div>

<script>

var myFooter=document.getElementById("my-footer");

var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);

document.getElementsByClassName("entry-content")[0].appendChild(temp);

</script>

※「スポンサーリンク」や「広告」の表記はあってもなくてもいいようなので削除しました。

記事下に挿入するコードはこちらのブログを参考にさせて頂きました。

助かりました。ありがとうございます。

他にも色々自動でアドセンス広告を挿入する方法を書かれています。

english-apple-diy.hatenablog.com

③記事フッター部分に横並びのレクタングル広告貼り付け

＜はてなブログダッシュボード＞→＜デザイン＞→＜カスタマイズ＞→＜記事＞→＜記事下＞

＜記事下＞欄に作成した300×250のレクタングル広告の表示されたコードを貼り付ける。

（②の下に貼り付けました。）

<div id="my-footer">

<table class="table-css">

<tr>

<td class="td-css">

左側のアドセンス広告コード貼り付け

</td>

<td class="td-css">

右側のアドセンス広告コード貼り付け

</td>

</tr>

</table>

</div>

<script>

var myFooter=document.getElementById("my-footer");

var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);

document.getElementsByClassName("entry-content")[0].appendChild(temp);

</script>