ゆうらり Happy Smile
FC2ブログの複数記事をページ分割のように関連付けるにはどんな方法が?

FC2ブログの複数記事をページ分割のように関連付けるにはどんな方法が?

FC2ブログ日記-カスタマイズの所感など
2019/12/02 0
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#FC2ブログ #FC2ブログカスタマイズ #FC2ブログ日記 #ページネーション #ウェブデザイン #ブログカスタマイズ #FC2ブログの複数記事を関連付ける方法 #記事のページ分割 #aタグ #ブログ運営

FC2ブログの複数記事をページ分割のように関連付ける方法


FC2ブロガーのMです。先ほどの続きを。


ひとつの記事を複数ページに分割するメリットについて書いてきましたが、僕の使っているFC2ブログには、記事をページ分割する機能が搭載されていないのです。


あると非常に便利なんですけどね(^^;)


だからといって、何か似たようなことが出来ないものでしょうか?


別の記事番号になってしまった記事同士を、まるでページ分割したような感じで関連性を持たせることで、読者の方に連続してブログを読んで頂きたい。


これを実現させるために僕がおこなっているちょっとしたWebテク小ワザをご紹介します。

スポンサードリンク

FC2ブログの複数記事をページ分割のように関連性を持たせる方法

ブログを更新するとき、続けて読んでもらいたかったり、関連記事を表示させるのによく使われるのは、aタグでリンクを挿入してその記事への誘導を促したり、ブログカードを挿入するケースが一般的です。


しかしそれだと、あくまで別の記事というわけですから、続けて読んでもらえるかどうかは読者さんの興味次第となりますよね。


今回はそういうケースではなく、あくまで複数記事をワンセットとして読んでもらいたいような場合の話しということで…。


すなわち、FC2ブログの複数記事を、まるでページ分割したように関連付ける方法です。


これについて、僕の出した結論は非常に単純なもので、「キュレーションサイトのように、記事下にページ番号を挿入して、ページネーションで記事同士を移動できるようにリンクを貼ればイイじゃん」というのが答えでした( ̄▽ ̄;)

FC2ブログの複数記事をページ分割のように作ってみた

というわけで、久し振りにhtmlやcssといったウェブデザインの技術書を引っ張り出してきて、ページネーションを作ってみました。


▼html

<ol class="pagenation"><li><a href="https://〇〇〇〇〇/blog-entry-【1つ前の記事番号】.html">< 前へ</a></li><li class="currentpage"><a href="https://〇〇〇〇〇/blog-entry-【1番目の記事番号】.html">1</a></li><li><a href="https://〇〇〇〇〇/blog-entry-【2番目の記事番号】.html">2</a></li><li><a href="https://〇〇〇〇〇/blog-entry-【3番目の記事番号】.html">3</a></li><li><a href="https://〇〇〇〇〇/blog-entry-【次の記事番号】.html">次へ ></a></li></ol>

▼css

.pagenation {
overflow: hidden;
list-style: none;
margin-bottom: 2em;
padding: 0;
filter: drop-shadow(2px 0 2px rgba(85,85,85,.8));
}
.pagenation li {
float: left;
border-top: 1px solid #b9b9b9;
border-bottom: 1px solid #b9b9b9;
border-left: 1px solid #b9b9b9;
background: #e0e0e0;
font-weight: bold;
}
.pagenation li:first-child {
border-radius: 10px 0 0 10px;
}
.pagenation li:last-child {
border-right: 1px solid #b9b9b9;
border-radius: 0 10px 10px 0;
}
.pagenation li:hover {
background: skyblue;
}
.pagenation li a {
display: block;
padding: 5px 20px;
text-decoration: none;
color: #333333;
}
.pagenation a:hover {
color: white;
}
.pagenation li.currentpage {
background: #f6d7b6;
}

これをそれぞれの記事同士に貼ることで、長い文章や画像の重い記事を別にしたり、話題やテーマの異なる記事を複数に分けても、読者の方に連続して読んでもらえるようになりました。


しかし、よく考えずに作ってしまったデメリットをひとつ発見。3つの記事を想定して上のコードを作ったのですが、aタグの所にcssを指定しちゃったのです(汗)


この結果、関連付ける記事が2つだった場合に1つ分の要素を削ってしまうとデザインが崩れてしまうのに気付きました!また、現在のページ部分には、aタグを記述する必要がなかったんだ( ̄▽ ̄;)


今さらコードを作り直すのも面倒だ(汗)aタグを削らなくても済むための何か良い方法はないものか?


これについての解決方法は次のページで。


  1. < 前へ
  2. 1
  3. 2
  4. 3
  5. 次へ >

この記事が気に入ったら
いいねとシェアしよう!

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!

 0

There are no comments yet.
FC2ブログ日記-カスタマイズの所感など