読者です 読者をやめる 読者になる 読者になる

彼女からは、おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

はてなダイアリーの公式テーマ「4chairs-lime」にひと手間加えてみた(2) - サイドバーの「最新タイトル」(section モジュール)を見やすくする

デザイン ブログ

前回のエントリー、「はてなダイアリーの公式テーマ「4chairs-lime」にひと手間加えてみた(1) - 画面下部に吹っ飛んでしまったサイドバーをあるべき場所に戻す」のつづきです。


はてなダイアリーのサイドバーの「最新タイトル」(section モジュール)がもっと見やすくなるように、少し手を加えてみました。

Before

4chairs-lime」デフォルトの状態は、次のような感じ。エントリーとエントリーの境目が分かりにくいように感じました。


After

対して、編集後。各エントリーの間隔を少し広げたり、ちょっとした画像なんかも取り入れたり。あ、それと、見出し中のカテゴリーを非表示にしました。


スタイルシート

各エントリーの左に表示させている画像は、これまで使用していた公開テーマ「はてブ2」のものをそのまま流用しました。


各エントリーの間隔は、お好みで。

/* sidebar */
div.hatena-module-section ul.hatena-section li {
    background: #fff url('http://b.hatena.ne.jp/images/page.gif';) no-repeat scroll left 5px;
    margin-left: 0.05em;
    padding-left: 1.2em;
    padding-bottom: 0.8em;
}


それと、ついでと言ってはなんですが、サイドバー全体に影響する箇所も書いておきます。各ブログパーツを線で囲んだりしています。ここで使用している角丸画像も「はてブ2」から流用。

div.hatena-module {
    background: url('http://b.hatena.ne.jp/images/b_group/sidebox_bottom.gif') no-repeat scroll center bottom;
    margin: 0 0 15px 0;
    padding-bottom: 5px;
}

div.hatena-modulebody {
    background-color: #fff;
    border-color: #ccc;
    border-style: solid;
    border-width: 0 1px;
    padding: 0.7em;
}


これもさらについでですが、見出し中のカテゴリーを非表示にする方法。section モジュールの showcategory を false にしてやればよいです。

<hatena name="section" template="hatena-module" listlimit="5" showcategory="false">

(再掲)手を加えた項目一覧

前回のエントリーでも書きましたが、「4chairs-lime」に手を加えた項目は次のとおりです。

今回は上から2番目の項目について書いています。3番目以降の項目については次回に回そうかと。

おまけ

人事異動があって以来、なかなかこのブログを更新できませんでしたが、ようやく時間をつくることができました。今更ながら、人事異動って大変ですね。


しかし、本日、「文化の日」に、文化的なことができて満足です。季節の変わり目、風邪などひかれませんよう。ではでは。