HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植（？）してみようと思います。正確には移植ではなく、デザインを拝借（パクリ？）する行為かと思います。
ライセンスは、クリエイティブ・コモンズとなっていますので、制作者のクレジット表示は必要です。
このテンプレートをふっと見て、シンプルで、暗めのトーンでありながら印象は暗くありませんし、このところ右サイトバーのデザインに飽きてきていますので、俄然創作意欲（？）を刺激されました（笑）。
01サイドバーはどうなっている？
サイドバーは、”position:fixed” で固定され、インナー要素に “display:flex;flex-direction:column;justify-content:center;” を指定して縦中央に表示しています。サイドバーのメニューコンテンツをクリックすると、メインのコンテンツがスムーススクロールします。
後は、読み込み時のアニメーションがきれいですから、できればこれも取り入れたいですね。
サイドバーに何を表示するかがキモですかね…。
02はてなブログのページ構成を見て考える
はてなブログは、表示するベージよって body タグに次のようなクラス属性をつけていますので、ページ内容によってサイドバーに表示するものを変えることはできます。
- トップページ（body のクラス属性：page-index）
設定で指定した記事数を次のページヘで順次表示するが、前のページヘはない - 記事ページ（body のクラス属性：page-entry）
- カテゴリーページ（body のクラス属性：page-archive page-archive-category category-カテゴリー名）
- 月間等アーカイブページ、検索結果ページ（body のクラス属性：page-archive）
- アバウトページ（body のクラス属性：page-about）
03サイドバーに表示するコンテンツの構想
トップページ
- メインコンテンツから表示分のタイトルを取ってきて、スムーススクロールのリンクを貼る
- 「次のページヘ」を表示する
- 可能なら、「前のページヘ」を表示する
以下は全てのページ共通 - 「ページトップへ」にスムーススクロールのリンクを貼る
- カテゴリー、月間アーカイブ等は、はてなブログ標準のサイドバー（id=box2）に表示し、スムーススクロールのリンクを貼る
記事ページ
- 関連記事（同カテゴリーの記事）を表示する
- 「戻る」でひとつ前のページに戻す
その他のページ
- 「トップページ」へのリンクを表示する
04ファーストビュー
トップページ
- カテゴリー、またはシリーズものなどの検索結果をアイキャッチ画像で表示する
その他のページ
- アイキャッチ画像を非表示とし、目的のコンテンツを表示する
こんな感じで進めてみましょう。