~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月28日水曜日

Blogger:ページの右下に常に表示されるナビゲーションへ「前・次の投稿」への移動リンクを追加


スポンサーリンク

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションにマウスが乗ったら光るようなエフェクトを設定」では、ナビゲーションの上にマウスが乗ったら光っているように見えるエフェクトを設定しました。

今回はそのナビゲーションを改良し、「前・次の投稿」への移動リンクを追加します。


コード


そのため、改良した個所のコードのみ記載します。

ページのナビゲーション用のコードへ前・次の投稿への移動リンクを追加

テンプレート→HTMLの編集にて、前回追加した<div id='page-navi'>要素に対して、以下の HTML を追加します。
          <hr/>
   <a href='#blog-pager'>前・次の投稿へ</a><br/>


以上の修正により、ページのナビゲーションの HTML は以下のようになります。

        <!-- ページのナビゲーション -->
        <div id='page-navi'>

            <a href='#page-top'>ページトップへ</a>
          <hr/>
   <a href='#blog-pager'>前・次の投稿へ</a><br/>
          <hr />
   <a href='#Feed1'>新着情報へ</a><br />
   <a href='#PopularPosts1'>人気の投稿へ</a><br />
          <hr />
   <a href='#BlogArchive1'>ブログ アーカイブへ</a><br />
   <a href='#Label1'>ラベルへ</a><br />
        </div>

結果

以下のように、ページの右下の位置へ「前・次の投稿」のリンクを設置することが出来ました。

ページの右下の位置へ「前・次の投稿」のリンクを設置


この「前・次の投稿」のリンクをクリックすることで、以下の前・次の投稿の部分へジャンプできます。

「前・次の投稿」のリンクでジャンプする先

スポンサーリンク

コメントを投稿

コメント投稿機能について