◆ ID は連番で大きくなっていくので どの期間の記事か判定して世代の class つける
◆ css でそのクラス名つき以下のみを対象にスタイル指定する

全体を変えてしまうと 過去の記事の表示が崩れそう
今から後の記事だけに適用したいってときの方法を考えてみました

シンプルにURLで

デフォルトの URL はこんな感じです

http://blogid.blog.jp/archives/12345678.html

数字のところが記事 ID です
ID はライブドアブログ通しての連番なので新しいのは大きくなります

ということは JavaScript で基準にする ID より大きいか判定すればよさそうです

ID をちゃんと使う

URL をデフォルトから変えていても

<$ArticleId$>

で ID を埋め込めます
article タグを

<article data-article-id="<$ArticleId$>">~

にしておけば dataset から ID を取り出して article ごとに判定できます
こっちだと トップやカテゴリみたいな一覧系に記事本文を表示する方法でも対応できるからこっちのほうが便利です

css 切り替え

<link id="until12345678" rel="stylesheet" href="/until12345678.css" disabled/>
<link id="until22223333" rel="stylesheet" href="/until22223333.css" disabled/>
<link id="latest" rel="stylesheet" href="/latest.css" disabled/>
<script>
// id に応じて link の disabled をはずす
</script>

こんな感じで世代ごとに css を用意して記事の ID から対象をみつけて disabled をはずすということができます

個別ページだとこれでいいですが トップやカテゴリみたいな一覧系も考えるなら ID をもとに世代を識別する文字をクラスに設定して css でそのクラスを読み込むといいかもしれません

こういうの

article.generation-level1 {
font-size: 16px;
}
article.generation-level2 {
font-size: 14px;
}

disabled は使わないで クラス名で各世代のスタイルのみ適用されるようにする


全体的なレイアウトじゃなくて本文のサイズや hr や code, blockquote などの細かい部分の見た目のつもりで書いていましたが 全体的に大きく変わるなら 新規ブログに移したほうがいいような気もします
いくつ作っても無料ですし


このブログもそろそろデザイン変えようかな~と思ってみたりもしますが 特にこうしたいって言うのもないのでたぶんしばらくこのままです