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

マトリョーシカ的日常

ワクワクばらまく明日のブログ。

はてなブログテーマ「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;
}

...追記ここまで...


最新記事をサムネつきに対応させるにはデザイン>サイドバー>最新記事から「記事のサムネイル画像も表示する」にチェックを入れるだけです。

f:id:kyokucho1989:20140404055234p:plain


変更前
 f:id:kyokucho1989:20140404054518p:plain

変更後
 f:id:kyokucho1989:20140404055129p:plain

※画像は「マトリョーシカ的日常」ではなく非公開ブログ(テスト用)のものです。

おわりに

  • はてなブログはいろんな箇所をいじれるようになっており、自分なりのカスタマイズを行うのがとても楽しいです。僕はいつかは自分のブログテーマをつくりたいなぁ。
  • 記事下にInstagramに対応したサムネつき関連記事を表示できるようなってほしい。

現場でかならず使われている CSSデザインのメソッド

現場でかならず使われている CSSデザインのメソッド

  • 作者: 北川貴清,窪木博士,KLEE Atelier*Spoon,小浜愛香,佐々木恵,棧敷友香子,錦織幸知,前川昌幸,山川祐一郎
  • 出版社/メーカー: エムディエヌコーポレーション(MdN)
  • 発売日: 2013/11/20
  • メディア: Kindle版
  • この商品を含むブログを見る