ヘッダーメニュー(グローバルナビ)に重なって表示されてしまうアクセス解析のバナー(アイコン)を移動させる方法 - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで

ヘッダーメニュー(グローバルナビ)に重なって表示されてしまうアクセス解析のバナー(アイコン)を移動させる方法

ヘッダーメニュー(グローバルナビ)に重なって表示されてしまうアクセス解析のバナー(アイコン)を移動させる方法

./image/entry/QBlog/20140606-1-00.gif

アメブロに、ヘッダーメニュー(グローバルナビ)と外部の無料のアクセス解析ツール(忍者、FC2、i2iなど)を導入した時、アクセス解析ツールの広告バナー(アイコン)がヘッダーメニューに重なって表示されてしまうことがあります。

バナーの表示は、無料で利用するための前提条件になっていると思われますので、表示されるのは仕方がありません。

ですが、ヘッダーメニューに重なった状態で表示されることは、読者さんが「誤ってクリック」してしまうリスクを高めてしまうため、少し移動してもらった方がいいかもしれませんね。

例えば、以下のように少し移動させるだけでも、誤クリックのリスクは格段に下がるでしょう。

./image/entry/QBlog/20140606-1-01.gif

というわけで、本記事では、ヘッダーメニュー(グローバルナビ)に重なって表示されてしまうアクセス解析のバナー(アイコン)を移動させる方法をご紹介します。

たいていの場合は、これらのアクセス解析ツールのバナーを移動させるのは比較的簡単です。

但し、今回ご紹介する方法はアメブロの「フリープラグインにタグが記述されている場合」に使える方法です。

例えば、「忍者アクセス解析の専用プラグイン」などはこの方法では移動できませんのでご注意ください。

アクセス解析のバナーを移動させる方法

それでは、実際のやり方です。

まず、フリープラグインに記述されているアクセス解析のタグを確認して下さい。

./image/entry/QBlog/20140606-1-02.gif

今回は、忍者アクセス解析のタグですが、他の無料アクセス解析も基本的には同様ですので、必要に応じて読み替えて下さい。

ここから、バナーを自由に移動できるようにするには、以下のように加工します。

./image/entry/QBlog/20140606-1-03.gif

つまり、アクセス解析タグの前に、

<div style="position:absolute; left:0px; top:0px;">

後に、

</div>

と追記します。

これでアクセス解析ツールのバナーを移動させる準備は完了です。

ただし、事前のカスタマイズ状況に応じてアクセス解析ツールのバナーの表示位置が大きく異なりますので、ひとまずこの時点で一度保存し、アメブロの方を確認してみて下さい。

そして、アクセス解析ツールのバナーが表示されている位置を確認できたら、そこからどの程度移動させるか、おおよその見当をつけて、先ほど追加したタグの中にある、

left:0px;

top:0px;

の部分の数値を変更します(マイナスも指定できます)。

「left」は横位置の調整、「top」は縦位置の調整に使います。

例えば2ピクセル右に、18ピクセル上に移動したい場合は、

<div style="position:absolute; left:2px; top:-18px;">

となります。

一度で移動させたい位置になることは少ないですので、少しずつ微調整しながら、最終的に希望の位置に表示されるように移動させるといいと思います。

注意事項

この方法を使うと、アクセス解析ツールのタグを、基本的にはページ内のどこにでも移動できてしまいますが、個々のアクセス解析ツールの提供者が定める利用規約をしっかり確認し、それに反する位置に移動させることのないよう、全て自己責任の範疇で実施してください。

もし規約がよくわからない場合は、移動するのはやめておかれる方がいいと思います。

以上、ヘッダーメニュー(グローバルナビ)に重なって表示されてしまうアクセス解析のバナー(アイコン)を移動させる方法をご紹介しました。

よかったら参考にして下さいね。

    最新の更新 RSS