はてなブログのトップページだけ適用するCSS

はてなブログでトップページ固定するのに、記事の時刻を生きている間に訪れないような年にセットするとか、うまいやりかたをおもいつかないので、CSSを使ったアイデアを思いついた。

html[data-page="index"] article,
html[data-page="index"] div.pager {
display : none;
}

デザイン設定のデザインCSSのところに埋め込む。

属性セレクターが対応しているブラウザならば、メインカラムが真っ白になるはず。できればトップページの表示件数は 1件にしておく。

ただし、これだと容赦なく広告が非表示となってしまいます。 Proユーザーでないひとは広告は表示するようにしておく必要がでてくるので、セレクターが面倒になってくるとおもう。（個別の記事には表示されるので、厳密にどこであっても広告非表示はだめなのかは問い合わせしないとわからないけども）

SEO での display: none の関係と、ウェブマスター向けの品質に関するガイドラインとかあるのでよく考えた上での使用となるかと思います。

あとは、JavaScript で要素を追加するか、Ajax で読み込むだとかでいいのかな。。

「くらげごはん。」というブログがトップページをカスタマイズされているかと。使いやすいのかどうかは別として。

で、つまりページがトップページかどうかは、セレクターをみるというかんじで。

(function(){
  var res = document.querySelector('html[data-page="index"]') 
    ? 'トップページです'
    : 'トップページではありません';
  alert(res);
})();

maRkの