2014年10月19日日曜日

【Bloggerいじり】目次を作って、ページ内ジャンプさせる

前回の記事は結構長文になりました。
なので、読みやすいように目次を作りました。
目次のリンクをダブルクリックすると、記事内の指定の場所へジャンプするようになっています。
2014-10-19 12_01_42
こちらの記事を参考にしました。
(参考)
ページ内ジャンプ HTML <a>

今回はこのやり方について解説します。
Windows Live Writerではなく、直接Bloggerの編集画面でやることをおすすめします。



1.まずはジャンプ先となる文字列を決める

最初に記事の本文を完成させます。
次に目次からのジャンプ先となる文字列の書式を設定します。
この記事では、通し番号とソフトの種類を書いている文字列の書式を「見出し」に設定します。
2014-10-19 12_04_05

 

2.ジャンプ先となる文字列にIDを設定する

ここからは、ちょっとHTMLの知識が必要となってきます。
先ほど書式を設定したジャンプ先となる文字列を、HTML編集画面をみると次のようになっています。Bloggerで見出しの設定をするh2のタグが付きます。
<h2>ジャンプ先となる文字列</h2>
この文字列に対して次のようにIDを設定します。
<h2 id=”任意のID”>ジャンプ先となる文字列</h2>

実際の記事では、例えば「9.スクリーンショット」という文字列に「soft09」というIDを設定しています。
<h2 id=”soft09”>9.スクリーンショット</h2>
と、なります。
2014-10-19 12_30_14

 

3.ジャンプ元となる目次にリンクを設定する

全てのジャンプ先にIDを設定したら、記事の冒頭部分に目次を作ります。
先ほど「任意のID」を設定した文字列へのリンクを設定する場合、HTML編集画面でジャンプ元となる文字列を次のようにします。
<a href=”記事のURL#任意のID”>ジャンプ元となる文字列</a>

実際の記事では、例えば「9.スクリーンショット」へのリンクは次のようになっています。
<a href=”http://mainichiyasumi.blogspot.com/2014/10/windows7-soft-1410.html#soft09>9.スクリーンショット</a>
Bloggerの場合、記事のURLをきちんと書かないとジャンプしてくれないので注意です。
2014-10-19 12_02_17
すべてのリンクを設定したら作業終了です。
HTMLの知識が必要とは書きましたが、それほど難しくはないので試しに使ってみませんか?

0 件のコメント:

コメントを投稿