Seesaaブログの記事下やサイドバーに広告を設置する方法【新システム】

Seesaaブログの記事下やサイドバーに広告を設置する方法

今回はSeesaaブログの前記事の記事下やサイドバーに広告を貼る方法を紹介していきます。HTMLで全てのページに広告を設置してスタイルシートで位置調整するような感じになります。

通常の広告であれば何でもOKですが、Googleアドセンスに関しては若干違う部分がありますので、アドセンス広告を設置する場合は以下の記事を参考にやってみて下さい。

Seesaaブログにアドセンスを設置する方法

MEMO

広告の用意ができてないという方はASPから広告を探しておいて下さい。

ASPの比較と選び方

Seesaaブログのサイドバーに広告を設置する

「デザイン」⇒「デザイン設定」⇒「コンテンツ」をクリック。

Seesaaブログのデザインコンテンツ

サイドバーにメニューから「自由形式」をドラッグ&ドロップして追加。

Seesaaブログに人気記事一覧を設置する方法-3

で、自由形式の「設定マーク」をクリック。

Seesaaブログに人気記事一覧を設置する方法-4

「名前」という部分はSeesaaブログでは表示されませんので適当でOK(表示させる事も可能なので後述します)。

それで自由テキストの部分には次のコードを入れます。

ここは後でスタイルシートで位置調整できるように名前「side-ad」という名前を付けておきました。後でスタイルシートで位置調整します。

自由形式はこんな感じになります。

Seesaaブログの記事下やサイドバーに広告を貼る方法-1

「ここに広告のコード」って書いてある部分を削除して広告のコードを挿入し「保存」。「保存」したらこの自由形式の画面は閉じてコンテンツ一覧の画面に戻ります。戻ったら再度一番下の「保存」をクリックして保存。

自由形式のタイトルを表示させるようにする場合

先程サンプルには自由形式の名前の部分(タイトル)に「おすすめの本」という表示を入れたのですが、Seesaaブログの場合は自由形式のタイトル(名前)がサイドバーには反映されませんので、これを反映されるようにするにはカスタマイズが必要です。
Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。

Seesaaブログに人気記事一覧を設置する方法-4

自由形式の「コンテンツHTML編集」をクリック。

Seesaaブログに人気記事一覧を設置する方法-6

HTMLが表示されます。1行目に以下のような記述があります。

これの直後に以下のコード1行を追加。

こんな感じになります。保存を忘れずに。

Seesaaブログに人気記事一覧を設置する方法-11

自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。

Seesaaブログに人気記事一覧を設置する方法-9

自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。

Seesaaブログに人気記事一覧を設置する方法-10

これで自由形式のタイトルが反映されるようになります。

最後に位置調整をします。「スタイルシート編集」のタブをクリック。

Seesaaブログスタイルシート編集画面

ここに色々コードが書いてありますが、一番下までスクロールして次のコードを追加。一応サンプル。

余白などの数値はお好みで変更しておけばOK。以上サイドバーに広告設置完了!

個別記事の記事下に広告を設置する場合

記事下に広告は結構クリック率の高い場所の1つ。基本的には「個別ページの記事下」と「トップページの記事下」2箇所に広告を設置しておけばOK。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリック。

SeesaaブログHTMLの編集

デフォルト(初期状態)のままならHTMLの94行目付近(デザインによって違うかも?)に次のようなコードがあります。

これは記事下のSNS(FacebookとかTwitterとか)のボタンを表示させる記述のスタート部分。SNSボタンの上に広告を設置したいので、先ほどのコードの前に以下のコードを追加。

ここでも後で位置調整できるように「ad-bottom」という名前を付けておき、後でスタイルシートで位置調整できるようにしておきます。ついでに念のため、「もし個別ページなら」という条件分岐をしておきました。深く考える必要なし。

以上記述ができたら「保存」。それで今度はスタイルシートで位置調整をしていきます。先ほど記事下の広告には「ad-bottom」という名前を付けておいたのでスタイルシートで位置調整。スタイルシート編集のタブに切り替え。

Seesaaブログスタイルシート編集画面

それでスタイルシートの一番下に次のように記述をします。一応サンプル。

以上で個別記事の記事下の広告設置は完了。

トップページの記事下に広告を設置する場合

先ほど個別記事の記事下に広告を設置しましたが、これだとトップページに広告は表示されません。という訳でトップページの下にも広告を設置してみます。

再度HTML編集タブに切り替えます。

SeesaaブログHTMLの編集

HTMLのコードがたくさん書いてありますが、初期状態なら162行目付近に次のようなコードがあります。

上記コードの「直前」に次のコードを追加。

