はてなブログテーマ「Mistilteinn」をサムネ付き記事一覧に対応させてみた。

魔改造しました。

先日、はてなブログの最新記事モジュールがサムネつきに対応しました。

これまでの記事も読まれやすく！サイドバーの「最新記事」モジュールで、記事のサムネイル画像を表示できるようにしました - はてなブログ開発ブログ

サムネつき記事一覧を表示させるのは有志のかたがたによって実装できましたが、公式で公開されるのは非常にありがたいです。
【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab

なぜなら今までの方法ではInstagramの画像をサムネとして読み取ってくれなかったからです。今回の変更ではInstagramの画像も表示されるようになっています。

「やったぜ！」と思いながら早速自分のブログにも適用してみたのですが、変なデザインになってしまいます。これは採用しているはてなブログテーマ「Mistilteinn」がまだサムネつきのデザインに最適化されていないからです。

　以下は「Mistilteinn」作成者の記事。

これまでの記事も読まれやすく！サイドバーの「最新記事」モジュールで、記事のサムネイル画像を表示できるようにしました - はてなブログ開発ブログ
こっちの修正は大変そうなので、とりあえず保留。
Misなんちゃらとか根本的に直さないとサムネ対応とか無理だと思う。どうしようかなー。
テーマの紹介ページで未対応って旨書いておけば良いのだろーか。つらい。
ブログテーマの修正まとメモ(仮) - KYOHON

自分でやってみよう！

　それならばと自分でやってみることにしました。以下のコードを貼付ければ正しく表示されるようになります。やったことは記事タイトルを改行し、省略せず全て表示するようにしたこと。あとはマウスオーバー時の色を変えたことです。

/*記事一覧　サムネ対応*/
/* エントリ改行あり　省略なし*/
.hatena-module-recent-entries li a, .hatena-module-recent-comments li {
    word-wrap: normal; /* for IE */
    white-space: normal; 
    overflow: visible;
}

/* */
.hatena-module-recent-entries .hatena-urllist li {
    border-bottom: solid 1px #ddd !important;
}

.hatena-module-recent-entries .hatena-urllist li a.recent-entries-entry-title {
	border: none !important;
}

.hatena-module-recent-entries .hatena-urllist li a.recent-entries-entry-image-link{
	padding: 0;
	border:none !important; 
}


.hatena-module-recent-entries .hatena-urllist li:last-of-type a, .hatena-module-links .hatena-urllist li:last-of-type a {
	border-bottom: none; 
}


/* マウスオーバー時*/
.hatena-module-recent-entries .hatena-urllist li:last-of-type a:hover {
    text-decoration: underline;
	box-shadow: none;
    background:#ffd !important;
	opacity: 1;
}

.hatena-module-recent-entries .hatena-urllist li a.recent-entries-entry-title:hover, .hatena-module-links .hatena-urllist li a:hover{
	text-decoration: underline;
	box-shadow: none; 
    background:#ffd !important;
	opacity: 1;
}
.hatena-module-recent-entries .hatena-urllist li a.recent-entries-entry-image-link:hover{
	box-shadow: none;
}

追記：セレクタ名が変更されていました。下に修正版を書いておきます。ついでに注目記事にも適用されるようにしました。
旧：recent-entries-entry-image-link
recent-entries-entry-title

新：recent-entries-image-link
recent-entries-title-link

/* 記事一覧をサムネ表示に対応*/
/* エントリ改行あり　省略なし*/
.hatena-module-recent-entries li a, .hatena-module-recent-comments li {
    word-wrap: normal; /* for IE */
    white-space: normal; 
    overflow: visible;
}

.hatena-module-entries-access-ranking .hatena-module-body,.hatena-module-recent-entries .hatena-module-body, .hatena-module-links .hatena-module-body {
    padding: 0;
}

.hatena-module-entries-access-ranking .hatena-urllist li,.hatena-module-recent-entries .hatena-urllist li {
	border-bottom: solid 1px #ddd !important;
    padding-left:0px;
    margin:0px;
}

.hatena-module-entries-access-ranking .hatena-urllist li a.access-enries-title-link,.hatena-module-recent-entries .hatena-urllist li a.recent-entries-title-link {
	display: block;
	padding: 8px 15px;
	border: none !important;
}

.hatena-module-recent-entries .hatena-urllist li a.recent-entries-image-link{
    display: block;
	padding: 0;
	border:none !important;
}

.hatena-module-entries-access-ranking .hatena-urllist li:first-of-type,.hatena-module-recent-entries .hatena-urllist li:first-of-type,.hatena-module-links .hatena-urllist li:first-of-type{
    margin-top: -10px;
}

.hatena-module-recent-entries .hatena-urllist li:last-of-type a, .hatena-module-links .hatena-urllist li:last-of-type a {
	border-bottom: none;
}
/* マウスオーバー時*/
.hatena-module-recent-entries .hatena-urllist li a.recent-entries-title-link:hover, .hatena-module-links .hatena-urllist li a:hover{
	text-decoration: underline;
	box-shadow: none;
    background:#ffd;
	opacity: 1;
}
.hatena-module-recent-entries .hatena-urllist li a.recent-entries-image-link:hover{
    text-decoration: normal;
	box-shadow: none;
	opacity: 1;
}