はてなブログのカスタマイズを記事にするときに、HTMLやCSS、JavaScriptのソースコードを<pre>タグで囲んで表示しているのですが、その左上にタイトル(言語名)を表示してわかりやすくしてみました。
HTML編集を選択して、<pre>に続いて「<span class="box-title">タイトル</span>」と入力、必ず改行して、そのあとにソースコードを、最後に</pre>を入力します。
<pre><span class="box-title">タイトル</span> /* 必ず改行する */ ソースコードを書く </pre>
左上にタイトルを表示するCSSは次のとおりです。
(デザイン→カスタマイズ→「デザインCSS」にコードを入力)
.entry-content pre { position: relative; } .box-title { position: absolute; top: 0; left: 0; font-family: sans-serif; font-size: 13px; display: inline-block; padding: 2px 5px; color: #fff; background: #000; }
左上にタイトルを表示するために、<pre>を相対位置「position:relative」で、タイトルを絶対位置「position:absolute」で表示しています。
JavaScript
<script>
alert("Hello world!!");
</script>
このカスタマイズは、コードも長くなりそうだし、面倒くさそうだったので、ずっと放置していたのですが、意外と簡単にできました。過去の記事を直すほうが面倒くさかった。