シーサーブログのスマートフォンページに広告を設置する方法

この記事はSeesaaブログの旧システム版です。新システムを利用している方はこちらの記事を参考に。
シーサーブログのスマートフォンページに広告を設置する方法【新システム】

今回はシーサーブログのスマートフォン版に広告を設置する方法を解説していきます。シーサーブログではPC版とスマートフォン版のテンプレートが別々なのでスマートフォンで広告を表示させるにはスマートフォン用の設定が必要です。

ちなみにGoogleアドセンスの広告貼り付け方法やちょっと違うのでこちらの記事を参考に。
シーサーブログにGoogleアドセンスを設置する方法

それと余談ですが、最近になって忍者admaxを利用しているサイト(アドセンスが使えないサイト)に関してはスマートフォンの広告だけ「忍者admax」ではなく「moba8」というサービスに切り替えました。

「moba8」はスマートフォン用の広告が豊富な大手のASPで、AndroidやiPhoneなどのアプリなどの広告も豊富に揃っています。もちろん無料で使えます。サイトも一度確認しておく事をおすすめします。
Moba8.net

「忍者admax」のようにクリックされるだけで報酬が発生する広告ではありませんが、元々スマートフォンで買い物をしたり、サービスの利用をする方ってそんなに多くはありません。でもアプリとかは結構インストールしてもらえたりします。

簡単に言うとPC用に表示させる広告は「忍者admax」でスマートフォンで表示させる広告は「moba8」を利用してアプリの紹介広告を設置しています。

個人的にスマートフォン用の広告設置にadmaxではなく、moba8に切り替えたのは単純にレポートを比べてみた時にmoba8の方がクリック率が高く、収入が増えたからです。

という訳なのでスマートフォン用の広告はadmaxでもいいですがmoba8の利用がベターだと思っています。どちらも設置の仕方は同じなので少しでも収益が欲しいというのであればmoba8で人気のアプリなどを紹介した方が良いと思います。
Moba8ネットの登録から使い方まで

さて、それでは早速スマートフォンページに広告を設定していきます。

スポンサーリンク

スマートフォンでも広告を表示させる設定

さて、本題だ。PC版でサイドバーや記事下に設置した広告はスマートフォンには表示されません。スマートフォンにはスマートフォンの設定が別に必要になります。

広告クリックはスマートフォンでも多いのでここにも設置をしておきましょう。広告のサイズとしては横幅300px前後がおすすめです。

シーサーブログの管理画面から「デザイン」⇒「スマートフォン」と進みます。

アドセンスs-2

スマートフォンのコンテンツをクリック。

アドセンスs-3

スマートフォンのコンテンツが表示されるのでその中から「記事」をクリック。

アドセンスs-4

「記事」の「挿入テキスト(上部)」と「挿入テキスト(下部)」というのがあります。これは両方設置する事も可能ですが、今回は記事下の方に表示させます。「挿入テキスト(下部)」の「+」部分をクリック。

アドセンスs-5

クリックしたらそこに次のコードを入れます。

<div class="smart-ad">
ここにadmaxもしくはnendのコードを入れる
</div>

ここでもまたクラス名を「smart-ad」と名づけておいて、後から位置調整をします。こんな感じになるはずです。

admax-ad-3

コードを入れたら下の保存をクリックして、この画面を閉じ、またスマートフォンのコンテンツ一覧画面になるのでここでも下の「保存」をクリックしておきます。

最後に位置調整をしていきます。シーサーブログではPC用のCSSとスマートフォン版のCSSは別に記述する必要があります(これ重要)。

シーサーブログの管理画面⇒「デザイン」⇒「スマートフォン」⇒「デザイン一覧」の順にクリック。

admax-ad-4

それでスマートフォンのデザイン(テンプレート)一覧画面の一番下に適応中のテンプレート名があるのでそれをクリック。

admax-ad-5

クリックしたらスマートフォン用のCSSがズラリ書いてあると思いますがその一番下に位置調整のコードを追加。

.smart-ad {
text-align : center;   /* 広告をセンターに */
margin-top : 10px;     /* 広告の上に余白 */
margin-bottom : 10px;  /* 広告の下に余白 */
}

後は保存を忘れずに。これでスマートフォン版の記事の下に広告が表示されます。

さらにもう1つ広告を追加する場合は今度は自由形式を追加して広告を入れます。シーサーブログの管理画面から「デザイン」⇒「スマートフォン」と進み、コンテンツをクリック。

adtuika-1

それで記事コンテンツの下にカテゴリーや過去ログなどスマートフォンで表示させたいコンテンツが並んでいるので広告を設置したい場所に自由形式を追加します。

adtuika-2

追加したら自由形式に広告コードを入れます。要領は一緒。さっきの広告と同じクラス名を付けているので、さっき追加したCSSで中央配置になります。

<div class="smart-ad">
ここにadmaxもしくはnendのコードを入れる
</div>

こんな感じね。

fc2-smart-ad-16

これで「保存」してスマートフォンの広告を確認しておきましょう。

とりあえず2箇所に広告を設置しましたが、もっと増やしたいという場合は「自由形式の追加」もしくは記事本文の途中に広告のコードを埋め込めばOKです。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

シーサーブログのスマートフォンページに広告を設置する方法”に5件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    >あいく様

    コメントありがとうございます。私自身一度覚えた事でもすぐに忘れてしまうのでブログにメモしておかないと次が上手くできない事が多いのです。なので他の方にも分かりやすいと言って頂ける事は本当に嬉しい事です。ありがとうございます。今後ともどうぞよろしくお願い致します。

  2. あいく

    はじめまして。
    ブログを始めたばかりで、全く分からなく困っていました。
    忍者の設定がすごく分かりやすく、丁寧で大変助かりました。
    とても素敵なサイトですね(*´ω`*)

  3. まさお

    さっそくのご回答ありがとうございます。

    スマホサイトとPCサイトの関係性のようなことはよくわかりました。
    やはり難しいのですね。
    私もゆくゆくはWordPressへの移行を考えていて、いろいろなことを現在勉強中です。
    今後も何かとお世話になることと思いますが、よろしくお願いします。

    まさお

  4. しげぞう 投稿作成者

    >まさお様

    コメントありがとうございます。普通の無料ブログの場合、ほとんどがPC用のページとスマートフォン用のページを別に作成されています。そのため同じページでもPC用とスマートフォン用ではURLも違う場合が多いです。スマートフォン用のHTMLを変更できるならスマートフォン用ページからPCページに飛ばす事もできるとは思いますが、シーサーブログの場合もスマートフォン用のHTMLを変更する事ができなかったと思います。そのため、スマートフォン用のページを自動的にPCのページに飛ばすというのはちょっと難しいかなと思います。

    無料ブログサービス側にとってもスマートフォンページからの広告収入というのが結構大きいと予想できますので、敢えてその辺は変更できないようにしているのかも知れませんね。どうしても広告を外したり自由度を上げようと考えるとやはりホームページとかWordPressのように独自ドメインでのサイト運営になると思います。どちらにしてもメリットとデメリットがありますのでよく考えて決めてみるといいかと思います。

  5. まさお

    いつもお世話になっています。
    貴サイトを参考にしながら、シーサーでブログを作りました。
    まだまだ途上でお見せできるようなものではありませんが…。

    ところで、私のところの場合、貴サイトのおかげで、PCサイトはシンプルでスッキリとできました。
    スマホで見たときにも十分見られます。広告の多いスマホ専用サイトよりむしろ見やすいくらいです。

    だから、スマホからでもPCサイトに飛ぶようにしたいのですが、不可能でしょうか?

    お時間のあるときにご回答いただけたらうれしいです。
    よろしくお願いします。

    まさお