粘着

この「備忘録」はWordPressを使用していますが、「鑑賞記録」「山行記録」「渡航記録」はHTMLとCSSにJavaScriptを組み合わせて自前でビューをコントロールしているので、仕様変更の自由度は高いかわりに思い通りの見た目を作るのはなかなか大変です。今回、そこそこ大きな変更を行なったので、まさしく備忘録としてここに変更点を記しておくことにします。

まず、これまでの基本的なページの構成は次のようなものでした。

しかし、これだとWordPressによる「備忘録」の外観と合っていなくて何やら気持ちの悪さが残ります。そこで、ヘッダ部分を「備忘録」のサイズ（横幅1070px）に合わせ、メインコンテンツの上下にヘッダとフッタを置く（よくある）スタイルに変更することにしました。さらにこの際、右4分の1ほどを占めるナビゲーターがスクロールに伴い全部上に行ってしまうのではなく、スクロールの途中からナビゲーターの下端がいったん止まり、そのことによって画面の右よりが空白域になる問題を回避することにしました。 改定後のページの構成図はこんな感じ。

CSSで示すとこうです。

この中でナビゲーターがいったん止まる仕掛けは、「display: flex;」により並置した上で、ナビゲーターの一番下のパーツであるtwitterのタイムラインにのみ効かせるようにした「position: sticky;」で実現（ただしブラウザによっては効果なし）しています。本文とナビゲーターを<div id="container">で囲んでいるところがミソと言えばミソ。

その他、いろいろ試してみては元に戻すの繰り返し。HTMLとCSSの奥深さは限りがありません。