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

タオルケット体操

サツバツいんたーねっと

はてなブログの人気記事一覧を画像 + オーバーレイのWordPressっぽいお洒落仕様にカスタマイズする

f:id:hachibeechan:20150519232552p:plain

はてなブログのhtmlは日々微調整が入っている

はい。
WordPressとか? だとサムネ付きの記事一覧に白抜きの文字がオーバーレイされてちょっとオシャレっぽくなってたりするじゃないですか。

あれ、良いなーと思って以前に挑戦したんですけども、はてなブログ側のclass振りが微妙すぎてCSS書くのがめんどくさくなって投げ出した覚えがあります。
しかし、最近になってちょいちょいと改善が行われており、サイドバーの各要素に適切なclass名が振られるようになりました。

作り方

HTMLの構築さえまともならCSSを書くのは楽です。というわけで上の写真みたいになりました。
参考コードは以下で。

hatena-modules-io/_urllist-with-thumbnail.styl at master · hachibeeDI/hatena-modules-io · GitHub

radial-gradient(円形グラデーション)を使ってたり、微妙に青系にしたりみたいな調整をしてます。テーマによっては色が合わないこともあるとおもうので、そういう時は適当に調整すると良いと思います。

StylusというメタCSSを使っているのでそのままは適用できないと思いますが、雰囲気で感じ取ってコピーすればいけると思います。JavaScriptは使ってません。
うまくいかねーよ! という方は、ChromeやFirefoxなどの解析ツールを起動して要素に適用されているCSSを覗いてください(投げやり)。

ちなみに拙作のブログテーマであるCinnamonでは、何もしなくても僕の独断と偏見でサムネ付きの記事一覧が勝手にこのスタイルになります。
Cinnamon - テーマ ストア - はてなブログ
アグレッシブですね。

やっつけで作ったので、まだhover時のアニメーションがショボかったりとまぁ色々な調整はしたいんですが気が向いたら変わると思います。

なお、幅が300pxを越えがちになる傾向がありますので、画像が粗くならないようにデザイン設定ではサムネイルの大きさはそれ以上のサイズに設定しておくことをお勧めします。

まとめ

一応、はてなでも同じようなことをする既存のブログパーツもあったりしたっぽいんですが、僕の知る限りでは既成のサイドバーに適用してるような記事ってなかったんで書きました。既出だったらごめんなさい。

はてなブログは日々改善されていて、CSSのセレクタをネストしまくらなくてもいじりやすくなりつつあるので良さがありますね。

せっかくスクショとったけど、オッサンだと嬉しくないので別のタイトルにすればよかったと後悔してます。