はてなでPC版インフィード広告が動かない件
私はこれとは別にブログを何個かやっていまして、本当趣味みたいなもんなのですが、一応マネタイズを目指して頑張ってるわけですね。
bloggerとはてなプロを使ってまして、wordpressは未体験です。そんでもって、仕事から帰ってきてからはてなプロの方のブログをちくちく弄ってたんですよ。タイトルにあるように、PC版のgoogle adsenseのインフィード広告を表示させるために。
PC版のみインフィード広告が動きません
昔プログラマー的なことをやっていたので、なんとなくソースを読むことは出来ますが、はっきりいって素人に毛が生えた程度です。ですから、こうしたらいいとか、こうやったらこうなるだろう、という知識はあっても、ソースの中身をいじる技術はないのですね。
ですから、先人たちの知恵を使用しようとネットダイブして、情報を仕入れてみたところ、発見したのがこの記事。
中盤らへんにあるソースコードをそのまま丸パクリで貼り付けたのですが、空欄ができるだけでアドセンス広告が表示されず（もちろん広告用コードは自分用に変えてますよ）。解せないのが、スマホは表示されるんですよね。なんでだろ…。
ちなみに、こちらの記事にサンプルは記事一覧が横長ですが、私のブログはタイル型です。そこが邪魔してるのか？？うーむ。ソースの中身が読めればなー（読む気なし）。検索だけでやるのも無理があるか。
スマホの方が流入が多いので、あまり気にしなくてもいいのでしょうけど、こいつを表示させるために１時間以上奮闘したので、ちょっとムキになって試行錯誤してました。結果負けたので時間の無駄になってしまったわけですがね。
く、くやしい。
---2018/7/13追記---
コメントで、記事を書かれていたケーさんにアドバイスをもらい、やってみたところなんとインフィード広告アドセンスが表示されました！
とのアドバイスと、
モバイルとの違いはCSSぐらいでしたので、モバイルに記述した内容をPCに貼り付けて動作するようであれば、記述ミスが考えられますね。
を参考に、とりあえずモバイル版の内容をPC版に貼り付けて見たところ、見事に表示されることに！
ということは、やはりCSSが原因か？と数字を色々弄っていたら、ある数値より下を入れると表示されたんですね。ようするに、位置に対して表示がデカかったので表示されなかった、というわけです。最後まで付き合っていただいたケーさんには感謝しかありません。ありがとうございました。
もし同じように広告が表示されなくて悩んでいる方は、とりあえず、
<style>.infeed_slot{width:100%;height:210px;margin-top: -18px;padding-bottom: 22px;}</style>
このwidth:100%を例えば200pxとかに変えてみることをお勧めします。%だとなんだかうまくいかず、px指定だとうまくいったので。
あとは自分のブログのサイズ感ですので、大きくしたり小さくしたりして最適なサイズを発見して見てください。
---追記終わり---
はてなブログにコピペでアドセンス記事挿入する
記事中にアドセンスを表示させるというのは、コピペでできる記事を見つけたのでこちらはサクッとできました。本当にコピペだけです。
アドセンスソースコードを貼り付けて、作成ボタンを押せば簡単に挿入用のコードが作成されます。
ただ、ちょっと意味が汲み取れないのがあって、
アドセンスコード個数：
複数個のアドセンスを文中に自動配置する場合、何個目のコードを生成するか指定します。
1つ目 2つ目 3つ目 つ目
この部分なんですけど。
複数個のアドセンスを文中に自動配置しようと思って、２つ目を選んでコードを作成したのですが、１個しかアドセンスが表示されませんでした。
アドセンスコードを二つコピペして作成してみたりしたのですが、そうすると二つ連続で表示されるだけで、私が意図した動きをしてくれませんでしたね。どうしたもんか。こちらも１時間くらい奮闘したのですが、よくわかりませんでした。
まぁ記事中の広告が２つも出るとウザい場合もあるので、これはこれでいいかと納得して、とりあえず取りやめです。また時間ができたらチャレンジしてみる予定です。
はてなの更新履歴も表示させてみる
このブログは過去記事を更新して記事の価値を高める必要すらない、趣味雑記ブログですが（苦笑）、情報系のブログだったりすると情報が古くなってたりする記事を更新したりするので、それに対するフォローも入れたいと思っていたところ。
これは、
リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ – つばさのーと
この記事を参考にしました。というか、丸パクリです。
いろいろ弄るのがめんどうなので、そのままコピペして、色だけ合わせました。
.lastmod {
color: #f0f0f0;
background-color: #111;
padding: 5px 6px;
text-decoration: none;
font-size: 90%;
display: inline;
margin-left: 10px;
}
このcolorのあとの#f0f0f0が文字色です。ので、自分のブログテーマと合わせた色に変更するだけです。
background-color: #111;の部分は後ろの色です。
この辺りのサイトで変えたい色を確認し、変更するだけですね。簡単です。これはさすがにすぐに出来ました。
終わり
というわけで、今日はゲームから離れてブログについてやってみたことをつらつらと書いてみました。このブログには特に何もしてないので、なんのこっちゃって感じですけどね（笑）
