<< 退職届け・辞表の書き方(その2) | main | 第12号:アクセスアップの仕掛け >>

個別記事・サイドバーによるGoogle AdSenceとアバターの関係

このブログでは関係ないのですが、ライブドアブログを複数運営しています。そのブログ作成のときに、個別記事のところにサイドバーを取り付けたのです。

そうすると、Google AdSenceやアバターが表示されない不具合が起こりました。(*_*;

今現在は、このように不具合なく表示されています。

⇒ 高級ホテルに安く泊まろう!

allow0 ランキングに参加中!他にも役立つサイトがたくさんありますよ(^^)

allow0  メルマガでも情報発信中!
   メールアドレス: 

まず、この不具合を直すために参考にしたのが、こちらのブログです。

⇒ ブログカスタマイズ

では、早速その経過をみてみましょう。

まず、なぜ上手く表示されないのかという原因ですが、

【原因】
JavaScriptによる衝突だそうです。私も詳しいことは分かりませんが、衝突を起こさない方法をとれば、回避できるということになります。

【解決策】
外部からJavaScriptを呼び出す。インラインフレームを使って正常に表示させる。

【方法】
0.JacaScriptのソースの作成。
1.JacaScriptをどこかのサーバーにアップロードする。
2.ライブドアブログのプラグインを追加。
3.プラグインに、インラインフレームを呼び出すソースを貼り付け。
4.その際に、サイズを調整する。
5.プラグインを設定し、ブログの再構築。

【実際の流れ】
0.JavaScriptのソース。
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>アバター</title>

<style type="text/css">
<!--
body{
padding:0px;
margin:0px;
background-color:#fff;
}

.side{
font-size:x-small;
line-height:110%;
text-align:center;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

a.avatar_link:link{color:#333;text-decoration:underline;font-size:x-small;}
a.avatar_link:visited{color:#333;text-decoration:underline;font-size:x-small;}
a.avatar_link:active{color:#000;text-decoration:underline;font-size:x-small;}
a.avatar_link:hover{color:#999;text-decoration:none;font-size:x-small;}

-->
</style>

</head>
<body>
<div class="side">


<!-- ここにGoogle AdSenceやアバターなどのコードをコピペ -->


</div>
</body>
</html>

赤字のところに、ご自分のGoogle AdSenceやアバターのソースを貼り付けます。

ちなみに、ライブドアアバターのソースは、
<script type="text/javascript" src="http://img.avatar.livedoor.com/js/avatar.js"></script>
<script language="JavaScript" type="text/javascript">avatar("自分のライブドアID")</script>


また、Google AdSenceのソースは、
<script type="text/javascript"><!--
google_ad_client = "pub-******************";
google_alternate_color = "FFCCFF";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_channel ="9319724111";
google_color_border = "B0E0E6";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_url = "336699";
google_color_text = "333333";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

これをノートパッドなどでhtml形式で保存します。

1.JacaScriptをどこかのサーバーにアップロードする。
ご自分でご使用になられているサーバーがあればそこにFTPソフトなどを用いて、アップロードします。

2.ライブドアブログのプラグインを追加。
「blogの設定/管理」⇒「プラグインの追加」

3.プラグインに、インラインフレームを呼び出すソースを貼り付け。
<div align="center">
<iframe scrolling="no" marginwidth="0" marginheight="0"
frameborder="0" src="アップロードしたファイルのアドレス" width="" height="高さ">
</iframe>
</div>


4.その際に、サイズを調整する。
アップロードしたファイルのアドレス、幅、高さを変更。
Google AdSenceの場合は、幅は160、高さ600。
ライブドアアバターの場合は、幅は135、高さ205。

5.プラグインを設定し、ブログの再構築。

ε=( ̄。 ̄;)フゥ できた・・・

コメント
管理者の承認待ちコメントです。
  • -
  • 2007/04/25 6:33 PM
管理者の承認待ちコメントです。
  • -
  • 2007/05/21 7:51 PM
管理者の承認待ちコメントです。
  • -
  • 2007/05/21 10:06 PM
管理者の承認待ちコメントです。
  • -
  • 2007/06/07 4:49 AM
管理者の承認待ちコメントです。
  • -
  • 2007/06/12 7:09 PM
管理者の承認待ちコメントです。
  • -
  • 2007/06/14 7:40 PM
管理者の承認待ちコメントです。
  • -
  • 2007/06/19 6:00 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/10 6:50 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/11 7:31 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/11 11:04 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/12 6:20 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/12 9:09 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/19 6:25 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/24 11:07 PM
管理者の承認待ちコメントです。
  • -
  • 2007/07/25 12:04 AM
管理者の承認待ちコメントです。
  • -
  • 2007/09/07 9:00 PM
管理者の承認待ちコメントです。
  • -
  • 2007/09/10 5:59 PM
管理者の承認待ちコメントです。
  • -
  • 2007/09/11 10:52 PM
管理者の承認待ちコメントです。
  • -
  • 2007/09/14 11:32 PM
管理者の承認待ちコメントです。
  • -
  • 2007/10/03 9:31 PM
管理者の承認待ちコメントです。
  • -
  • 2007/10/31 1:38 AM
管理者の承認待ちコメントです。
  • -
  • 2007/11/01 10:47 AM
管理者の承認待ちコメントです。
  • -
  • 2007/11/02 8:17 AM
管理者の承認待ちコメントです。
  • -
  • 2007/11/02 12:57 PM
コメントする









この記事のトラックバックURL
トラックバック
recommend
出張なら
selected entries
categories
archives
links
profile
search this site.
others
mobile
qrcode
powered
無料ブログ作成サービス JUGEM