2018.04.30今回はSeesaaブログの前記事の記事下やサイドバーに広告を貼る方法を紹介していきます。HTMLで全てのページに広告を設置してスタイルシートで位置調整するような感じになります。通常の広告であれば何でもOKですが、Googleアドセンスに関しては若干違う部分がありますので、アドセンス広告を設置する場合は以下の記事を参考にやってみて下さい。⇒Seesaaブログにアドセンスを設置する方法MEMO広告の用意ができてないという方はASPから広告を探しておいて下さい。⇒ASPの比較と選び方Amazonや楽天のアフィリエイトは「もしもアフィリエイト経由」がおすすめの理由Amazonや楽天のアフィリエイトは認知度も高いので初心者におすすめのアフィリエイトです。個別記事の記事下に広告を設置する場合トップページの記事下に広告を設置する場合スマートフォンページへの広告設置についてSeesaaブログのサイドバーに広告を設置する「デザイン」⇒「デザイン設定」⇒「コンテンツ」をクリック。サイドバーにメニューから「自由形式」をドラッグ&ドロップして追加。自由形式の「設定マーク」をクリック。「名前」という部分はSeesaaブログでは表示されませんので適当でOK(表示させる事も可能なので後述します)。それで自由テキストの部分には次のコードを入れます。class="side-ad">ここに広告のコード</div>ここは後でスタイルシートで位置調整できるように名前「side-ad」という名前を付けておきました。後でスタイルシートで位置調整します。自由形式はこんな感じになります。したらこの自由形式の画面は閉じてコンテンツ一覧の画面に戻ります。戻ったら再度一番下の「保存」をクリックして保存。先程サンプルには自由形式の名前の部分(タイトル)に「おすすめの本」という表示を入れたのですが、Seesaaブログの場合は自由形式のタイトル(名前)がサイドバーには反映されませんので、これを反映されるようにするにはカスタマイズが必要です。Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。自由形式の「コンテンツHTML編集」をクリック。HTMLが表示されます。1行目に以下のような記述があります。module--free">これの直後に以下のコード1行を追加。-%></h3>こんな感じになります。自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。これで自由形式のタイトルが反映されるようになります。自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。これで自由形式のタイトルが反映されるようになります。最後に位置調整をします。「スタイルシート編集」のタブをクリック。ここに色々コードが書いてありますが、一番下までスクロールして次のコードを追加。*/}余白などの数値はお好みで変更しておけばOK。記事下に広告は結構クリック率の高い場所の1つ。基本的には「個別ページの記事下」と「トップページの記事下」2箇所に広告を設置しておけばOK。Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリック。デフォルト(初期状態)のままならHTMLの94行目付近(デザインによって違うかも?)に次のようなコードがあります。-%>これは記事下のSNS(FacebookとかTwitterとか)のボタンを表示させる記述のスタート部分。SNSボタンの上に広告を設置したいので、先ほどのコードの前に以下のコードを追加。%>ここでも後で位置調整できるように「ad-bottom」という名前を付けておき、後でスタイルシートで位置調整できるようにしておきます。ついでに念のため、「もし個別ページなら」という条件分岐をしておきました。以上記述ができたら「保存」。それで今度はスタイルシートで位置調整をしていきます。先ほど記事下の広告には「ad-bottom」という名前を付けておいたのでスタイルシートで位置調整。スタイルシート編集のタブに切り替え。それでスタイルシートの一番下に次のように記述をします。*/}以上で個別記事の記事下の広告設置は完了。先ほど個別記事の記事下に広告を設置しましたが、これだとトップページに広告は表示されません。いう訳でトップページの下にも広告を設置してみます。再度HTML編集タブに切り替えます。HTMLのコードがたくさん書いてありますが、初期状態なら162行目付近に次のようなコードがあります。-%>上記コードの「直前」に次のコードを追加。‘inde)を入れて、さらにこの部分も位置調整できるように「page-ad-bottom」という名前を付けておきます。追加できたら「保存」。後は位置調整なので、「スタイルシート編集」に切り替え。スタイルシートの一番下に次のコードを追加。*/}以上でPCページ記事下の広告の設置は完了ですが、広告が反映されるまでしばらく時間がかかる場合があるので、数時間は様子見をして下さい。スマートフォンページへの広告設置について一番重要なのがスマホページの広告ですが、スマホページにはブログサービス側が設置した広告が多く、自分の広告を設置する場所は限られます。「記事タイトルの上」「記事タイトルの下」「記事下」などの重要なポジションはすでに取られているのが痛いところです。MEMO一番収益を上げる事ができるスマホページがこの状態なので無料ブログは収益化には向いてません。してもスマホの広告を消したいという方はWordPressへの移行して下さい。ブログを収益化するならWordPress一択です。⇒WordPressを始めるのに必要な物や料金さて、ここまで書いてきた「記事下」や「サイドバー」などに設置した広告はスマートフォンでは表示されません。スマートフォン用の広告の幅はレスポンシブもしくは300pxがちょうどいい感じなので300×250とかの広告を設置したらいいかなと思います。Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリックし、「記事下」という部分に「自由形式」をドラッグ&ドロップして設定マークをクリック。それで自由形式の名前(タイトル部分)はスマートフォンでは反映されないので、「自由形式」のままでOK。その代わり自由形式のテキスト部分に次のように記述。/>ここに広告のコード</div>一応こんな感じになってたら大丈夫。追加できたら「保存」してこの自由形式画面を閉じる。コンテンツ一覧画面に戻るので再度「保存」をクリックして完了。これ、「記事下」という所に自由形式を追加して広告追加しましたが、実際スマホで見ると、記事下には別の広告があり、その下に関連記事、さらにその下に自分の自由形式に入れた広告が表示されますのでこれはあまり効果ないかもです。以上Seesaaブログの記事下やサイドバーに広告を設置する方法でした。⇒アフィリエイトの始め方と稼ぐ方法のまとめページに戻るスポンサーリンクスポンサーリンクSeesaaブログアフィリエイトとカスタマイズシェアするTwitter0Facebook0はてブ3Pocket1LINEコピーサイトのアクセスアップや稼ぐためにおすすめの無料レポート個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。返信ありがとうございます。記事投稿の最初にアイキャッチ画像を入れたらOKです。WordPressの場合は別にアイキャッチ画像を設定する項目があるのですが、Seesaaの場合は記事の最初に直接画像を入れておけば表示されると思いますので、一度試してみて、関連記事や最近の記事の部分にも画像が表示されるか確認してみて下さい。上手く行かない場合には再度コメント下さいませ。最近Seesaaはほとんど使ってなくて、WordPressばかりなので、多少変更している部分もあるかもしれませんので、その場合には再度調べてみますね。PMしげぞう様、いろいろアドバイスありがとうございます。恥ずかしい話ですが、アイキャッチ画像は本文の欄に画像を直接貼ればよいのでしょうか。参照記事を教えていただけませんでしょうか。返信ありがとうございます。アイキャッチ画像は必須ではないのですが、あった方が見やすい感じですし、サイトの訪問者の方の離脱率も下がったりしますので、文章だけよりも画像があった方が良いと思います。アイキャッチ画像に関しては使い回しではなく、1つ1つ探して使う方がほとんどだと思います。最近はフリーの素材を探せるサイトも多いので探してみると良いと思います。注意点としてはフリーの画像でも画像の下などにクレジット表記(所有者、著作権者の名前など)が必要な物や、クレジット表記なしで使える物など種類がありますので、その点だけは注意してフリー画像を探して見て下さい。PMしげぞう様、素早いご回答ありがとうございます。私も連休中で、パソコンにゆっくり向き合えず、連休明けにやってみたいと思います。アイキャッチ画像は記事を書く都度新しく入れていくものでしょうか。それともある程度、あらかじめ設定しておいて使い回しするものでしょうか。甘えすぎかもしれませんが、教えていただけないでしょうか。PMまいけん様コメントありがとうございます。関連記事の部分の画像はアイキャッチ画像だと思うのですが、記事の先頭に画像を入れるとその画像が反映されるかと思います。これを使うのかそれとも非表示にするのか一度考えてみる事をおすすめします。非表示にする場合などはお手数ですが、コメント下さい。その際に使用しているデザイン名も教えてもらえると助かります。それからヘッダー画像は入れる事ができます。これも利用しているデザインによって若干違う部分がありますので、もし分からない場合には再度コメント下さい。連休はちょっとバタバタなので、次の返信は来週になってしまうと思います、すみません。AMSeesaaブログでアフィリエイトを始めたばかりのまいけんと申します。image」の正方形のスペースができ、その下に以前の記事タイトルが出ます。修正方法の参考になる記事もしくはサイトを教えていただけるとありがたいです。2ヘッター部分には画像を入れられないのでしょうか。済みません、よろしければお時間あるときにお願いします。こちらのサイトでは、よく勉強させていただいております。ありがとうございます。PMトモ様コメントありがとうございます。通常アフィリエイト広告には表示回数(インプレッション数)を計測するためのタグ(imgタグ)が余計についてます。タグの改変は禁止されているASPが多いので改変はできませんが、このタグのせいで広告の下に無駄な余白ができてしまうパターンは多いです。どのような広告を設置されているか分かりませんが、一度「margin-bottom」の数値をマイナス(-50pxとか-40pxとか)で設定してみて試してください。それでも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。AMいつも勉強させて頂いておりますトモと申します。*/}上記のコードを追加して、数値をいくつに変えても全く反映されません。中央寄せは出来ているのですが上下の余白の調整だけが出来ません。:」でやってみても同じく変化なしで現状無駄な余白があり困っています。対処法を教えて頂ければと思いコメントさせてもらいました。PMmary様コメントありがとうございます。自由形式の作成ですが、「デザイン」⇒「コンテンツ」と進み、サイドバーに自由形式を追加はできてますか?それ自体でできない感じでしょうか?それとも自由形式の内容が反映されないのでしょうか?そこだけ再度教えて下さい。できれば試してみた手順も教えてもらえると助かります。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。【図解】Amazonプライム会員の友達紹介のやり方と手順。友達紹介キャンペーンは無料の会員登録でも報酬発生!Googleアドセンスの始め方。【初心者向け】WordPress(ワードプレス)でのブログの始め方と使い方まとめ!【初心者向け】CocoonでWordPressを始めるなら最低限やっておきたい設定13項目WordPressテーマ「Cocoon」を使うなら最低限入れておきたいプラグイン12選+1【図解】Cocoonのダウンロードとインストールの手順。Wing(コノハウイング)へ移転する方法と注意点まとめ【保存版】エックスサーバーのWordPress簡単移行機能の使い方と注意点まとめ【保存版】ロリポップの簡単引っ越し機能の使い方と注意点まとめ。設定方法は思っていたより簡単ですね~楽天アフィリエイトの紹介料は楽天ポイント。報酬を現金振り込みでもらう方法は2通り。博2020.02.04現在、楽天カード会員ですがゴールドカード会員に切り替えたい。【図解】楽天カードから楽天ゴールドカードに切り替えをする流れと注意点。返信ありがとうございます。シンプリシティだったんですね。質問1.試す記事は実際に投稿済みのものが良いです。下書きのものだと試せないと思います。早々にご連絡を頂きまして、ありがとうございました。スラッグの変更を試してみたのですが、うまくいきませんでした。コメントありがとうございます。サイトもサボっておりまして、すっかり情報も古くなってきてます、すみません。検索トップタイトルとURLをコピーしました。