はてなブログでソースコード表示時にタイトルを付ける

技術系のブログを書くときは、ソースコードの貼付けってしますよね？
その時にタイトルというか、ファイル名みたいなの付けたいんです。はてなブログで。

こんな感じ

puts 'nomisugita.'

hatena.rb というファイル名が表示されています。

Markdown記法ならバッククォート3つの後に ruby:hatena.rb とかで出来るけど、はてなブログは対応していないっぽい。

てことで、はてなブログ用にデザインCSSを作りました！
[デザイン] -> [カスタマイズ] -> [デザインCSS] に下記を追加で貼り付ければ使用できます。

/* ソースコードの囲み */
pre.code {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #333;
    color: #eee;
    position: relative;
    border-radius: 3px;
}

/* ソースコードタイトル */
.code-title {
  position: relative;
}
.code-title pre.code {
    padding-top: 2.4em;
}
.code-title::before{
    content: attr(data-title);
    padding: 0 1em;
    background: #666;
    color: #fff8e1;
    font-size: 0.8em;
    border-radius: 3px 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

使い方

下記のように、ソースコードをタグで囲みます。
data-title にタイトルを入れてください。

<div class="code-title" data-title="ここにタイトル！">
<!-- ここにソースコード -->
</div>

実際の仕様例はこんな感じ↓

これで下記のように表示されます。

puts 'nomisugita.'

満足満足