ズボラ応援ブログ始めました

はてなブログでページによって異なるコンテンツを表示する方法

ブログ運営

はてなブログのトップページだけに表示したい情報がある場合や、記事ページだけに設定したいcssがある場合などに役立つ情報です。

はてなブログの特定ページだけにcssを適用する

はてなブログでは、記事一覧ページには「page-index」、各カテゴリーページには「page-archive-category」、記事ページには「page-entry」、aboutページには「page-about」、固定ページには「page-static_page」というクラスが設定されます。

クラス名 対象ページ
page-index 記事一覧
page-archive-category カテゴリーページ
page-entry 個別記事ページ
page-about aboutページ
page-static_page 固定ページ

下記の例では、recommend-boxというクラスの要素を記事一覧ページでのみ表示させるcssです。

.recommend-box{
display: none;
}
.page-index .recommend-box{
display: block;
}

各ページに使われているクラス名は、ページのソースを表示することで確認できますので、色々試してみてください。

トップページだけにおすすめ記事や人気記事を表示する方法ははてなブログのトップページカスタマイズ-ブログっぽさを無くすに書いています。合わせてご覧ください。

コメント

タイトルとURLをコピーしました