2011年12月20日火曜日

jQueryプラグインの「Keep-in-View」をブロガー(blogger)に設置

MOONGIFTで紹介されていた、jQueryプラグインの「Keep-in-View」をブロガー(blogger)に設置してみました。いい具合で見えるところに張り付いてくれています。組み込みも簡単。

ソースはこちら。
$(function() {
   $("#(ウィジェットID)").each(function(){
      $(this).keepInView();
   });
});
ウィジェットID」については、こちらを参考に設定してみてください。

keepinview.js 自体の設置は次のとおり。 管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に jQuery を埋め込みます。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  <script language='javascript' src='http://(あなたのサーバー)/keepinview.js' type='text/javascript'></script>
</head>

わかりにくいですが、ここで言う「(あなたのサーバ-)」は、ブロガーのURLではなく、ご自身で管理する他のサーバーが必要です。自前のサーバーを用意できない方は、Keep-in-Viewのソースを丸ごと貼り付けて設置することも可能です。サンプルはこち

ブロガー(blogger)にJavaScriptを設置するには


↓ スクロールしても、見える位置に表示されています。

13 件のコメント:

  1. はじめまして。
    Bloggerをはじめて一ヶ月です。
    ページの通り打ち込みましたが、画面に出てきません。
    御指導よろしくお願いします。

    URLは
    http://konkokyo-mk.blogspot.com/
    です。

    (あなたのサーバ-)部分にはkonkokyo-mk.blogspot.comを入力しました。

    返信削除
    返信
    1. 関連記事を投稿させていただきました。参考にしていただければ、幸いです。

      http://programmer-jobs.blogspot.com/2012/02/bloggerjavascript.html

      削除
    2. 早速の返信ありがとうございました。言われるままやってみましたがダメでした。テンプレートには入力したままです。

      削除
    3. 設置したいのは、トップページでしょうか。
      3点、確認いただく必要があります。

      1, jQueryの読み込み
      2, Keep-in-Viewの読み込み
      3, 動作させたいウィンドウ(ウィジェットID)の指定

      削除
    4. 返信ありがとうございます。
      Keep-in-Viewとは、この画面で右下についている黒い箱のようなものですよね。
      下までスクロールしたらトップに戻れるようになるボタンを付けたいと思っています。
      動作させたいウィンドウ(ウィジェットID)の指定の意味がよく分かりません。
      私のページでは、左サイドバーと中央ブログと右サイドバー(テキスト、スライドショー、メルマガ登録、読者登録ガジェット)です。出来れば読者登録ガジェットの下に配置出来ると嬉しいです。
      また、Keep-in-Viewのデザインなどは変更可能なのでしょうか。
      小さいボタンにするとか、色を変えるとか。
      プログラム素人のため質問が的を外れてるかもしれませんが、
      どうぞ御指導よろしくお願いいたします。

      削除
    5. はい、「Keep-in-View」は、画面右下に見えている黒い帯状のウィンドウ(ウィジェット)です。
      もちろん、デザインの変更を行うことも可能です。

      金光教武蔵小杉教会さんのページに、下記URLの緑色と青色の部分を組み込んでいただき、
      http://programmer-jobs.blogspot.com/2012/02/bloggerjavascript.html

      青色の部分の直下に以下のソースを追加して、テストしてみてください。
      ---------------------------------
      <script>
      <!--
      $(function() {
      $("#Profile1").each(function(){
      $(this).keepInView();
      });
      });
      //-->
      </script>
      ---------------------------------
      プロフィール写真のウィンドウが固定されて表示されるようになれば、成功です。

      削除
    6. 返信ありがとうございます。
      指示通りさせていただきました。
      テンプレート保存も無事に。
      しかし、画面上何も変わりません・・・
      埋め込みの仕方が悪いのでしょうか。
      ウィジェットのテンプレートの展開はしなくて良いのですよね。
      それから、埋め込み時に改行の注意点とかあるのでしょうか。
      度々すいません。
      どうぞよろしくお願いします。

      削除
    7. 埋め込みを確認させていただきました。
      そうですね。改行がないために、うまく動作していないようです。
      改行がある状態で埋め込んでみて下さい。
      よろしくお願いいたします。

      削除
    8. ありがとうございます。
      しっかりと改行し、テンプレート保存をしたら、
      「The element type "head" must be terminated by the matching end-tag」
      のエラー。
      その後、前の状態(一単語指定とは違う場所がありました)に戻し、テンプレート保存したら成功したのですが、新たに数字の羅列が加わってました。
      そしてページ上は何も変わらずです。
      (このコメント欄ではHTMLそのままの正確な文字を打つとはじかれてしまいます。そのまま伝えたいのですが、どうすればよいでしょうか)
      本当にセンスが悪くてすいません。
      どうぞよろしくお願いいたします。

      削除
    9. テストページを設けてみました。参考にしていただければ、幸いです。
      黒い背景の「メルマガ登録」のウィンドウが該当部分になります。

      http://www.shigoto.3eeweb.com/konkokyo-mk.php

      削除
    10. いろいろとありがとうございました。
      もう少し上達したらやってみます。
      今後ともどうぞよろしくお願いいたします。

      削除
  2. もう一点。
    上記の操作後、Navberが下がってしまったのですが、原因は分かりますでしょうか。
    重ね重ねすいません。
    どうぞよろしくお願いします。

    返信削除
    返信
    1. Navberのズレが気持ち悪く、以前の状態に戻しました。
      いろいろとありがとうございました。
      またページ、伺います。
      ありがとうございました。

      削除