もしトップページならという条件分岐(if:page_name eq ‘inde)を入れて、さらにこの部分も位置調整できるように「page-ad-bottom」という名前を付けておきます。追加できたら「保存」。

Seesaaブログの記事下やサイドバーに広告を貼る方法-2

後は位置調整なので、「スタイルシート編集」に切り替え。

Seesaaブログスタイルシート編集画面

スタイルシートの一番下に次のコードを追加。一応サンプル。

以上でPCページ記事下の広告の設置は完了ですが、広告が反映されるまでしばらく時間がかかる場合があるので、数時間は様子見をして下さい。

スマートフォンページへの広告設置について

一番重要なのがスマホページの広告ですが、スマホページにはブログサービス側が設置した広告が多く、自分の広告を設置する場所は限られます。

また、「記事タイトルの上」「記事タイトルの下」「記事下」などの重要なポジションはすでに取られているのが痛いところです

MEMO

一番収益を上げる事ができるスマホページがこの状態なので無料ブログは収益化には向いてません。

どうしてもスマホの広告を消したいという方はWordPressへの移行して下さい。ブログを収益化するならWordPress一択です。

WordPressと無料ブログの違いは?WordPressを始めるのに必要な物や料金

さて、ここまで書いてきた「記事下」や「サイドバー」などに設置した広告はスマートフォンでは表示されません

スマートフォン用の広告の幅はレスポンシブもしくは300pxがちょうどいい感じなので300×250とかの広告を設置したらいいかなと思います。

Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリックし、「記事下」という部分に「自由形式」をドラッグ&ドロップして設定マークをクリック。

Seesaaブログにアドセンスを設置する方法-7

それで自由形式の名前(タイトル部分)はスマートフォンでは反映されないので、「自由形式」のままでOK。その代わり自由形式のテキスト部分に次のように記述。

一応こんな感じになってたら大丈夫。

Seesaaブログの記事下やサイドバーに広告を貼る方法-3

追加できたら「保存」してこの自由形式画面を閉じる。コンテンツ一覧画面に戻るので再度「保存」をクリックして完了。

Seesaaブログにアドセンスを設置する方法-8

これ、「記事下」という所に自由形式を追加して広告追加しましたが、実際スマホで見ると、記事下には別の広告があり、その下に関連記事、さらにその下に自分の自由形式に入れた広告が表示されますのでこれはあまり効果ないかもです。

以上Seesaaブログの記事下やサイドバーに広告を設置する方法でした。

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

ブログの更新はこちらから

Seesaaブログの記事下やサイドバーに広告を設置する方法【新システム】”に10件のコメントがあります。

コメントの反映には時間がかかる場合があります。

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

CAPTCHA


  1. しげぞう 投稿作成者

    まいけん様

    返信ありがとうございます。そうです、記事投稿の最初にアイキャッチ画像を入れたらOKです。WordPressの場合は別にアイキャッチ画像を設定する項目があるのですが、Seesaaの場合は記事の最初に直接画像を入れておけば表示されると思いますので、一度試してみて、関連記事や最近の記事の部分にも画像が表示されるか確認してみて下さい。

    もし上手く行かない場合には再度コメント下さいませ。最近Seesaaはほとんど使ってなくて、WordPressばかりなので、多少変更している部分もあるかもしれませんので、その場合には再度調べてみますね。

  2. まいけん

    しげぞう様、いろいろアドバイスありがとうございます。恥ずかしい話ですが、アイキャッチ画像は本文の欄に画像を直接貼ればよいのでしょうか。参照記事を教えていただけませんでしょうか。

  3. しげぞう 投稿作成者

    まいけん様

    返信ありがとうございます。アイキャッチ画像は必須ではないのですが、あった方が見やすい感じですし、サイトの訪問者の方の離脱率も下がったりしますので、文章だけよりも画像があった方が良いと思います。

    アイキャッチ画像に関しては使い回しではなく、1つ1つ探して使う方がほとんどだと思います。最近はフリーの素材を探せるサイトも多いので探してみると良いと思います。ただ、注意点としてはフリーの画像でも画像の下などにクレジット表記(所有者、著作権者の名前など)が必要な物や、クレジット表記なしで使える物など種類がありますので、その点だけは注意してフリー画像を探して見て下さい。

  4. まいけん

    しげぞう様、素早いご回答ありがとうございます。私も連休中で、パソコンにゆっくり向き合えず、連休明けにやってみたいと思います。追加で伺います。アイキャッチ画像は記事を書く都度新しく入れていくものでしょうか。それともある程度、あらかじめ設定しておいて使い回しするものでしょうか。甘えすぎかもしれませんが、教えていただけないでしょうか。