日々のコンピュータ情報の集積と整理

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

2014年5月28日水曜日

Blogger:ページの右下に常に表示されるナビゲーションへ「ブログ アーカイブ」への移動リンクを追加

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションへ「人気の投稿」への移動リンクを追加」では、リンクをクリックするだけでページ内の人気の投稿へ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、「ブログ アーカイブ」への移動リンクを追加します。


コード


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

ページのナビゲーション用のコードへブログ アーカイブへの移動リンクを追加

テンプレート→HTMLの編集にて、前回追加した<div id='page-navi'>要素に対して、以下の HTML を追加します。
             <hr />
   <a href='#BlogArchive1'>ブログ アーカイブへ</a><br />


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

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

            <a href='#page-top'>ページトップへ</a>
          <hr />
   <a href='#Feed1'>新着情報へ</a><br />
   <a href='#PopularPosts1'>人気の投稿へ</a><br />
          <hr />
   <a href='#BlogArchive1'>ブログ アーカイブへ</a><br />

        </div>

なお、ブログ アーカイブへのリンクのアンカーは各自の Blogger の環境により異なる可能性があるので、各自の新着情報の要素の id を確認して、id が BlogArchive1 ではない場合には、その id に変更して使用してください。

結果

以下のように、ページの右下の位置へ「ブログ アーカイブ」のリンクを設置することが出来ました。


ページの右下の位置へ「ブログ アーカイブ」のリンクを設置


この「ブログ アーカイブ」のリンクをクリックすることで、以下のブログ アーカイブの部分へジャンプできます。


「ブログ アーカイブ」のリンクでジャンプする先





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...