Seesaaブログにアフィリエイトの広告リンクを貼る方法

まあ、Seesaaブログは、アフィリエイトが許可されているので、普通に貼ればいいのですが、ちょっと工夫したいところです。そこで、いろいろと工夫の仕方を書いておきます。

削除できる運営側の広告は削除しておく

削除できるものは削除しておきましょう。基本的にPC画面は広告の削除が可能です。しかし、スマホ画面やフィーチャーフォン(ガラケー)画面からは広告が削除できません。

2020年現在、アクセスの55%ぐらいがスマホで、40%ぐらいがパソコン、5%ぐらいがタブレットと言う状況です。運営側はスマホのアクセスから利益を取ることに専念して、パソコンの画面はユーザーに明け渡している状況です。タブレットはどうなっているのか、私はタブレットを持っていないので、不明です。Seesaaに限らず、だいたい無料ブログはこんな感じです。

だから、パソコン画面の広告は全部削除してしまってもかまいません。たぶんできないとは思いますが、スマホ画面の運営側の広告を削除するのはやめましょう。アカウント停止になるかもしれませんし、何よりも無料ブログのサービスを閉鎖に追い込む危険が非常に高いからです。

Seesaaブログのデザイン編集(他のブログサービスでは、テンプレート編集とかテーマ編集と言う)は、パソコン画面とスマホ画面とフィーチャーフォン画面の三つに分かれています。「コンテンツ」というボタンをクリックすると、画面に出る「ブログパーツ」と呼んでいるブロックが表示されますので、広告のブログパーツを削除するか、ゴミ箱へ引っ張っていけばいいです。そして最後に忘れずに画面下の緑色の「保存する」のボタンをクリックしましょう。

具体的には、「バナー広告」と「ボックス広告」と「商品紹介」を消します。これらのブログパーツの右にある「×」ボタンを押すか、左下にある「ゴミ箱」に引っ張っていきます。いわゆるドラッグ&ドロップの操作を行います。そして最後に忘れずに画面下の緑色の「保存する」のボタンをクリックします。これを行わないと、操作が無効になります。

自由形式のブログパーツで広告を配置

自分の広告コードは「自由形式」のブログパーツに書き込んで配置します。

まず、自由形式のブログパーツを配置したい場所に引っ張っていきます。そして、歯車のマークをクリックして、「自由形式」と言う真っ白のボックスの中に自分の広告コードを貼り付けます。

広告コードは、基本的に、画面に応じて適切なコードを貼り付けます。たとえば、パソコン画面用のコードとスマホ画面用のコードが提供されているときは、パソコン画面にはパソコン画面用のコードを、スマホ画面には、スマホ画面用のコードを貼り付けます。シンプルですね。フィーチャーフォン用のコードというのは見たことがありませんが、どちらかを貼り付ければいいでしょう(無責任(笑))。確認する機械自体を持っていないので、わかりません。たぶん、今時、フィーチャーフォンでブログを読む人はまずいないので、無視してもいいかもしれません。ちなみに、私はスマホ用のコードを適当に貼っています。

記事本文へ直接広告コードを貼り付ける

普通は、上記までですが、Seesaaブログの場合、記事上、記事下の広告の配置位置が微妙で、あまりクリックされないと思います。まともなのは、サイドバーぐらいです。そこで記事の中に毎回広告コードを埋め込むことを推奨します。

WordPressのブログならプラグインでこれが簡単にできますが、あいにく無料ブログにはそういうものは用意されていないので、全部手動でやることになります。

そこで問題が発生するのは、パソコン用の広告コードとスマホ用の広告コードをどう切り分けるかです。記事の中に手動で広告コードを埋め込むと、パソコン画面でもスマホ画面でも、あるいは、フィーチャーフォンの画面でも同じものが表示されてしまいます。だから画面により切り替える必要があります。

広告コードを画面により切り替える方法

広告コードごとにdivで囲って、クラス名を付けて、切り替えます。

各広告コードの前に<div class=”クラス名”>をつけ、後ろに</div>をつけます。下がその例です。

