サイドバーの注目記事をビジュアル的デザインにカスタマイズする - はてなブログカスタマイズ

---

---

こんにちはnasustです。

今回は、はてなブログのサイドバーの注目記事のデザインをカスタマイズを紹介します。

また、このカスタマイズはサイドバーの最新記事と関連記事にも適応されます。

上記のスクリーンショットのようにアイキャッチ画像を最大化してビジュアル的に表現出来ます。ビジュアル化する事で、記事の注目度がアップします。

サイドバーのデザインの設定

はてなブログのデザイン画面から注目記事の設定を行います。

デザイン画面 > サイドバー > 注目記事 > 編集 で編集画面を標準します。

表示する内容を次の通りに設定します。

• サムネイル画像を表示するにチェックする
• ブックマーク数を表示する

これ以外はチェックしないで下さい。

サムネイル画像は、はてなブログのテーマによって大きさが違います。 サイドバーの幅に合わせて設定してください。

CSS

.hatena-urllist{
    display: block;
}

.urllist-item{
    display: block;
    position: relative;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

.urllist-item .urllist-item-inner{
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

.urllist-item .urllist-image-link{
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

.urllist-item .urllist-image{
    display: block;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    width: 100% !important;
    height: auto !important;
}

.urllist-item .urllist-title-link{
    display: block;
    position:absolute;
    width: calc( 100% - 20px );
    
    left:0px;
    bottom:0px;
    color:#FFFFFF;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    
    margin:0px !important;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    
    background: linear-gradient( rgba(0,0,0,0) , rgba(0,0,0,0.8) );
}

.urllist-item .urllist-title-link:hover
.urllist-item .urllist-title-link:active
.urllist-item .urllist-title-link:visited{
    color:#FFF;
}

.bookmark-widget-counter{
    display: block;
    width: 100%;
    position:absolute;
    left:0px;
    top:5px;
    text-align: right;
    vertical-align: top;
}

.bookmark-widget-counter img{
    margin-right: 5px;
    vertical-align: top;
}

最後に

はてなブログのサイドバーのカスタマイズは、デザイン画面の設定やテーマによって、CSSの値を調整する必要がある為にコピペでカスタマイズすることが出来ません。

ですが数値を調整するだけなので、試行錯誤することで綺麗に表示することが出来ます。

2016年1月11日 10:46 コピペだけで適用できるように修正しました。

関連記事

やっとブログをレスポンシブに対応しました

ビジュアルな記事のタイトルを実現する、はてなブログカスタマイズ

はてなブログのカテゴリを階層化するカスタマイズ

はてなブログテーマ 「 foodey 」を制作しています

はてなブログ カスタマイズ

はてなブログのテーマ『 monolithic 』を公開しました。

アーカイブページに「続きを読む」のリンクを追加する。- はてなブログカスタマイズ

はてなブログのカスタマイズ。ヘッダーメニューを追加しました。今まで行ってきた全てのカスタマイズも解説します。

はてなブログをマテリアルデザイン風にカスタマイズしました。デザインのノウハウからCSSの編集迄詳しく解説!!