インサイド シーナ

日々の備忘録(40代男性の場合)

【アドセンス】Internet Explorer 11(IE11)で、はてなブログのリンクユニットが表示されない時の対処方法

IE11でリンクユニットが表示されない

こんにちは。シーナと申します。

今回は非常にピンポイントに読者を選ぶ内容です。

Google アドセンスの広告ユニットの一つである「リンクユニット」のお話しです。

同様にお困りの方もいると思いますので、私の対処方法をご紹介します。

閲覧履歴の削除(キャッシュのクリア)ではありません。

あなたの参考になれば幸いです。

リンクユニットの配置について

当ブログでも「目次の上」(と「サイドバー」)に「リンクユニット」を配置しています。

「リンクユニット」を「目次の上」に配置するのがよいらしいという情報がありましたから、まずはその通りに設定してみました。

ブログの表示を確認し、当ブログの見た目との親和性も高いと判断しましたので、そのまま配置しています。

(今後、いろいろ配置位置は試行錯誤したいと考えています。)

さて、実際の設定に当り、「はてなブログ リンクユニット 目次上 自動」で検索しました。

やはり記事毎に手動で設定するのは現実的ではないですからね。

はてなブログをProに移行した後に、キーワードリンクを完全に無効化するためにすべての記事を再読み込みした時、独自ドメインに移行した後に内部リンクを修正した時、それぞれ(今より少ない記事数ですら)ものすごい手間が掛かりました。

もう3回目は、さすがにやりたくないと思いました。

大変ありがたいことに、先人の方が惜しみなく情報公開をしていただいていて、すぐに配置できました。

表示も問題なく、数日はそのまま運用していたのですが、Internet Explorer 11 で自分のブログを確認したところ、目次上のリンクユニットが表示されていないことに気づきました。

Internet Explorer 11 (IE11)でリンクユニットが表示されない?

あなたは自分のブログを確認する際に、複数のブラウザを利用していますでしょうか。

私はブログ作成はパソコン(Windows)の Google Chrome を利用しており、基本的に Chromeでしか確認していませんでした。

最近は、スマホからのアクセスが7割あることが分かりましたのでスマホでも確認するようにしています。

実はGoogle アナリティクスの使い方が最近になってやっと分かってきまして、当ブログの参照用のブラウザを確認すると、

1位:Safari

2位:Chrome

3位:Internet Explorer 11 (IE11)

の順で多いことが分かりました。

SafariとChromeが圧倒的に多いのですが、IE11も無視できないぐらい多いです。

へぇー、そうなのですね。

と思い、軽い気持ちでIE11で自分のブログを見てみました。

IEは仕事でしか使用しないと思っていました。

すると、配置したはずのリンクユニットが表示されていません。

それも目次上のものだけが表示されておらず、サイドバーのものは表示されています。

違いと言えば、自動で記事中に挿入するための設定をしていることぐらいです。

ブラウザによって見た目が微妙に変わるのはよいのですが、表示自体はされて欲しいです。

IE11でリンクユニットが表示されない状況の切り分け

Windows 7 と Windows 10 の両方からIE11で確認しましたが、やはり表示されません。

同じ端末から他のブラウザ(chrome等)では表示されます。

この時点でネットを検索したのですが、あまり情報がありません。

対処としてよく見かける閲覧履歴の削除(キャッシュのクリア)も一応試しました。

結果は変わりません。

私の状況には有効ではないようです。

そもそも一度もIE11で自分のブログを表示したことが無かったのですから効果がある訳がありません。

自分のブログだけなのだろうかと思い、他の方のブログをIE11で確認しました。

すると、表示されるブログとされないブログがあることが分かりました。

はじめは、はてなブログとその他のブログサービスの違いなのかと思いましたが、そういうことではありませんでした。

はてなブログでも表示されているブログはありましたし、使用しているテーマの違いでもありませんでした。

どうやら記事中への自動挿入の仕方の違いのようでした。

表示されないブログは、

私も参考にした方法で自動挿入していました。

IE11でリンクユニットが表示されない場合の対処方法

前置きが長くなりましたが、あなたのブログも同じような状況の場合は、改善するかもしれません。

最初に利用させていただいていた方法ですが、

私の認識が間違っている(利用の仕方が間違っている)可能性も大いにあるため、

明記することは避けさせてください。

現在、IE11でも表示されるようになった方法は、以下を利用しています。 

uxlayman.hatenablog.com

おそらく、はてなブログを利用して記事中にアドセンスを配置しようと思った場合、誰もが一度は確認される記事ではないでしょうか。

素晴らしい内容で、本当に感謝しかありません。

ありがとうございます。

もともと他の広告ユニットを記事中に自動挿入するために利用させていただいていたのですが、目次上という設定項目が無かったため、目次上だけは他の方法を使用していました。

他の広告ユニットは、IE11でも表示されていましたので、この方法を利用できないかと思いました。

この方法で生成されるコードを1箇所だけ修正すれば、目次上にも自動挿入させることが出来ました。

IE11でも無事に目次上のリンクユニットが表示されるようになりました。

具体的な対処方法

ステップ1:カスタマイズコードの生成

まず、上記の記事で以下の条件でコードを生成します。

目次上の場合です。

他の場所に挿入したい場合は、適時読み替えてください。

自動配置用広告コード:

取得したリンクユニットの広告コードだけをそのままコピペしてください。

広告コードは一切修正する必要はありません。

挿入箇所:

上から「1」個目の「大見出し(h3)」の「前」

※大見出し(h3)以外のチェックは外します。

アドセンスコード個数:

ここはあなたのブログの状況によって異なります。

すでにこの方法で記事中に広告を1つ配置している場合は、「2つ目」を選択します。

初めてであれば、「1つ目」となります。

2つなら「3つ目」です。

最初、私はここの設定の意味がよく分かりませんでした。

実際にコードを生成してみれば分かるのですが、これはアドセンスの広告ユニット(アドセンスコード)の数ではなく、このコード生成フォームで生成されたコードの個数+1を指定します。

一つのコード内にあなたのアドセンスの広告用コードがいくつあるかは関係ありません。

挿入箇所がなかったら:

表示しない

カテゴリーによる制限:

非表示にしたいカテゴリーがあれば設定してください。

この設定は必須ではありません。

ステップ2:生成されたコードの修正

以下の部分を探します。

var $targetElements = $('.entry-content h3');

はてなブログにおける目次は、「.table-of-contents」です。

そのため、以下のように赤字部分を修正します。

var $targetElements = $('.table-of-contents');

修正する箇所は、この赤字部分だけです。

これにより、先ほどの条件で生成したコードは、

上から「1」個目の「目次」の「前」に広告を挿入する

ことになります。

ステップ3:はてなブログへの設定と確認

後は、はてなブログにコードをコピペします。

Point

作成したコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。

コピペする場所は、デザイン ー カスタマイズ ー 記事 の「記事上」でも「記事下」でもどちらでも大丈夫です。

私は「記事上」にコピペしています。

IE11で表示されるか確認してみてください。

当ブログでは、この方法で無事に表示されるようになりました。

あなたのブログでも表示されるようになっていればよいのですが。

なお、作成したばかりの記事では表示されないことがあります。

作成してしばらく経った記事で確認してみてください。

終わりに

私は先人の皆さんに、たいへんお世話になっています。

先人の皆さんに倣い、私の経験が少しでもあなたのお役に立てばと思い、今後も自分が困ったものは情報公開していきたいと考えています。

 

それでは、また。

おすすめ記事です。

ブログ運営の作業用BGMに素敵な音楽があります。

www.inside-shiina.com

体重に優しいおやつがあります。特にラスクはおすすめです。

www.inside-shiina.com

カルディもおすすめです。

www.inside-shiina.com

普段の商品選択の参考になれば幸いです。

www.inside-shiina.com

おいしく食べた後はお口のお手入れも忘れずに行いたいです。

www.inside-shiina.com

メインのネット回線を変えることで通信費を下げることに成功しました。

www.inside-shiina.com