はてなブログ : アーカイブページをテーブルレイアウトの一覧表示にする

はてなブログ : アーカイブページをテーブルレイアウトの一覧表示にする

はてなブログのアーカイブページは、標準では各記事の日付・タイトルに加えてアイキャッチ画像・本文冒頭が表示され、一覧性に劣る。これを、日付・タイトル（・カテゴリ）のみをテーブルのように一覧表示するように、スタイルシートを変更する。

変更後のイメージ


例示するはてなブログでは、デザインテーマ「メモ帳」を使用している。これに後述のカスタムCSSを追記し、アーカイブページを以下のように変更する。

デザインCSSの内容

デザイン＞カスタマイズ＞デザインCSSを編集する。以下は、必要部分のみを示す。
.archive-entry-header {
    display: table;
    width: 100%;
    border: none;
    padding: 0;
}
.archive-entry-header .date {
    display: table-cell !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    width: 86px !important;
    text-align: right !important;
}
.archive-entry-header .entry-title {
    display: table-cell !important;
    padding: 2px 0 2px 1em !important;
    margin: 0 !important;
    font-size: 100% !important;
    font-weight: normal !important;
}
.archive-entry {
    position: relative;
    margin-bottom: 0 !important;
}
.archive-entry .categories{
    position: absolute;
    right: 0;
    bottom: 2px;
    margin: 0 !important;
}
.archive-entry .entry-thumb-link, 
.archive-entry .archive-entry-body {
    display: none !important;
}

※補足※

上記CSSは、ブラウザにAutopagerizeプラグインを使用している場合に、2ページ目以降の表示にも同じスタイルが適用されるよう考慮されている。具体的には、CSSの最下層の要素のみでスタイルを定義する。

Artikel Terkait

登録: コメントの投稿 ( Atom )