comments trackbacks you may also like

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

2019年12月02日
FC2ブログ日記(カスタマイズの所感など)
0
#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. 次へ >
\チェック/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

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

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.
未分類 (0)
シン・胃がん闘病記 (31)
┣  AVANT: 癌の余命宣告~共存 (20)
┗  セントラルドグマ: 父親の胃癌 (11)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5948)
┣  胃がんブログ (285)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (85)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
がん のこと(ガン情報全般) (512)
┣  がんブログ (290)
┗  がんニュース (222)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (142)
┣  Amazonセール (2)
┗  📱kindleセール (139)
おもしろグッズ (11)
今日のエッセイ (114)
ニュース・芸能・話題 (778)
┗  転職・キャリアアップ (21)
占い・心理テスト (6)
恋愛・人間関係 (30)
終活ブログ (12)
グルメ (103)
┣  低糖質レシピ (25)
┗  お酒の飲み方 (2)
胃切除後の食事・レシピ (670)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (74)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (244)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (187)
┣  FC2ブログ日記(カスタマイズの所感など) (10)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhone の使い方・アプリなど (32)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)