CHROMA

世の中の "当たり前" を確認する

はてなブログのトップページで記事のヘッダー情報以外を隠す

Dev

はじめに

僕は割と長めの記事を書くことがあり、これが続いた時にトップページがやたらと長くなるのが気になっていました。また、はてなブログのデザインを自分で変更してみたかったのですが、トップページで記事を全表示されていては考えられるデザインの幅が制限される気がしました。

まぁ、こんな理由からヘッダー情報以外を隠すということをやりました。
( タイトルと記事につけたカテゴリーだけでは記事の内容が把握しずらいので、本文最初から数段落は出したほうがいいかも )

スタイルは html[itemtype="http://schema.org/ { ページ情報 } "] のように html に指定されている属性を使用して適用させました。

属性セレクタで各ページに指定するパターン

属性セレクタで指定していますので、IE7 以上、他のブラウザでも適用されるかと ( 表示確認していません ) 。

トップページでのみ、記事の本文とフッター情報を隠します:

html[itemtype="http://schema.org/Blog"] .entry .entry-inner .entry-content,
html[itemtype="http://schema.org/Blog"] .entry .entry-inner .entry-footer {
  display: none;
}

セレクタ対応参考:

ちなみに http://chroma.hatenablog.com/category/design のような Categoryページにも html の属性に [itemtype="http://schema.org/Blog"] が割り当てられているため、このスタイルは適用されます。

not セレクタでパーマリンク以外に指定するパターン

IE8 以下ではスタイルが適用されません。
not セレクタを使用してパーマリンク ( 単独記事ページ ) 以外では記事の本文、フッター情報を隠します:

html:not([itemtype="http://schema.org/Article"]) .entry .entry-inner .entry-content,
html:not([itemtype="http://schema.org/Article"]) .entry .entry-inner .entry-footer {
  display: none;
}

セレクタ対応参考:

最後に

2つ思いつきましたが、属性セレクタ使う方が良さそうですね。

余談

ちなみに ( Google Chrome 32.0.1700.77 で ) こんな感じになります:

f:id:thleap:20140128114427p:plain

追記

html の itemmap でページごとのスタイルを切り分ける方法を書いたけど、 body に振られているクラス属性 ( page-index とか ) で切り分れることに気づきました。