シーサーブログの設定について

シーサーブログで「ページ内リンクをどうやって作るのだろう」と思って調べてみたら、簡単なものであればすぐに出来ました。作り方に悩んでいる方がいたら参考にしてください。

①ページ内リンクについて

ページ内リンクの目次を設定することは、読者が読みたい部分にすぐたどりつくという利点があります。

例えばですが、こんな記事のブログがあった場合

★2000年シドニーオリンピック陸上マラソンで金メダルを獲得しました。

2004年アテネオリンピック・体操・男子団体総合が金メダルを獲得しました。最後の鉄棒の演技の実況解説「伸身の新月面が描く放物線は、栄光への架け橋だ」が記憶に残っていますよね。

2008年北京オリンピック・フェンシング男子フルーレ個人で銀メダルを獲得しました。今までマイナー競技として扱われていたフェンシングに一躍注目が集まる瞬間となりました。

2012年ロンドンオリンピック・ボクシング男子75キロミドル級で金メダルを獲得しました。

2016年リオオリンピック・バドミントン女子ダブルスで金メダルを獲得しました。バドミントンの人気が急上昇しましたよね。★

このようなオリンピックに関する記事があったとします。
さかのぼって5大会のみの少しだけ書いた記事。
ただ、これがオリンピックの全競技・全メダリストの記事だと、本当に読みたい部分を探すのが大変です。

そこで、ページ内リンクを設定して読者が読みたいところにすぐたどりつく設定をしてあげるのです。
ただ、もちろん設定するにはコードが必要になります。

例えば、この記事の中で2012年ロンドンオリンピックの記事にリンク設定する場合。

まずは、ブログの目次をつくりたい場所に…だいたいブログのはじめになると思いますが。
こちらのコードを使います→目次</h3><a href=”#☆”>☆</a>
そして、2012年ロンドンオリンピックの前に<h3 id=”☆”>■☆</h3>

☆の部分には同じ言葉を入力してください。この設定で読みたい場所に移動できるリンク設定が出来ます。

同じように2016年リオオリンピックにも設定したい場合は、上記のコードを使えばもちろん出来ます。
意外とかんたんに設定できますよ。



②使用しているコード一覧

☆ページ内リンク設定で使用するコード☆(下記の<>は全角で記載してます。半角で使用してくださいね。またコード内の☆の部分を消して、そこにタイトルや目印となる文字を入力します。)

</h3><a href=”#☆”>☆</a>
<h3 id=”☆”>■☆</h3>

☆目次を枠でくくるコード☆(下記の△を半角の<>に変換して使用してくださいね。)

△div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px;border-color:#0000FF;background-color: lavender;width: 320px;”△



③最終確認

ここまで、シーサーブログにおける「ページ内リンクの目次のつくりかた」を書いてきましたが、ブログ初心者である私が調べたうえで設定しているものです。

もっとかんたんな設定方法やかっこいい??かわいい??目次をつくりたい場合は、ご自身で探してくださいね。