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

スポンサーリンク

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

 

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

 

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

 

この記事でできること

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

 

スポンサーリンク

 

 

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

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

 

初心者でも簡単!はてなブログPro

 

 

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

 

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

あわせて読みたい

はてなブログ無料版でもGoogleアドセンスに合格できた時の詳細な記事を書いていますので、良ければ参考にしてください。

 

【Googleアドセンス】 はてなブログ(無料版)でも合格する方法 - ちゃちゃの備忘録的なブログ

 

chacha-cat.hatenablog.com

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

BLOGと書かれた文字

 

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

 

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

 

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

 

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

 

デフォルトでは関連記事が先に表示される

僕は記事下にはてなスターや各種シェアボタンを設置しているんですね。そして、その下に関連記事があって次にようやくGoogleアドセンスの広告が出てくるんです。

あわせて読みたい

記事下に関連記事を表示させる方法

chacha-cat.hatenablog.com

Proにする前までは、このシェアボタンの下に運営が貼っていた広告があったんですが、運営が用意した広告を消した今では、この広告を貼る場所として適していると言われている場所に自身のアドセンス広告を貼りたいと思ったんです。

 

しかし現状では、関連記事が先に表示されているので有難くも他の記事を読みに行ってくれた場合、設置した広告が見られる可能性が減りブログ運営にも少なからず影響が出てきます。

 

そういった理由から関連記事の場所を何とかしたかったんです。

 

カスタマイズの方法

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

 

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

 

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

 

schizoid-personality.hatenablog.com

 

ステップ1

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

 

 /* 関連記事を記事下よりも下に */
.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%;
}

 

ステップ2

次にコピーしたコードを貼り付けます。

まず、「デザイン」をクリック

 

f:id:chacha-cat:20210810141409p:plain

 

ステップ3

「スパナマーク」をクリックしてから下部にある「{}デザインCSS」をクリック。

 

f:id:chacha-cat:20210810142057p:plain

 

ステップ4

「{}デザインCSS」の中の一番下に先ほどのコードを貼ります。

 

f:id:chacha-cat:20210810142958p:plain

※上記コードがうまく貼り付けられない時は、一度メモ帳やワードにコードを貼り付け、その後コードをコピーして貼り付けるようにしてみてください。


最後に必ず「変更を保存する」をクリックしてから終了してください。

スポンサーリンク

  

 

あわせて読みたい

【参考記事】

はてなブログを始めたらやってみたい機能とカスタマイズ

はてなブログの便利な機能とおすすめカスタマイズ(まとめ) - ちゃちゃの備忘録的なブログ

 

chacha-cat.hatenablog.com

 

 

 

さいごに

これで記事下にある関連記事よりも上にアドセンス広告が表示されるはずです。

 

広告に興味があるかどうかはブログを読みに来てくださった方に委ねられますが、とりあえず、この作業をすることで後回しになっていた広告が先に表示されるようになります。

 

なお、この様なブログのカスタマイズはカスタマイズされる方の自己責任でよろしくお願いします。不備等は対処できませんので、よろしくお願いします。

 

 

最後まで読んでいただきありがとうございます。
よろしければ読者登録よろしくお願いします。

 

にほんブログ村 ブログブログ ブログ運営へ
にほんブログ村