今回はSeesaaブログのサイドバーのコンテンツを追尾させる方法を紹介します。スクロールすると指定したサイドバーのコンテンツが追尾してくるアレね。ここに広告を設置する事もできますし、人気記事を追尾させてもいいですね。
追尾型コンテンツを設置する方法と手順
まず先に手順ですが
- HTMLにコード(スクリプト)を追加
- サイドバーに自由形式を追加
- 自由形式を編集する
という流れになります。
HTMLにスクリプトを入れる
まずは追尾するためのスクリプトをHTMLに入れていきます。管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして「HTMLの編集」タブを選択。
HTMLのコードの最初の方に「head」から「/head」で囲まれた部分があります。この「/head」の直前に次のコードを入れます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
もしこのブログで紹介している「ページの先頭に戻るボタン」を設置している場合にはこれと同じコードが追加されているはずですので上記のコードは不要です。
さらに以下コードも追加します。
<script type="text/javascript"> $(function() { var target = $("#scroll"); var targetTop = target.offset().top+$(".header").height(); var wrapH = $(".l-content").height(); $(window).scroll(function () { if($(window).scrollTop() >= targetTop) { if($(window).scrollTop() >= wrapH-target.height()) { target.css({position:"fixed",top:wrapH-target.height()-$(window).scrollTop()}); } else { target.css({position:"fixed",top:0}); } } else { target.css({position:"static"}); } }); }); </script>
上記2つのコードを「/head」の前に追加するとこんな感じになりました。
追加できたら「保存」を忘れずに。
サイドバーに追尾するコンテンツ(自由形式)を追加する
HTMLにスクリプトを入れたら次に「サイドバーの一番下」に自由形式を追加します。管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーの一番下に「自由形式」を追加。
次に自由形式の「設定」マークをクリックして「自由テキスト」の部分に次のコードを追加します。
<div id="scroll"> ここに表示したいコンテンツとか広告コード </div>
こんな感じで。
できたら「保存」をクリックして自由形式の画面を閉じ、コンテンツ一覧画面になるので再度「保存」で完了です。
これでブログを表示させ、スクロールすれば自由形式に追加したコンテンツが追尾してくるはずです。もしスクロールしても動かないという場合には「Ctrl」と「F5」を同時に押してリロードして確認してみて下さい。
自由形式のタイトルも一緒に表示させたい場合
通常自由形式を追加して「名前」の部分にテキストを入れてもブログでは表示されません。
この名前の部分をブログに表示させるためにはコンテンツHTMLにちょっと変更を加える必要があるので紹介していきます。
自由形式のタイトルを表示させるカスタマイズ
Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。
自由形式の「コンテンツHTML編集」をクリック。
HTMLが表示されます。1行目に以下のような記述があります。
<section class="module module--free">
これの直後に以下のコード1行を追加。
<h3 class="module__heading"><% parts.title -%></h3>
こんな感じになります。保存を忘れずに。
自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。
自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。
これで自由形式のタイトルが反映されるようになります。
以上Seesaaブログのサイドバーに追尾型の広告を設置する方法でした。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント