アタックフォーメーション!

退職代行で突然仕事を辞めた30代1児のパパ(元自動車整備士)収入なくなって本当にどうしよう/(^o^)\

アタックフォーメーション!

【アドセンス】リンクユニットがはてなブログで表示しなくて悩んだ

はてなブログ リンクユニット 表示しない

 

 Googleアドセンスのリンクユニットが良いとの情報を得ましたが、はてなブログで表示されない!様子を見たりコードを変えてみたり1か月ほど試行錯誤しましたがうまくいかなかったのです。それがやっと解決できました(遅)僕みたいに時間を無駄にしてしまわないように、アドセンス合格して間もない人に知っていただきたい!

はてなブログにリンクユニットが表示されなかった理由は直接貼り付けていたから

はてなブログではHTML編集で記事の中に個別にリンクユニットを貼り付けても正常に表示しないそうです!

僕だけっすかね?アドセンスのリンクユニットを貼るだけでこんなに苦労しているのは....HTML編集で直接貼っても表示されないとか初見殺しですやん。

リンクユニットがうまく表示されない状態がこちら

アドセンス リンクユニット 表示しない

PC表示

2x2の4つ表示されるはずなのに1列で2つしか表示されません!隙間がないのかと思ってコードを色々いじりましたが何もかわりませんでした!

アドセンス リンクユニット 空白

スマホ表示

スマホ表示では空白ができて、表示すらされない状態!cssで使っているコードが邪魔をしているのではないかと考えましたが違いました!

正しく表示できた状態がこちら

アドセンス 表示されない

PC表示

これこれ!2x2の4つの表示が出来ました!

Googleアドセンス 広告 表示しない

スマホ表示

5つ表示できた!いや~解決できるまで長かった。

はてなブログでリンクユニットを貼る方法

 

HTML編集で直接コードを貼るのではなくスクリプトで自動挿入すると正常に表示されます!

こんなん気が付かんわ~...っというか自動で貼っていなかったのがセンスのないところですけどね(苦笑)

今回参考にさせていただいた記事がこちらです。一番簡単でした!

tamasaburo.com

コードを貼り付けます

こちらに記載されているコードを『デザイン』→『カスタマイズ』→『記事』→『記事下』に貼って、『ここに自分のアドセンスコード』と書かれた部分にアドセンスから作成したリンクユニットのコードをコピペするだけです!

レスポンシブでコードを作成していたら自動的にサイズ調整もしてくれます。

ただこのままだと『h3見出しの上』に広告が表示されますので、『h2見出しの上』に表示したい場合は『h2』に書き換えます。

スポンサードリンクを消すか消さないかはお好みで。

目次の上にも配置できます

customize-kenki.hatenablog.com

複数の広告を自動で挿入したい場合や目次の上に表示させたい場合は、こちらの記事が参考になりました!

tamasaburoさんのコードで『.entry-content > h3』をkenkiさんの記事にある『.table-of-contents > ul』に書き換えれば大丈夫そうな気がしますが、僕は目次を使っていないので試していません。

目次上に挿入したい場合はkenkiさんの記事からコピペした方が無難かも。

さいごに

1か月ほど悩みましたが無事リンクユニットを表示することができました。すべてはコードを掲載していただいているブロガーさんのおかげです!ありがとうございました!

はてなブログさんにはいろいろ悩まされていますが、こういった初心者が悩んだ点も今後、記事にして公開していきます。

リンクユニットが表示できなくて困った人が僕以外にもいるはず!これだけは信じたい(笑)

最後まで読んでいただきましてありがとうございました!