Blogger:こまごま変更(2)過去の記事一覧へのページ内ジャンプを作る

前の関連記事：Blogger:こまごま変更(1)ブログタイトル色変化、「続きを読む」→｢続き」から表示しない

Blogger:ページナビの横に「上に戻る」ボタンを作ると同じ手法で今度はページの下部にある「過去の記事」ガジェットへ飛ぶボタンをページ上部に作ってみました。

ジャンプ先の設定。a name="ジャンプ先の名前">ガジェットタイトル</a>を作る。

このブログではブログアーカイブガジェットを配置しています。

「過去の記事」というタイトルのものです。

ページの上部からこの最下部にある「過去の記事」までスクロールするのは面倒なのでこの「過去の記事」にページ内ジャンプを設定してパッと移動できるようにします。

管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→BlogArchive1へ飛びます。

<b:widget id='BlogArchive1' locked='false' title='過去の記事' type='BlogArchive'>
              <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

4行目の<data:title/>がガジェットタイトルなのでこれにnameをつけます。

    <h2><a name='kako_kiji'><data:title/></a></h2>

4行目をこのように書き換えました。kako_kijiという名前にしました。

ところがこのままではマウスカーソルが上にくるとhoverの設定でフォントが変化してしまいます。

そこでBlogger:ページナビの横に「上に戻る」ボタンを作ると同様にしてhoverのときに元のフォント設定を上書きするようにします。

このガジェットのh2タグに限定して設定したいのですがこの部分にはclassが設定されていません。

といういことでこの部分にh2_nonlinkというclassを設定しその部分を元のh2タグのフォント設定に上書きすることにします。4行目のガジェットタイトルの部分は以下のようになります。

<b:widget id='BlogArchive1' locked='false' title='過去の記事' type='BlogArchive'>
              <b:includable id='main'>
  <b:if cond='data:title'>
    <h2 class='h2_nonlink'><a name='kako_kiji'><data:title/></a></h2>
  </b:if>

h2の元の設定は<b:skin>の中に見つけられます。

/* Headings
----------------------------------------------- */
h2 {
font: bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-transform: uppercase;
color: #888888;
margin: .5em 0;
}

これが元の設定ですのでgadget_taitoruクラスのh2タグの上にマウスカーソルが来たときに色を#888888に戻してさらに下線を表示させないためにtext-decoration:none;にします。

.h2_nonlink a:hover {
text-decoration:none;
color: #888888;
}

]]></b:skin>の直前にこれを書き足します。

これでジャンプ先の設定ができました。

ジャンプ元の設定。HTML/JavaScriptガジェットで作る。

サイドバーの上のほうに「過去の記事一覧へ」というリンクを作ります。

管理画面→レイアウト、ガジェットを追加→HTML/JavaScriptを追加します。

タイトルは空欄のままコンテンツに

<h2><a href='#kako_kiji'>過去の記事一覧へ</a></h2>

をいれて保存します。

レイアウト画面でこのガジェットを表示させたいところに移動させて「配置を保存」をクリックします。


これで完成です。

ガジェット間の空白を小さくしたい

完成したもののガジェット間の空白が大きすぎて間抜けな感じです。

[blogger]もっと詰めて！サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記) - Sunabox

この方法を利用させていただきました。

空白を詰めたいウィジェットの名前を調べます。

今回ガジェットのタイトルを空白にしたのでそのうえにある「過去1週間の訪問数」というtitleのウィジェットをHTMLの編集で検索してこの「過去の記事一覧へ」のガジェットを入れているウィジェットを探します。

<b:widget id='Stats1' locked='false' title='過去1週間の訪問数' type='Stats'>

の下にtype='HTML'のウィジェットがあります。

<b:widget id='HTML3' locked='false' title='' type='HTML'>

これが「過去の記事一覧へ」のガジェットを入れているウィジェットで、HTML3というidがついています。

これのmarginをマイナスに設定して空白を詰めます。

#HTML3{margin-top:-20px;margin-bottom:-20px;}

]]></b:skin>の直前にこれを書き足して保存します。

ちゃんと空白が詰まりましたね。

ところがテストブログではうまくいったこの方法は本番のこのブログでは全く反映されませんでした。

<b:widget id='HTML3' locked='false' title='' type='HTML'>
    <b:includable id='main'>
      <div style='margin-top:-20px;margin-bottom:-20px;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
 </div>
</b:includable>
  </b:widget>

<b:skin>には書き込まず上記のようにHTML3ウィジェットのmainインクルードを丸ごと<div style='margin-top:-20px;margin-bottom:-20px;'>で囲ったらうまくいきました。

3行目と13行目が追記した部分です。

参考にしたサイト

[blogger]もっと詰めて！サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記) - Sunabox
ガジェット間の空白を詰める方法