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

こんにちはnasustです。

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

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

f:id:nasust:20170111091249j:plain

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

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

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

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

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

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

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

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

CSS

/* urllist */

.hatena-urllist{
    display: block;
}

.urllist-item{
    display: block;
    position: relative;
}

.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{
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

.urllist-item .urllist-title-link{
    display: block;
    width: 188px; /* この値はサムネイル画像に合わせて変更する。*/
    position:absolute;
    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);
    
    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: 205px; /* この値はサムネイル画像に合わせて変更する。*/
    position:absolute;
    left:0px;
    top:0px;
    text-align: right;
    vertical-align: top;
}

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