2011年11月04日

アフィリブログのサイドバーに広告をキレイに入れる方法

海信です。

アフィリエイトブログはHTMLのほとんど編集なしでキレイなブログを作ることが可能です。純正で備わっている色々な機能を使えば、ちゃんとレイアウトされたキレイなブログが出来上がるってことですね。

しかし、ちょっと待ってくださいね。やっぱり必要最低限のHTMLは知っておきたいし、この際だから、サイドバーの広告を上手に表示させるやり方で、少し勉強をしましょう。

シーサーブログを題材にしてます。とても簡単ですから、ご自身のブログでもやって見てくださいね。

シーサーブログでサイドバーのカスタマイズ


では、できるだけ簡単にいきましょうね。

まずは、広告を入れる位置ですが、サイドバーに広告を入れる場合は、もう、絶対に一番上が良いと思います。

広告のレイアウトについては、もう一つ記事を書きますからそちらを参照頂くとして、ここにキチっとHTMLを使って広告を入れるとブログがキレイに仕上がりますよって話ですね。

以下のブログのキャプチャーを見ましょう。

image04.gif

image03.gifサイドバーの一番上に広告をつけてますが、拡大するとこうなりますね。

「モバイルの方はこちら」と言うサイバーのタイトルがあって、白い枠がちゃんとついていて、中に広告バナーが入ってますね。

これの作り方をやって見ましょう。

シーサーブログの管理画面から「デザイン」から「コンテンツ」をクリックします。そこにブログのレイアウトがでているはずです。こういう感じですね。

image06.gif

左側のコンテンツモジュール(「モジュール」は「部品」と言う意味です)はドラッグアンドドロップで自由に出し入れが出来ます。「自由形式」をサイドバーの一番上に持っていきましょう。

持ってきたら、自由形式のリンクをクリックします。編集画面が出るはずです。
タイトルは解りやすいタイトルをつければいいです。この編集画面のタイトルはブログには反映されません。管理上解りやすくするためだけのタイトルです。(「アフィリリンク」くらいでいいでしょう)

では、参考ブログのソースを見てみましょうね。

<!--ここから-->

<div class="sidetitle">モバイルの方はこちら</div>
<div class="side">

モバイルですらっと宣言を見る!<br />
<a href="http://px.moba8.net/svt/ejp?a8mat=1TZ2AM+5AIQCY+F0U+BYDTT&guid=on">
<img border="0" width="180" height="49" alt="" src="http://www21.moba8.net/svt/bgt?aid=110810974320&wid=001&eno=01&mid=m00000001947002008000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www11.moba8.net/0.jpg?a8mat=1TZ2AM+5AIQCY+F0U+BYDTT&guid=on" alt="">

</div>

<!--/ここまで-->

<div class="sidetitle">と</div>(閉じdiv)の間に、広告に誘導するようなキャッチな表現を入れます。今回の場合は「モバイルの方はこちら」ですね。

で、<div class="side">から</div>の間に、アフィリエイトバナーコードを入れればOKと言うことです。

これで、保存して、レイアウトの管理画面で「設定を保存する」のボタンを押せば、瞬時にここでやった設定はブログに反映されます。簡単ですから、やって見てくださいね。

当ブログのサイドバー部分もソースで確認してくださいね。シーサーブログは、おそらくほとんどのテンプレートでこのやり方でOKと思います。

リンク集を作る場合なども、管理画面のデザインタブから「コンテンツ」をクリックして、リンク集のモジュール(部品)をドラッグ&ドロップの簡単な操作で作ることが出来ますが、ブログを量産していくと、自由形式のモジュールをカスタマイズして作る方がはるかにスピードアップします。

このやり方は応用すれば、ほとんどどの無料ブログでも大丈夫と思います。ぜひ参考にしてキレイなブログを作ってくださいね。

posted by 海信@さゆり塾応援団 at 02:33 | Comment(0) | キレイなアフィリエイトブログの作り方 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。