はてなブログの公式テーマEpicのサイドバーのアイキャッチ画像にタイトルリンクを重る

ベーシックなデザインが人気のオフィシャルテーマ「Epic」のサイドバーの注目記事と最新記事のアイキャッチ画像にタイトルリンクを重ねて見た。

アイキャッチ画像を設定するとタイトルリンクがしりすぼみになるのでアイキャッチ画像にタイトルリンクを重ねたよー。

Epicのリンクカラーを背景色にしてopacityで透過してるんだよ。

自分用の備忘録としてCSSのソースコードを残しておく。


/* Epicのサイドバーのアイキャッチ画像にタイトルリンクを重る */

#box2 .hatena-urllist {
    margin: 0;
    padding: 0
}
#box2 .urllist-item {
    position: relative
}
#box2 .urllist-image {
    display: block;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 180px
}
#box2 .urllist-title-link {
    background-color: #256fba;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
    opacity: .9; 
    overflow: hidden;
    padding: .125rem .5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px
}

@media (max-width: 767px) {
    #box2 .urllist-image,
    #box2 .urllist-title-link {
        width: 100%
    }
}

/* End Epicのサイドバーのアイキャッチ画像にタイトルリンクを重る */

実行結果笑