ライブドアブログで途中からデザイン変更する
◆ ID は連番で大きくなっていくので どの期間の記事か判定して世代の class つける
◆ css でそのクラス名つき以下のみを対象にスタイル指定する
◆ css でそのクラス名つき以下のみを対象にスタイル指定する
全体を変えてしまうと 過去の記事の表示が崩れそう
今から後の記事だけに適用したいってときの方法を考えてみました
http://blogid.blog.jp/archives/12345678.html
数字のところが記事 ID です
ID はライブドアブログ通しての連番なので新しいのは大きくなります
ということは JavaScript で基準にする ID より大きいか判定すればよさそうです
で ID を埋め込めます
article タグを
にしておけば dataset から ID を取り出して article ごとに判定できます
こっちだと トップやカテゴリみたいな一覧系に記事本文を表示する方法でも対応できるからこっちのほうが便利です
こんな感じで世代ごとに css を用意して記事の ID から対象をみつけて disabled をはずすということができます
個別ページだとこれでいいですが トップやカテゴリみたいな一覧系も考えるなら ID をもとに世代を識別する文字をクラスに設定して css でそのクラスを読み込むといいかもしれません
こういうの
disabled は使わないで クラス名で各世代のスタイルのみ適用されるようにする
全体的なレイアウトじゃなくて本文のサイズや hr や code, blockquote などの細かい部分の見た目のつもりで書いていましたが 全体的に大きく変わるなら 新規ブログに移したほうがいいような気もします
いくつ作っても無料ですし
このブログもそろそろデザイン変えようかな~と思ってみたりもしますが 特にこうしたいって言うのもないのでたぶんしばらくこのままです
今から後の記事だけに適用したいってときの方法を考えてみました
シンプルに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 などの細かい部分の見た目のつもりで書いていましたが 全体的に大きく変わるなら 新規ブログに移したほうがいいような気もします
いくつ作っても無料ですし
このブログもそろそろデザイン変えようかな~と思ってみたりもしますが 特にこうしたいって言うのもないのでたぶんしばらくこのままです