【はてなブログ】記事下広告を自身のアドセンス広告にする方法（カスタマイズ）

ブログを運営していくとデフォルトで用意されているブログ画面だとだんだん物足りなくなってきて、色々とカスタマイズして見栄えを良くしたいと思ってきますよね。

今回は僕が行ったカスタマイズでもアドセンス広告と関連記事に関するカスタマイズを紹介していきたいと思います。

ブログ初心者の僕でも簡単にできたので、是非やってみてください。

この記事でできること

この記事では、関連記事の下にある自身のアドセンス広告を記事下に表示する方法を図を使って分かりやすく説明していきます。

はてなブログProにバージョンアップ
記事下広告を自身のアドセンス広告にしたい
デフォルトでは記事下広告より関連記事が先に表示される
はてなブログで記事下広告を自身のアドセンス広告にする方法
さいごに

はてなブログProにバージョンアップ

そんな僕も今まで色々とカスタマイズをして少しでも見栄えが良くなる様にしていましたが、はてなブログ無料版ではカスタマイズに限界を感じ、当ブログも人知れず”はてなブログPro”にバージョンアップしました。

別記事で無料版と有料版の違いやメリット・デメリットを詳しく書いていますので、興味がありましたら参考にしてもらえればと思います。

【参考記事】

【はてなブログ】無料版と有料版（Pro）の違いとは｜ブログ初心者ははてなブログで - ちゃちゃの備忘録的なブログ

ちなみにProにした一番の理由は、一番いい場所に貼ってあると言われている運営が設置した広告を消すことです。

僕もGoogleアドセンスに合格した身なので、それを消すことで少しでもブログの収益に繋がればとの思いがありました。

記事下広告を自身のアドセンス広告にしたい

BLOGと書かれた文字

ブログを運営していくと”ここをこうしたい！”と言ったカスタマイズ願望が必ず出てきますよね（笑）僕もその一人なんですが、どうやっていいかサッパリ分からず色んなブロガーさんが運営しているブログを見に行っては羨ましがっていました。

すると色んなブロガーさんが”カスタマイズする方法”等のブログカスタマイズ記事を上げているのに気づき、今ではその記事を参考にさせてもらいながら自身のブログを少しずつカスタマイズしていっています。

今でも気になっている所は少しづつカスタマイズしているんですが、はてなブログProにしてからどうしてもやりたいことが抜けていました。

”記事下広告を自身のアドセンス広告にしたい！”

デフォルトでは記事下広告より関連記事が先に表示される

僕は記事下にはてなスターや各種シェアボタンを設置しているんですね。

そして、その下に関連記事があって次にようやくGoogleアドセンスの広告が出てくるんです。

はてなブログで記事下広告を自身のアドセンス広告にする方法

そこで、僕は色々とキーワードを織り込みながらググってみたんですが、僕の検索方法が悪いのか一向に出てきません。

半ば諦めかけていた時に出会ったブログがあり、今回はそのブログを参考にさせていただきました。

ウサキさん大変助かりました。ありがとうございます (^^)

schizoid-personality.hatenablog.com

ステップ１

以下のコードをコピーします。

/* 関連記事を記事下よりも下に */
.customized-footer {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.entry-footer-modules {
-webkit-order:2;
order:2;
width: 100%;
}
.entry-footer-html {
-webkit-order:1;
order:1;
width: 100%;
}