【日常】はてな無料版でトップページを記事一覧表示に設定、一覧の中にアドセンス広告を設置してみた

ブログをカスタマイズ

2時頃に入眠。
9時頃に起床。コンサータを服用して待機。
10時頃に活動開始。ブログ探索。Twitter探索。
11時頃にブログをカスタマイズ。
15時頃に食事。
16時頃に引き続きブログをカスタマイズ。
22時頃に完了。日常系の記事作成にあたる。

今日の行動活動の深掘り内容は、

トップページを記事一覧表示するようにしてみた

記事一覧にアドセンス広告を表示するようにしてみた

です。

はてなブログ無料版だと、「設定」→「詳細設定」にてトップページの表示形式を一覧形式にできないのです。

そのため全文形式で表示され、トップページにいるのか、記事にいるのか、分かりにくい問題がありました。

日常系記事の場合は、記事編集画面の「続きを読む」を設定して、対策をしていましたが、まぁめんどくさいし、統一性がないし、ごちゃごちゃしてて嫌に感じてました。

それに、「続きを読む」を設定した下にアイキャッチ画像などを配置すると、Twitterなどでシェアした場合に画像が表示されない問題もありました。

くっっっっっっそ面倒だと思ったので、どうにか対策できないか調べてみました。

あった。

上の記事にて無料版でも記事一覧を表示するための設定方法がありましたので、さっそく設定を施しました。

内容は至ってたってシンプルで、トップページから「～/archive」（記事一覧）のURLへ自動で飛ばす仕組みです。

PCでの表示、スマホでの表示の場合で処理する内容が変わっています。

PCで表示する場合は最新の30記事ほどが一覧表示されます。

スマホで表示する場合は最新の5記事ほどが一覧表示されて、その下にもっと読むボタンが設置されています。
ボタンを押すとさらに5記事が表示される仕組みです。

はてなブログ無料を使っている人にはなかなか便利な機能でございます。

はてなブログProに移行するまではこれで乗り切りたいと思います。

トップを記事一覧表示にしたついでにアドセンス広告も表示させるように設定しようと思い挑戦しました。

挑戦したのは良いが、これがとてつもなく苦戦しました。

最初に参考にさせてもらったのが下の記事

しかしながら、広告が表示されませんでした。

なんとか、表示させようとあれこれコードをいじっても問題解決しませんでした。

コードが悪いのか、私の設定の仕方が悪いのか、どちらが分かりませんでしたので、以前に設定したコードで挑戦してみました。

このコードでアドセンス広告が表示されるのは確かなので、コードをいじって表示されるか挑戦するも表示はせれず。。。

あれこれ調べて、分かったのが広告を表示させるための『width』、つまり横幅が確保されていないのが原因でした。

記事内の場合は特に設定しなくても良いのですが、記事内以外だと自分で確保しないといけない感じです。

なので、CSSであれやこれやで横幅を確保したら表示される様になりました。

これで完璧！！！！

って思ったらスマホでは広告が表示されない。。。

ということで、PCの場合とスマホの場合で確保する横幅を変えてなんとか表示される様になりました。

今度こそ完璧！！！

って思ったら、理想と全然違うところに表示される。。。

こんちきしょ！！！
って思いながらあれこれコードをいじってやっと理想の場所に表示される様になりました。

長い闘いでした。。。

すぐに終わるだろうと舐めて掛かったら痛い目を見ました。

とりあえず、需要があるのかは分かりませんが、
トップページを記事一覧表示にする方法と記事一覧の中にアドセンス広告を設置する方法をもっと詳しく解説した記事を作ろうと思います。

結局今日は、キーワード選定も記事作成も何も出来ずに今日は終わりを迎えてしまいました。

以上。

毎日を生きる、そして活きる