ナビゲーションリンクを記事と記事の間に表示させる方法 ＋ぷちカスタマイズ日記＋

ファンブログ　カスタマイズ　シンプル系スキン限定

---

今回は前回で作成しました「このページのTOPへ」のタグを記事に記述しないで、目的のページの HTML に直接追記する方法を説明します。

今回追記します HTML は「メイン」、「アーカイブ」、「1記事」になります。「メイン」と「アーカイブ」は記事と記事の間に、「１記事」の場合は記事とコメントの間に表示されます。

「メイン」と「アーカイブ」は10個の記事が繋がって表示されますので、必須です。「１記事」につきましては無理に入れる必要はないかもしれません。

---

HTML によって、多少場所は違いますが、追記するところの記述は全て同じなので、「メイン」から順番に入れていきます。追記する HTML のバックアップをとっておいてくださいね。

CSSやHTMLファイルのバックアップの方法

---

---

▼ ナビゲーションリンクを記事と記事の間に設置する方法 ▼

---

「メイン」の HTML を開きましたら、<!-- entry --> という記述を探してください。比較的上の方にありますので、スクロールすればすぐ見つかります。今回のリンク先に興味がある方は、この上に記述してあります、
<div id="container"> と <div id="main"> を探してみてください。今回のリンクはこの id で指定された場所に、飛ぶようにしてあります。

---

見つかりました、<!-- entry --> の真上に前回作成したタグを追記します。タグが繋がらないように2〜3回改行して上下に空きを作ってから追記してください。★指定する id★ には container か main を入れてください。
このようなナビゲーションは記事の右側に設置するのが基本なので、右寄せのタグも合わせて追記します。

---

</div>

<div align="right"><a href="#★指定するid★">このページのTOPへ ▲</a></div>

<!-- entry -->

---

追記ができましたら、「プレビュー(P)」で確認してください。記事と記事の間に「このページのTOPへ」のテキストリンクが表示されますので、押してみて目的の上部に移動できたら成功です。「保存(S)」を押して終了です。

同様に「アーカイブ」に同様のタグを追記してください。確認方法は「メイン」と同じです。
必要がある場合は「１記事」にも追記してください。表示されるのは、記事とコメントの間になります。

これで表示することはできましたが、記事間の空白の幅が気になる方は、スタイルシートで記事の下の空白を狭くする必要があります。こちらの作業は気になる方だけ行ってください。

---

▼ 記事の下の空白を狭くする方法 ▼

---

スタイルシートのバックアップを取りましたら、１番下の方に記述してあります、/* 記事表示部分 */ を探して、その下の項目の #entries .entry の margin-bottom: 30px; の数字を少なくしてみてください。
ちなみに私は 15px; に指定して狭く表示させていました。

---

/* 記事表示部分 */
#entries {
　　　　　　　　margin-bottom: 20px;
}
#entries .entry {
　　　　　　　　margin-bottom: 30px;
}

---

いかがでしたでしょうか？これで今後自動的に記事と記事の間にナビゲーションリンクが表示されます。
リンクの内容を変更したり、削除するのも HTML の記述を変更すれば、一発で変更したり削除することができますので、ぜひ、試してみてくださいね。

次回はこのナビゲーションリンクを記事の下部にグレーの文字で表示されます、投稿者：〜｜トラックバック(0)
の文字列の横に表示させる方法を説明しますですよ。(´・ω・`)ｂ

---

※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

---

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります