【はてなブログ】ページ下に「同じカテゴリの記事一覧ページ」へのリンクを張る

 例えば「カレーの作り方」を知りたい人が「カレー 作り方」で来てくれたとして、その人はカレーのページを読み終わったら去ってしまう。しかし私としては「シチューの作り方」や「インド旅行」のページも読んでほしい。

   ↓ ↓ ↓

 記事の下に他のページへの導線が欲しい。

   ↓ ↓ ↓

 「カテゴリ」のリンクを張りたい。

実装

 はてなブログで記事のカテゴリを抽出して・・・みたいな方法は見つけられなかった。やはりWordPressなのか(知ったか)。

 なので「パンくずリスト」で代用してみた

トップ > ざつがく > 記事タイトル

↑の表示を↓のように書き換える

[ トップページ ] [ 【ざつがく】 ]


ソース

・管理画面→デザイン内「記事ページにパンくずリストを表示する」にチェック
・.page-entry = 記事ページ

.page-entry #container-inner{ position:relative }
.page-entry #container-inner{ padding-bottom:3.5rem }
.page-entry #top-box{ text-align:center;position:absolute;bottom:0;width:100% }
.page-entry #top-box .breadcrumb{ font-size:1rem;margin-bottom:0 }
.page-entry #top-box .breadcrumb-inner:before{ content:"[ " }
.page-entry #top-box .breadcrumb-inner:after{ content:" ]" }
.page-entry #top-box .breadcrumb-inner > .breadcrumb-link span:after{ content:"ページ" }
.page-entry #top-box .breadcrumb-gt{ font-size:0 }
.page-entry #top-box .breadcrumb-gt:before{ content:"] [" }
.page-entry #top-box .breadcrumb-inner > span span:before{ content:"【" }
.page-entry #top-box .breadcrumb-inner > span span:after{ content:"】" }
.page-entry #top-box .breadcrumb-gt:not(:first-of-type),
.page-entry #top-box .breadcrumb-child:last-child{ display:none }
.page-entry #top-box .breadcrumb,
.page-entry #top-box .breadcrumb-gt:before{ color:#3d3f44;font-size:.9rem }


やったこと

①パンくずリストの位置を記事タイトル上から記事下に変更②「>」と記事タイトルを消す③「トップ」の後ろに「ページ」を追加④カテゴリ名の前後に【】を追加※カテゴリは複数設定しても一つ目しか表示されない


学び

①「>」をどう消すか迷った。font-sizeを0にすることで存在を消しつつ、改行で発生する半角スペースも消した(inline-blockを並べたい時に発生しがちなアレ)②文字一文字分の長さの「em」という単位があるが、「rem」もあるらしい。こちらはルート要素の font-size (例えば、html 要素の font-size) です。←コピペ