<div class="pasokon-kokoku">パソコン用の広告コード</div><div class="sumaho-kokoku">スマホ用の広告コード</div>

そして、パソコン画面の「CSS/HTML編集」をクリックして、次に、使用している「デザインタイトル」の名称をクリックして、「スタイルシート編集の」ボックス内の一番下に次のコードを書き込みます。

/*以下は自分で追加した広告の表示切り替え設定 -----*/
.sumaho-kokoku {
display:none;
}

次に、「スマートフォン」をクリックして、「デザイン設定」をクリックして、使用している「デザインタイトル」の名称をクリックして、「スタイルシート編集の」ボックス内の一番下に次のコードを書き込みます。

/*以下は自分で追加した広告の表示切り替え設定 -----*/
.pasokon-kokoku {
display:none;
}

さらにフィーチャーフォン用の設定を行います。フィーチャーフォンではスタイルシートではなく、HTMLのhead部分にこのコードをを書き込みます。そこで、「フィーチャーフォン」をクリックし、「デザイン設定」をクリックして、使用している「デザインタイトル」の名称をクリックして、「HTML編集」のボックスの中の一番上の方を見ます。

すると、<head>と言うのがあるはずです。そのすぐ下でもいいのですが、サイトの題名を先に読ませたいので、<title>と</title>に囲まれた部分の下に、<style>と</style>を書いて、その間に広告表示の切り替え設定コードを書きます。具体的には下記のようになります。

<head>
  <title><% blog.title %></title>
<style>
/*以下は自分で追加した広告の表示切り替え設定 -----*/
.pasokon-kokoku {
display:none;
}
</style>

なお、クラス名、つまり「class=” ”」の引用符の中の文字列は何でもいいのですが、スタイルシートで使われていないクラス名を指定する必要があります。そこでまず絶対に使われていないと考えられる「pasokon-kokoku」と「sumaho-kokoku」を使ってみました。別に他の名称でもかまいません。ただ、後で見た際にわかりやすい名前にしておいた方がいいです。

それから、「/*以下は自分で追加した広告の表示切り替え設定 -----*/」は後で見た時にわかるようにするためのメモ書きなので、なくてもかまいません。「/*」と「*/」で囲まれている部分は無視されるようになっていますので、自分で適当な言葉に変えてもいいです。「-----」は目立たせるために書いてあるだけです。

これで記事本文に広告コードが適切に書き込めました。別に切り替えずに両方表示してもいいかもしれません。ただAdMaxだとパソコン画面では、スマホ用のコードの広告は表示されないようです。一方、スマホ画面では両方とも表示されます。ただ、広告の内容が違います。

パソコン画面用のコードとスマホ画面用のコードでは、広告の内容が違うので、最適化するのなら、どちらか一方が表示されるようにした方がいいかもしれないという考え方です。

なお、もし記事の中に広告が入るのがいやな場合は、これはやらない方がいいです。しかし、記事の中に広告を入れないと、なかなかクリックしてもらえないのではないかという気がします。

広告は多くなりすぎず、少なくなりすぎ、適当な量にした方がいいです。だいたい1ページに三つから六つぐらいが適当かと思います。記事中に配置する場合、400字~600字に一つぐらいがいいのではないかと思います。

あまり広告が多いと、ページの表示速度が遅くなりすぎて、訪問者は離脱する上に、検索での順位も下がってしまいます。検索順位が下がると訪問者が減ります。訪問者が減れば、広告を見てクリックする人も減ります。その点を忘れないようにした方がいいです。

広告を貼ったら、ページの表示速度がどうなっているのか、低速の回線でのろいデバイスを使って実測したり、表示速度を測定するサイトで調べるといいです。パソコンでもスマホでも、必ず4秒以内、できれば3秒以内に表示されるように調整しましょう。

関連ページ:
スマホとPCの割合が固定化 – 1月デバイス別シェア(マイナビニュース)
PageSpeed Insights(Google) ※ここで表示速度を確認するのがいいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする