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

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

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

f:id:nasust:20170111183516j:plain



こんにちはnasustです。

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

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

f:id:nasust:20170111091249j:plain

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

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

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

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

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

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

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

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

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 コピペだけで適用できるように修正しました。

広告を非表示にする