JQueryを使ってBloggerの空白部分を活用する方法

公開日 : 最終更新日 :

カテゴリー :

ブログなどサイドバーにタグリストやアーカイブリストなどいろいろと設置していると思います。ブログの記事本文が長かったりするとどうしてもサイドバーに空白部分ができてしまいます。そうなってしまうとサイドバーにたくさんパーツを設置したくなりますが、記事本文が短いとサイドバーだけやたら長くなってしまってよくありません。そうならないよう、JQueryを使って空白部分を上手に埋める方法を紹介します。

JQueryの追加

まずは、BloggerにJQueryを埋め込まないといけません。JQueryを埋め込む方法は「BloggerでJQueryを使う方法」をご覧ください。

次に、JQueryのコードを埋め込みます。以下が埋め込むコードになります。埋め込む場所は、JQuery本体を埋め込んだ行の次の行に入れてください。そうしないと以下のコードが動きません。

  1. 「テンプレート」→「HTMLを編集」をクリック
  2. 「続行」をクリック
  3. 以下のコードをJQueryを埋め込んだ次の行に入れる
  4. 「テンプレートを保存」ボタンをクリック
  5. 完了

JQueryコード

6行目の「if ($(this).scrollTop() > 1600){ 」の「1600」は適時変えてください。これは、ページのトップからどれくらいページをスクロールしたかの数字を指定しています。なので「1600」は、空白になる場所をスクロールして数字を書き換える形になります。

7行目と9行目の「$(‘#fixed-box’).slideDown(100);」「$(‘#fixed-box’).slideUp(100);」は、どのように空白部分にブログパーツを出すかを指定します。上記のコードの場合は、スライドして出るようにしています。「(100)」は出すまでの秒数です。「1」で1ミリ秒となり「1000」で1秒といった計算になります。数字が大きければ表示されるまでの時間がかかりますし、小さければ速く表示されます。秒数は指定しなくても大丈夫です。スライドして出す以外にも「fadeIn()」「fadeOut()」があります。こちらはフェードで表示されます。

次にCSSを追加します。CSSを追加する場所はBloggerの場合は以下の通りになります。

  1. 「テンプレート」→「HTMLを編集」をクリック
  2. 「続行」をクリック
  3. 以下のコードを「<b:skin><![CDATA[ 〜  ]]></b:skin>」の間に入れる
  4. 「テンプレートを保存」ボタンをクリック
  5. 完了

CSSコード

簡単なコードを埋めるだけです。Bloggerの場合は大丈夫だと思いますが、埋めたい場所に埋めれない場合は、「#fixed-box」前に埋めたい場所のidやclassを書いてください。

最後にHTMLコードを追加します。設置したいパーツが人それぞれだと思いますので、追加方法だけ紹介します。

  1. 「レイアウト」→「ガジェットを追加」をクリック
  2. 「HTML/Javascript」を選択
  3. タイトルを空白にしてコンテンツに設置したいパーツのコードを追加する
  4. 追加したコードをはさむように最初の行に「<div id=’fixed-box’>」、最後の行に「</div>」を追加する
  5. 「保存 」ボタンをクリック
  6. 完了

まとめ

これでスクロールして出来た空白部分に設置したパーツが表示されると思います。うまく表示されないパターンも多いかもしれませんが、そのときは、JQueryのコードかCSSが悪さしている場合が多いと思います。僕のブログの場合は、右側に1600ほどスクロールするとページトップに戻るボタンなどが表示されるようにしています。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>